import { useState } from 'react';
import type { Meta, StoryObj } from '@storybook/react';

import { Label } from '../label';
import { Checkbox } from './checkbox';

const meta: Meta<typeof Checkbox> = {
  title: 'Components/Checkbox',
  component: Checkbox,
  argTypes: {},
};

export default meta;

type Story = StoryObj<typeof Checkbox>;

export const Example: Story = {
  render: () => {
    return <Checkbox defaultChecked={true} />;
  },
};

export const Uncontrolled: Story = {
  render: () => {
    return <Checkbox defaultChecked={true} />;
  },
};

export const Controlled: Story = {
  render: () => {
    const [checked, setChecked] = useState(false);
    return <Checkbox checked={checked} onCheckedChange={c => setChecked(Boolean(c))} />;
  },
};

export const WithLabel: Story = {
  render: () => {
    return (
      <div style={{ display: 'flex', alignItems: 'center' }}>
        <Checkbox id="with-label-c1" defaultChecked={true} />
        <Label style={{ marginLeft: '0.5rem' }} htmlFor="with-label-c1">
          Accept terms and conditions.
        </Label>
      </div>
    );
  },
};

export const Disabled: Story = {
  render: () => {
    return (
      <div>
        <div style={{ display: 'flex', alignItems: 'center' }}>
          <Checkbox id="disabled-c1" defaultChecked={true} disabled />
          <Label style={{ marginLeft: '0.5rem' }} htmlFor="disabled-c1">
            Accept terms and conditions.
          </Label>
        </div>
        <div style={{ display: 'flex', marginTop: '1rem', alignItems: 'center' }}>
          <Checkbox id="disabled-c2" defaultChecked={false} disabled />
          <Label style={{ marginLeft: '0.5rem' }} htmlFor="disabled-c2">
            Accept terms and conditions.
          </Label>
        </div>
      </div>
    );
  },
};
