import VRadio from './VRadio.vue';
import VFormField from './VFormField.vue'; // For context if showing errors related to a radio group
import type { Meta, StoryObj } from '@storybook/vue3';
import { ref, watch } from 'vue';

const meta: Meta<typeof VRadio> = {
  title: 'Valerie/VRadio',
  component: VRadio,
  tags: ['autodocs'],
  argTypes: {
    modelValue: { control: 'text', description: 'Current selected value in the radio group (v-model).' },
    value: { control: 'text', description: 'The unique value this radio button represents.' },
    label: { control: 'text' },
    disabled: { control: 'boolean' },
    id: { control: 'text' },
    name: { control: 'text', description: 'HTML `name` attribute for grouping.' },
    // 'update:modelValue': { action: 'updated' }
  },
  parameters: {
    docs: {
      description: {
        component: 'A custom radio button component. Group multiple VRadio components with the same `name` prop and bind them to the same `v-model` for a radio group.',
      },
    },
  },
};

export default meta;
type Story = StoryObj<typeof VRadio>;

// Template for a single VRadio instance, primarily for showing individual states
const SingleRadioTemplate: Story = {
  render: (args) => ({
    components: { VRadio },
    setup() {
      const storyValue = ref(args.modelValue);
      watch(() => args.modelValue, (newVal) => {
        storyValue.value = newVal;
      });
      const onChange = (newValue: string | number) => {
        storyValue.value = newValue;
        // args.modelValue = newValue; // Update Storybook arg
      }
      return { args, storyValue, onChange };
    },
    template: '<VRadio v-bind="args" :modelValue="storyValue" @update:modelValue="onChange" />',
  }),
};


// Story for a group of radio buttons
export const RadioGroup: Story = {
  render: (args) => ({
    components: { VRadio },
    setup() {
      const selectedValue = ref(args.groupModelValue || 'opt2'); // Default selected value for the group
      // This simulates how a parent component would handle the v-model for the group
      return { args, selectedValue };
    },
    template: `
      <div>
        <VRadio
          v-for="option in args.options"
          :key="option.value"
          :id="'radio-' + args.name + '-' + option.value"
          :name="args.name"
          :label="option.label"
          :value="option.value"
          :disabled="option.disabled"
          v-model="selectedValue"
        />
        <p style="margin-top: 10px;">Selected: {{ selectedValue }}</p>
      </div>
    `,
  }),
  args: {
    name: 'storyGroup',
    groupModelValue: 'opt2', // Initial selected value for the group
    options: [
      { value: 'opt1', label: 'Option 1' },
      { value: 'opt2', label: 'Option 2 (Default)' },
      { value: 'opt3', label: 'Option 3 (Longer Label)' },
      { value: 'opt4', label: 'Option 4 (Disabled)', disabled: true },
      { value: 5, label: 'Option 5 (Number value)'}
    ],
  },
  parameters: {
    docs: {
      description: { story: 'A group of `VRadio` components. They share the same `name` and `v-model` (here `selectedValue`).' },
    },
  },
};

export const WithLabel: Story = {
  ...SingleRadioTemplate,
  args: {
    id: 'labelledRadio',
    name: 'single',
    modelValue: 'myValue', // This radio is selected because modelValue === value
    value: 'myValue',
    label: 'Choose this option',
  },
};


export const DisabledUnselected: Story = {
  ...SingleRadioTemplate,
  args: {
    id: 'disabledUnselectedRadio',
    name: 'singleDisabled',
    modelValue: 'anotherValue', // This radio is not selected
    value: 'thisValue',
    label: 'Cannot select this',
    disabled: true,
  },
};

export const DisabledSelected: Story = {
  ...SingleRadioTemplate,
  args: {
    id: 'disabledSelectedRadio',
    name: 'singleDisabled',
    modelValue: 'thisValueSelected', // This radio IS selected
    value: 'thisValueSelected',
    label: 'Selected and disabled',
    disabled: true,
  },
};


// It's less common to use VRadio directly in VFormField for its label,
// but VFormField could provide an error message for a radio group.
export const GroupInFormFieldForError: Story = {
 render: (args) => ({
    components: { VRadio, VFormField },
    setup() {
      const selectedValue = ref(args.groupModelValue || null);
      return { args, selectedValue };
    },
    template: `
      <VFormField :label="args.formFieldArgs.label" :errorMessage="args.formFieldArgs.errorMessage">
        <div role="radiogroup" :aria-labelledby="args.formFieldArgs.label ? args.formFieldArgs.labelId : undefined">
          <VRadio
            v-for="option in args.options"
            :key="option.value"
            :id="'radio-ff-' + args.name + '-' + option.value"
            :name="args.name"
            :label="option.label"
            :value="option.value"
            :disabled="option.disabled"
            v-model="selectedValue"
          />
        </div>
        <p v-if="selectedValue" style="margin-top: 10px;">Selected: {{ selectedValue }}</p>
      </VFormField>
    `,
  }),
  args: {
    name: 'formFieldRadioGroup',
    groupModelValue: null, // Start with no selection
    options: [
      { value: 'ffOpt1', label: 'Option A' },
      { value: 'ffOpt2', label: 'Option B' },
    ],
    formFieldArgs: {
      labelId: 'radioGroupLabel', // An ID for the label if VFormField label is used as group label
      label: 'Please make a selection:',
      errorMessage: 'A selection is required for this group.',
    }
  },
  parameters: {
    docs: {
      description: { story: 'A radio group within `VFormField`. `VFormField` can provide a group label (via `aria-labelledby`) and display error messages related to the group.' },
    },
  },
};
