import { useState } from 'react';
import type { Meta, StoryObj } from 'storybook-react-rsbuild';
import {
  Switch,
  Checkbox,
  RadioGroup,
  RadioItem,
  SegmentedControl,
  Control,
} from '../components/ui';

/* Grouped selection controls. Anchored on Switch for the docgen table;
   the stories below showcase each control. */
const meta = {
  title: 'Selection/Controls',
  component: Switch,
  parameters: {
    docs: {
      description: {
        component:
          'Toggle, checkbox, radio group and segmented control. The `Control` helper pairs any of them with a clickable label.',
      },
    },
  },
  argTypes: {
    defaultChecked: { control: 'boolean' },
    checked: { control: 'boolean' },
    disabled: { control: 'boolean' },
    onCheckedChange: { action: 'checked changed' },
  },
} satisfies Meta<typeof Switch>;

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

export const Playground: Story = {
  args: { defaultChecked: false },
};

export const Switches: Story = {
  render: () => (
    <div style={{ display: 'flex', gap: 20, alignItems: 'center' }}>
      <Switch defaultChecked />
      <Switch />
      <Control control={<Switch defaultChecked />}>Wi-Fi</Control>
    </div>
  ),
};

export const Checkboxes: Story = {
  render: () => (
    <div style={{ display: 'flex', flexDirection: 'column', gap: 12 }}>
      <Control control={<Checkbox defaultChecked />}>Sync to iCloud</Control>
      <Control control={<Checkbox />}>Share analytics</Control>
    </div>
  ),
};

export const Radios: Story = {
  render: () => (
    <RadioGroup defaultValue="comfortable" style={{ display: 'flex', flexDirection: 'column', gap: 12 }}>
      <Control control={<RadioItem value="compact" />}>Compact</Control>
      <Control control={<RadioItem value="comfortable" />}>Comfortable</Control>
      <Control control={<RadioItem value="spacious" />}>Spacious</Control>
    </RadioGroup>
  ),
};

function SegmentedDemo() {
  const [v, setV] = useState('day');
  return (
    <SegmentedControl
      value={v}
      onValueChange={setV}
      items={[
        { value: 'day', label: 'Day' },
        { value: 'week', label: 'Week' },
        { value: 'month', label: 'Month' },
      ]}
    />
  );
}

export const Segmented: Story = { render: () => <SegmentedDemo /> };