import { useState } from 'react'
import type { Meta, StoryObj } from '@storybook/react-vite'
import { Switch } from './Switch'

const meta: Meta<typeof Switch> = {
  title: 'UI/Switch',
  component: Switch,
  tags: ['autodocs'],
  argTypes: {
    label: { control: 'text' },
    description: { control: 'text' },
    checked: { control: 'boolean' },
    disabled: { control: 'boolean' },
  },
  parameters: {
    design: {
      type: 'figma',
      url: 'https://www.figma.com/design/mrabO6AtxN3ektGiTk0I9c/ResearchInsights?node-id=33-5337',
    },
  },
}

export default meta
type Story = StoryObj<typeof meta>

const ControlledSwitch = (props: React.ComponentProps<typeof Switch>) => {
  const [checked, setChecked] = useState(props.checked ?? false)
  return <Switch {...props} checked={checked} onChange={setChecked} />
}

export const Default: Story = {
  render: () => <ControlledSwitch label="Enable notifications" />,
}

export const On: Story = {
  render: () => <ControlledSwitch label="Enable notifications" checked />,
}

export const WithDescription: Story = {
  render: () => (
    <ControlledSwitch
      label="Auto-save responses"
      description="Automatically save participant responses as they are entered."
      checked
    />
  ),
}

export const Disabled: Story = {
  render: () => (
    <div className="flex flex-col gap-4">
      <Switch label="Disabled off" disabled />
      <Switch label="Disabled on" disabled checked />
    </div>
  ),
}

export const Standalone: Story = {
  render: () => (
    <div className="flex items-center gap-4">
      <span className="text-body text-grey-01">Dark mode</span>
      <ControlledSwitch aria-label="Toggle dark mode" />
    </div>
  ),
}

export const AllStates: Story = {
  render: () => (
    <div className="flex flex-col gap-4">
      <ControlledSwitch label="Off" />
      <ControlledSwitch label="On" checked />
      <ControlledSwitch
        label="With description"
        description="Additional context about this setting."
      />
      <ControlledSwitch
        label="On with description"
        description="This feature is currently enabled."
        checked
      />
      <Switch label="Disabled off" disabled />
      <Switch label="Disabled on" disabled checked />
    </div>
  ),
}