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

const meta: Meta<typeof FdsCheckbox> = {
  title: 'FDS/Form/FdsCheckbox',
  component: FdsCheckbox,
  tags: ['autodocs'],
  argTypes: {
    label: { control: { type: 'text' } },
    checked: { control: { type: 'boolean' } },
    indeterminate: { control: { type: 'boolean' } },
    disabled: { control: { type: 'boolean' } },
    required: { control: { type: 'boolean' } },
    value: { control: { type: 'text' } },
    name: { control: { type: 'text' } },
    id: { control: { type: 'text' } },
  },
  args: {
    label: 'Checkbox label',
    checked: false,
    indeterminate: false,
    disabled: false,
    required: false,
    value: undefined,
    name: 'checkbox-name',
    id: undefined,
  },
}

export default meta
type Story = StoryObj<typeof meta>

export const Default: Story = {
  args: {
    checked: false,
    label: 'Checkbox label',
  },
  render: (args: NonNullable<Story['args']>) => ({
    components: { FdsCheckbox },
    setup() {
      const checked = ref(args.checked)
      const handleChange = (value: boolean) => {
        checked.value = value
      }
      // Watch for args changes from controls
      watch(
        () => args.checked,
        (newValue) => {
          checked.value = newValue
        },
      )
      return { args, checked, handleChange }
    },
    template: `
      <FdsCheckbox 
        v-bind="args"
        @change="handleChange"
      />
    `,
  }),
}

export const Checked: Story = {
  args: {
    checked: true,
  },
  render: (args: NonNullable<Story['args']>) => ({
    components: { FdsCheckbox },
    setup() {
      const checked = ref(args.checked)
      const handleChange = (value: boolean) => {
        checked.value = value
      }
      // Watch for args changes from controls
      watch(
        () => args.checked,
        (newValue) => {
          checked.value = newValue
        },
      )
      return { args, checked, handleChange }
    },
    template: `
      <FdsCheckbox 
        v-bind="args"
        :checked="checked" 
        @change="handleChange"
      >
        Checked checkbox
      </FdsCheckbox>
    `,
  }),
}

export const Indeterminate: Story = {
  args: {
    indeterminate: true,
  },
  render: (args: NonNullable<Story['args']>) => ({
    components: { FdsCheckbox },
    setup() {
      const checked = ref(args.checked)
      const handleChange = (value: boolean) => {
        checked.value = value
      }
      // Watch for args changes from controls
      watch(
        () => args.checked,
        (newValue) => {
          checked.value = newValue
        },
      )
      return { args, checked, handleChange }
    },
    template: `
      <FdsCheckbox 
        v-bind="args"
        :checked="checked" 
        @change="handleChange"
      >
        Indeterminate checkbox
      </FdsCheckbox>
    `,
  }),
}

export const Disabled: Story = {
  args: {
    disabled: true,
    checked: true,
  },
  render: (args: NonNullable<Story['args']>) => ({
    components: { FdsCheckbox },
    setup() {
      const checked = ref(args.checked)
      const handleChange = (value: boolean) => {
        checked.value = value
      }
      // Watch for args changes from controls
      watch(
        () => args.checked,
        (newValue) => {
          checked.value = newValue
        },
      )
      return { args, checked, handleChange }
    },
    template: `
      <FdsCheckbox 
        v-bind="args"
        :checked="checked" 
        @change="handleChange"
      >
        Disabled checkbox
      </FdsCheckbox>
    `,
  }),
}

export const States: Story = {
  render: () => ({
    components: { FdsCheckbox },
    setup() {
      const checked1 = ref(false)
      const checked2 = ref(true)
      const checked3 = ref(false)
      const checked4 = ref(false)
      const checked5 = ref(true)
      const handleChange1 = (value: boolean) => {
        checked1.value = value
      }
      const handleChange2 = (value: boolean) => {
        checked2.value = value
      }
      const handleChange3 = (value: boolean) => {
        checked3.value = value
      }
      const handleChange4 = (value: boolean) => {
        checked4.value = value
      }
      const handleChange5 = (value: boolean) => {
        checked5.value = value
      }
      return {
        checked1,
        checked2,
        checked3,
        checked4,
        checked5,
        handleChange1,
        handleChange2,
        handleChange3,
        handleChange4,
        handleChange5,
      }
    },
    template: `
      <div class="space-y-4">
        <div class="flex items-center space-x-4">
          <FdsCheckbox :checked="checked1" @change="handleChange1">
            Unchecked
          </FdsCheckbox>
        </div>
        <div class="flex items-center space-x-4">
          <FdsCheckbox :checked="checked2" @change="handleChange2">
            Checked
          </FdsCheckbox>
        </div>
        <div class="flex items-center space-x-4">
          <FdsCheckbox :checked="checked3" @change="handleChange3" indeterminate>
            Indeterminate
          </FdsCheckbox>
        </div>
        <div class="flex items-center space-x-4">
          <FdsCheckbox :checked="checked4" @change="handleChange4" disabled>
            Disabled unchecked
          </FdsCheckbox>
        </div>
        <div class="flex items-center space-x-4">
          <FdsCheckbox :checked="checked5" @change="handleChange5" disabled>
            Disabled checked
          </FdsCheckbox>
        </div>
      </div>
    `,
  }),
}

export const WithForm: Story = {
  render: () => ({
    components: { FdsCheckbox },
    setup() {
      const terms = ref(false)
      const newsletter = ref(false)
      const marketing = ref(true)
      const handleTermsChange = (value: boolean) => {
        terms.value = value
      }
      const handleNewsletterChange = (value: boolean) => {
        newsletter.value = value
      }
      const handleMarketingChange = (value: boolean) => {
        marketing.value = value
      }
      return {
        terms,
        newsletter,
        marketing,
        handleTermsChange,
        handleNewsletterChange,
        handleMarketingChange,
      }
    },
    template: `
      <form class="space-y-4">
        <div>
          <FdsCheckbox :checked="terms" @change="handleTermsChange" name="terms" id="terms" required>
            I agree to the terms and conditions
          </FdsCheckbox>
        </div>
        <div>
          <FdsCheckbox :checked="newsletter" @change="handleNewsletterChange" name="newsletter" id="newsletter">
            Subscribe to newsletter
          </FdsCheckbox>
        </div>
        <div>
          <FdsCheckbox :checked="marketing" @change="handleMarketingChange" name="marketing" id="marketing">
            Receive marketing emails
          </FdsCheckbox>
        </div>
      </form>
    `,
  }),
}