import React from "react";
import { Story, Meta } from "@storybook/react";
import { CheckboxChangeEvent } from "antd/lib/checkbox";
import { StoryLayout } from "../../../.storybook/StoryComponents";
import { Checkbox } from "./Checkbox";
import { CheckboxDocs } from "./CheckboxDocs";
import { TCheckboxProps } from "./types";

export default {
  title: "Atoms/Checkbox",
  parameters: {
    docs: {
      page: CheckboxDocs,
    },
  },
  component: Checkbox,
} as Meta;

export const Default: Story<TCheckboxProps> = args => {
  const onChange = (e: CheckboxChangeEvent) => {
    console.log(`checked = ${e.target.checked}`);
  };

  return (
    <StoryLayout>
      <Checkbox onChange={onChange} disabled={args.disabled}>
        {args.children}
      </Checkbox>
    </StoryLayout>
  );
};

Default.args = {
  disabled: false,
};

Default.argTypes = {
  disabled: {
    options: [true, false],
    control: { type: "radio" },
  },
  children: {
    defaultValue: "text",
    control: { type: "text" },
  },
};