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

import { Label } from '../label';
import { Radio } from './radio';

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

export default meta;

type Story = StoryObj<typeof Radio.Group>;

const style = { display: 'flex', marginLeft: '0.5rem', alignItems: 'center' };

export const Example: Story = {
  render: () => {
    return (
      <Radio.Group defaultValue="default">
        <div style={style}>
          <Radio.Item value="default" id="example-r1" />
          <Label style={{ marginLeft: 4 }} htmlFor="example-r1">
            Default
          </Label>
        </div>
        <div style={style}>
          <Radio.Item value="comfortable" id="example-r2" />
          <Label style={{ marginLeft: 4 }} htmlFor="example-r2">
            Comfortable
          </Label>
        </div>
        <div style={style}>
          <Radio.Item value="compact" id="example-r3" />
          <Label style={{ marginLeft: 4 }} htmlFor="example-r3">
            Compact
          </Label>
        </div>
      </Radio.Group>
    );
  },
};

export const Uncontrolled: Story = {
  render: () => {
    return (
      <Radio.Group defaultValue="default">
        <div style={style}>
          <Radio.Item value="default" id="uncontrolled-r1" />
          <Label style={{ marginLeft: 4 }} htmlFor="uncontrolled-r1">
            Default
          </Label>
        </div>
        <div style={style}>
          <Radio.Item value="comfortable" id="uncontrolled-r2" />
          <Label style={{ marginLeft: 4 }} htmlFor="uncontrolled-r2">
            Comfortable
          </Label>
        </div>
        <div style={style}>
          <Radio.Item value="compact" id="uncontrolled-r3" />
          <Label style={{ marginLeft: 4 }} htmlFor="uncontrolled-r3">
            Compact
          </Label>
        </div>
      </Radio.Group>
    );
  },
};

export const Controlled: Story = {
  render: () => {
    const [value, setValue] = useState('default');
    return (
      <Radio.Group value={value} onValueChange={v => setValue(v)}>
        <div style={style}>
          <Radio.Item value="default" id="controlled-r1" />
          <Label style={{ marginLeft: 4 }} htmlFor="controlled-r1">
            Default
          </Label>
        </div>
        <div style={style}>
          <Radio.Item value="comfortable" id="controlled-r2" />
          <Label style={{ marginLeft: 4 }} htmlFor="controlled-r2">
            Comfortable
          </Label>
        </div>
        <div style={style}>
          <Radio.Item value="compact" id="controlled-r3" />
          <Label style={{ marginLeft: 4 }} htmlFor="controlled-r3">
            Compact
          </Label>
        </div>
      </Radio.Group>
    );
  },
};

export const Horizontal: Story = {
  render: () => {
    return (
      <Radio.Group defaultValue="default" orientation="horizontal" style={{ display: 'flex' }}>
        <div style={style}>
          <Radio.Item value="default" id="horizontal-r1" />
          <Label style={{ marginLeft: 4 }} htmlFor="horizontal-r1">
            Default
          </Label>
        </div>
        <div style={{ ...style, margin: '0 1.5rem' }}>
          <Radio.Item value="comfortable" id="horizontal-r2" />
          <Label style={{ marginLeft: 4 }} htmlFor="horizontal-r2">
            Comfortable
          </Label>
        </div>
        <div style={style}>
          <Radio.Item value="compact" id="horizontal-r3" />
          <Label style={{ marginLeft: 4 }} htmlFor="horizontal-r3">
            Compact
          </Label>
        </div>
      </Radio.Group>
    );
  },
};

export const NoLoop: Story = {
  render: () => {
    return (
      <Radio.Group defaultValue="default" loop={false}>
        <div style={style}>
          <Radio.Item value="default" id="noloop-r1" />
          <Label style={{ marginLeft: 4 }} htmlFor="noloop-r1">
            Default
          </Label>
        </div>
        <div style={style}>
          <Radio.Item value="comfortable" id="noloop-r2" />
          <Label style={{ marginLeft: 4 }} htmlFor="noloop-r2">
            Comfortable
          </Label>
        </div>
        <div style={style}>
          <Radio.Item value="compact" id="noloop-r3" />
          <Label style={{ marginLeft: 4 }} htmlFor="noloop-r3">
            Compact
          </Label>
        </div>
      </Radio.Group>
    );
  },
};

export const Disabled: Story = {
  render: () => {
    return (
      <Radio.Group defaultValue="default">
        <div style={style}>
          <Radio.Item value="default" id="disabled-r1" />
          <Label style={{ marginLeft: 4 }} htmlFor="disabled-r1">
            Default
          </Label>
        </div>
        <div style={style}>
          <Radio.Item value="comfortable" id="disabled-r2" disabled />
          <Label style={{ marginLeft: 4 }} htmlFor="disabled-r2">
            Comfortable
          </Label>
        </div>
        <div style={style}>
          <Radio.Item value="compact" id="disabled-r3" />
          <Label style={{ marginLeft: 4 }} htmlFor="disabled-r3">
            Compact
          </Label>
        </div>
      </Radio.Group>
    );
  },
};
