import { useState } from 'react';

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

import { InputLabel, RadioInput } from '@/components';
import { RADIO_DATA } from '@/stories/radio/Radio.data';

const meta: Meta<typeof RadioInput> = {
  component: RadioInput,
};

export default meta;

type TStory = StoryObj<typeof RadioInput>;

export const Primary: TStory = {
  args: {
    theme: 'light',
    disabled: false,
    size: 'sm',
    onChange: () => {},
  },
};

export function MdLabelsRight() {
  const [chosenOption, setChosenOption] = useState<string | null>(null);

  return (
    <div className="flex flex-col gap-y-2">
      {RADIO_DATA.map(item => (
        <RadioInput
          key={item.value}
          onChange={() => setChosenOption(item.value)}
          id={item.value}
          checked={chosenOption === item.value}
          size={'md'}
        >
          <span>{item.label}</span>
        </RadioInput>
      ))}
    </div>
  );
}

export function SmLabelsRight() {
  const [chosenOption, setChosenOption] = useState<string | null>(null);

  return (
    <div className="flex flex-col gap-y-4">
      {RADIO_DATA.map(item => (
        <div key={item.value} className="flex gap-x-4">
          <RadioInput
            onChange={() => setChosenOption(item.value)}
            id={item.value}
            checked={chosenOption === item.value}
            size={'sm'}
          />

          <InputLabel id={item.value} className="cursor-pointer">
            <span>{item.label}</span>
          </InputLabel>
        </div>
      ))}
    </div>
  );
}

export function SmLabelsLeft() {
  const [chosenOption, setChosenOption] = useState<string | null>(null);

  return (
    <div className="flex flex-col gap-y-4">
      {RADIO_DATA.map(item => (
        <div key={item.value} className="flex gap-x-2">
          <InputLabel id={item.value} className="cursor-pointer">
            <span>{item.label}</span>
          </InputLabel>
          <RadioInput
            onChange={() => setChosenOption(item.value)}
            id={item.value}
            checked={chosenOption === item.value}
            size={'sm'}
          />
        </div>
      ))}
    </div>
  );
}