import React, { useState } from "react";
import { ComponentStory, ComponentMeta } from "@storybook/react";

import { Radio } from "../ui-components/Radio";
import { RadioInfo } from "../ui-components/Radio/RadioInfo";
export default {
  title: "Form Fields/Radio",
  component: Radio,
} as ComponentMeta<typeof Radio>;

const Template: ComponentStory<typeof Radio> = (args) => {
  return <Radio {...args} />;
};

const InfoTemplate: ComponentStory<typeof Radio> = () => {
  const [checked, setChecked] = useState(false);

  const handleRadioChange = (e: { target: { value: boolean } }) => {
    console.log(`huydang: check >>> `, e);
    setChecked(!checked);
  };

  return (
    <>
      <RadioInfo />
      <Radio defaultChecked={false} name={"Default to off"} />
      <Radio checked={true} name={"Selected"} />
      <Radio disabled={true} name={"Disabled"} onChange={handleRadioChange} />
    </>
  );
};

export const RadioDetails = InfoTemplate.bind({});

export const NotSelected = Template.bind({});
NotSelected.args = {
  checked: false,
  name: "Not selected",
};
export const Selected = Template.bind({});
Selected.args = {
  checked: true,
  name: "Selected",
};
export const Disabled = Template.bind({});
Disabled.args = {
  disabled: true,
  name: "Disabled",
};
