import { useState } from "react";
import Checkbox, { CheckboxProps } from "./Checkbox";
import { Meta, StoryObj } from "@storybook/react";

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

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

export const Default: Story = (args: CheckboxProps) => {
  const [isChecked, setIsChecked] = useState<string>("");

  const handleOnChange = (e: React.ChangeEvent<HTMLInputElement>) => {
    setIsChecked(e.currentTarget.id);

    if (e.currentTarget.id === isChecked) setIsChecked("");
  };

  return (
    <Checkbox
      {...args}
      id="label"
      checked={"label" === isChecked}
      onChange={handleOnChange}
    />
  );
};

Default.args = {
  checked: false,
  children: "label",
};
