import React, { useState } from "react";
import Radio, { RadioProps } from "./Radio";
import { Meta, StoryObj } from "@storybook/react";

const meta = {
  title: "component/Radio",
  component: Radio,
  parameters: {
    layout: "centered",
  },
  argTypes: {
    disable: { control: "boolean" },
    color: { control: "color", description: "색" },
    backgroundColor: { control: "color", description: "배경" },
  },
  tags: ["autodocs"],
} satisfies Meta<typeof Radio>;

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

export const Default: Story = (args: RadioProps) => {
  const [radioValue, setRadioValue] = useState<string>("");
  const [isChecked, setIsChecked] = useState<boolean>(false);

  const handleOnChange = (e: React.ChangeEvent<HTMLInputElement>) => {
    setRadioValue(e.currentTarget.value);
    setIsChecked(!isChecked);
  };

  const handleOnclick = (e: React.MouseEvent<HTMLInputElement>) => {
    if (e.currentTarget.value === radioValue) {
      setIsChecked(!isChecked);
    }
  };

  return (
    <Radio
      {...args}
      checked={isChecked}
      onChange={handleOnChange}
      onClick={handleOnclick}
    />
  );
};

Default.args = {
  checked: false,
  radioInfo: { name: "default_name", value: "deafult_value1" },
  children: "label",
};
