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

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

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

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

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

  return (
    <>
      <RadioInfo />
      <RooRadio defaultChecked={false} name={"Default to off"} />
      <RooRadio checked={true} name={"Selected"} />
      <RooRadio 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",
};
