import type { Meta, StoryObj } from '@storybook/react'
import React from 'react'
import { createSizeDecorator } from '../../utils/decorators'
import { Typography } from '../Typography'
import { Checkbox } from './Checkbox'
import { CheckboxList } from './CheckboxList'
import { LabeledCheckbox } from './LabeledCheckbox'

const meta: Meta<typeof Checkbox> = {
  title: 'Form/Checkbox',
  component: Checkbox,
  decorators: [createSizeDecorator('XS')],
  argTypes: {
    disabled: {
      control: 'boolean',
      defaultValue: false,
      description: 'Disables the checkbox if set to true.',
      table: {
        type: { summary: 'boolean' },
        defaultValue: { summary: 'false' },
      },
    },
    error: {
      control: 'boolean',
      defaultValue: false,
      description: 'Displays an error border.',
      table: {
        type: { summary: 'boolean' },
        defaultValue: { summary: 'false' },
      },
    },
    checked: {
      control: { type: 'select' },
      options: [true, false, 'indeterminate'],
      defaultValue: undefined,
      description: 'Checked state of the checkbox',
      table: {
        type: { summary: 'boolean | "indeterminate"' },
        defaultValue: { summary: undefined },
      },
    },
    className: {
      control: 'text',
      description: 'Additional CSS classes for the checkbox.',
      defaultValue: '',
    },
  },
}

export default meta

type Story = StoryObj<typeof meta>

export const Default: Story = {}

export const CheckboxWithLabel: Story = {
  render: (_args) => <LabeledCheckbox>Unchecked</LabeledCheckbox>,
}

export const AllStates: Story = {
  render: (_args) => (
    <CheckboxList>
      <LabeledCheckbox>Unchecked</LabeledCheckbox>
      <LabeledCheckbox checked>Checked</LabeledCheckbox>
      <LabeledCheckbox checked="indeterminate">Indeterminate</LabeledCheckbox>
      <LabeledCheckbox disabled>Disabled</LabeledCheckbox>
      <LabeledCheckbox checked disabled>
        Disabled Checked
      </LabeledCheckbox>
      <LabeledCheckbox checked="indeterminate" disabled>
        Disabled Indeterminate
      </LabeledCheckbox>
      <LabeledCheckbox error>Error</LabeledCheckbox>
      <LabeledCheckbox>
        Label with
        <a href="#">
          <Typography color="link"> a link</Typography>
        </a>
      </LabeledCheckbox>
    </CheckboxList>
  ),
}

const ControlledCheckboxList = (_args: Story['args']) => {
  const [selected, setSelected] = React.useState<string[]>([])

  const handleCheckedChange = (id: string, isChecked: boolean) => {
    setSelected((prev) =>
      isChecked ? [...prev, id] : prev.filter((item) => item !== id),
    )
  }

  return (
    <CheckboxList>
      <LabeledCheckbox
        checked={selected.includes('option1')}
        onCheckedChange={(c) => handleCheckedChange('option1', !!c)}
      >
        Option 1
      </LabeledCheckbox>
      <LabeledCheckbox
        checked={selected.includes('option2')}
        onCheckedChange={(c) => handleCheckedChange('option2', !!c)}
      >
        Option 2
      </LabeledCheckbox>
      <LabeledCheckbox
        checked={selected.includes('option3')}
        onCheckedChange={(c) => handleCheckedChange('option3', !!c)}
      >
        Option 3
      </LabeledCheckbox>
    </CheckboxList>
  )
}

export const Controlled: Story = {
  render: () => <ControlledCheckboxList />,
}