import VToggleSwitch from './VToggleSwitch.vue';
import type { Meta, StoryObj } from '@storybook/vue3';
import { ref, watch } from 'vue';

const meta: Meta<typeof VToggleSwitch> = {
  title: 'Valerie/VToggleSwitch',
  component: VToggleSwitch,
  tags: ['autodocs'],
  argTypes: {
    modelValue: { control: 'boolean', description: 'State of the toggle (v-model).' },
    disabled: { control: 'boolean' },
    id: { control: 'text' },
    label: { control: 'text', description: 'Accessible label (visually hidden).' },
    onText: { control: 'text', description: 'Text for ON state (inside switch).' },
    offText: { control: 'text', description: 'Text for OFF state (inside switch).' },
    // Events
    'update:modelValue': { action: 'update:modelValue', table: {disable: true} },
  },
  parameters: {
    docs: {
      description: {
        component: 'A toggle switch component, often used for boolean settings. It uses a hidden checkbox input for accessibility and state management, and custom styling for appearance.',
      },
    },
  },
};

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

// Template for managing v-model in stories
const VModelTemplate: Story = {
  render: (args) => ({
    components: { VToggleSwitch },
    setup() {
      const switchState = ref(args.modelValue);
      watch(() => args.modelValue, (newVal) => {
        switchState.value = newVal;
      });
      const onUpdateModelValue = (val: boolean) => {
        switchState.value = val;
        // args.modelValue = val; // Update Storybook arg
      };
      return { ...args, switchState, onUpdateModelValue };
    },
    template: `
      <div style="display: flex; align-items: center; gap: 10px;">
        <VToggleSwitch
          :modelValue="switchState"
          @update:modelValue="onUpdateModelValue"
          :disabled="disabled"
          :id="id"
          :label="label"
          :onText="onText"
          :offText="offText"
        />
        <span>Current state: {{ switchState ? 'ON' : 'OFF' }}</span>
      </div>
    `,
  }),
};

export const Basic: Story = {
  ...VModelTemplate,
  args: {
    modelValue: false,
    id: 'basic-toggle',
    label: 'Enable feature',
  },
};

export const DefaultOn: Story = {
  ...VModelTemplate,
  args: {
    modelValue: true,
    id: 'default-on-toggle',
    label: 'Notifications enabled',
  },
};

export const DisabledOff: Story = {
  ...VModelTemplate,
  args: {
    modelValue: false,
    disabled: true,
    id: 'disabled-off-toggle',
    label: 'Feature disabled',
  },
};

export const DisabledOn: Story = {
  ...VModelTemplate,
  args: {
    modelValue: true,
    disabled: true,
    id: 'disabled-on-toggle',
    label: 'Setting locked on',
  },
};

export const WithCustomIdAndLabel: Story = {
  ...VModelTemplate,
  args: {
    modelValue: false,
    id: 'custom-id-for-toggle',
    label: 'Subscribe to advanced updates',
  },
};

export const WithOnOffText: Story = {
  ...VModelTemplate,
  args: {
    modelValue: true,
    id: 'text-toggle',
    label: 'Mode selection',
    onText: 'ON',
    offText: 'OFF',
  },
   parameters: {
    docs: {
      description: { story: 'Displays "ON" or "OFF" text within the switch. Note: This requires appropriate styling in `VToggleSwitch.vue` to position the text correctly and may need adjustments based on design specifics for text visibility and overlap with the thumb.' },
    },
  },
};

export const NoProvidedLabel: Story = {
   ...VModelTemplate,
  args: {
    modelValue: false,
    id: 'no-label-toggle',
    // label prop is not set, will use default 'Toggle Switch'
  },
   parameters: {
    docs: {
      description: { story: 'When `label` prop is not provided, it defaults to "Toggle Switch" for accessibility. This label is visually hidden but available to screen readers.' },
    },
  },
};
