import VCheckbox from './VCheckbox.vue';
import VFormField from './VFormField.vue'; // For context, though checkbox usually handles its own label
import type { Meta, StoryObj } from '@storybook/vue3';
import { ref, watch } from 'vue'; // For v-model in stories

const meta: Meta<typeof VCheckbox> = {
  title: 'Valerie/VCheckbox',
  component: VCheckbox,
  tags: ['autodocs'],
  argTypes: {
    modelValue: { control: 'boolean', description: 'Bound state using v-model.' },
    label: { control: 'text' },
    disabled: { control: 'boolean' },
    id: { control: 'text' },
    // 'update:modelValue': { action: 'updated' }
  },
  parameters: {
    docs: {
      description: {
        component: 'A custom checkbox component with support for v-model, labels, and disabled states.',
      },
    },
  },
};

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

// Template for v-model interaction in stories
const VModelTemplate: Story = {
  render: (args) => ({
    components: { VCheckbox },
    setup() {
      const storyValue = ref(args.modelValue);
      watch(() => args.modelValue, (newVal) => {
        storyValue.value = newVal;
      });
      const onChange = (newValue: boolean) => {
        storyValue.value = newValue;
        // args.modelValue = newValue; // Storybook controls should update this
      }
      return { args, storyValue, onChange };
    },
    template: '<VCheckbox v-bind="args" :modelValue="storyValue" @update:modelValue="onChange" />',
  }),
};

export const Basic: Story = {
  ...VModelTemplate,
  args: {
    id: 'basicCheckbox',
    modelValue: false,
  },
};

export const WithLabel: Story = {
  ...VModelTemplate,
  args: {
    id: 'labelledCheckbox',
    modelValue: true,
    label: 'Accept terms and conditions',
  },
};

export const DisabledUnchecked: Story = {
  ...VModelTemplate,
  args: {
    id: 'disabledUncheckedCheckbox',
    modelValue: false,
    label: 'Cannot select this',
    disabled: true,
  },
};

export const DisabledChecked: Story = {
  ...VModelTemplate,
  args: {
    id: 'disabledCheckedCheckbox',
    modelValue: true,
    label: 'Cannot unselect this',
    disabled: true,
  },
};

export const NoLabel: Story = {
  ...VModelTemplate,
  args: {
    id: 'noLabelCheckbox',
    modelValue: true,
    // No label prop
  },
  parameters: {
    docs: {
      description: { story: 'Checkbox without a visible label prop. An external label can be associated using its `id`.' },
    },
  },
};

// VCheckbox is usually self-contained with its label.
// Using it in VFormField might be less common unless VFormField is used for error messages only.
export const InFormFieldForError: Story = {
 render: (args) => ({
    components: { VCheckbox, VFormField },
    setup() {
      const storyValue = ref(args.checkboxArgs.modelValue);
      watch(() => args.checkboxArgs.modelValue, (newVal) => {
        storyValue.value = newVal;
      });
      const onChange = (newValue: boolean) => {
        storyValue.value = newValue;
      }
      // VFormField's label prop is not used here as VCheckbox has its own.
      // VFormField's `forId` would match VCheckbox's `id`.
      return { args, storyValue, onChange };
    },
    template: `
      <VFormField :errorMessage="args.formFieldArgs.errorMessage">
        <VCheckbox
          v-bind="args.checkboxArgs"
          :modelValue="storyValue"
          @update:modelValue="onChange"
        />
      </VFormField>
    `,
  }),
  args: {
    formFieldArgs: {
      errorMessage: 'This selection is required.',
      // No label for VFormField here, VCheckbox provides its own
    },
    checkboxArgs: {
      id: 'formFieldCheckbox',
      modelValue: false,
      label: 'I agree to the terms',
    },
  },
   parameters: {
    docs: {
      description: { story: '`VCheckbox` used within `VFormField`, primarily for displaying an error message associated with the checkbox. VCheckbox manages its own label.' },
    },
  },
};

export const PreChecked: Story = {
  ...VModelTemplate,
  args: {
    id: 'preCheckedCheckbox',
    modelValue: true,
    label: 'This starts checked',
  },
};
