import { Story, Meta } from "@storybook/react";

import CheckBox, { CheckBoxProps } from "./CheckBox";
import Block from "../Block/Block";

export default {
  title: "Component/Atoms/CheckBox",
  component: CheckBox,
  parameters: {
    component: CheckBox,
    previewTabs: {
      canvas: {
        hidden: true,
      },
    },
    viewMode: "docs",
  },
} as Meta;

interface ExampleProps {
  children?: React.ReactNode;
  classes: string;
}

const Template: Story<CheckBoxProps> = (args) => (
  <CheckBox {...args}></CheckBox>
);

const Example: Story<ExampleProps> = (args) => {
  const classes = args.classes;
  return classes ? (
    <Block className={args.classes}>{args.children}</Block>
  ) : (
    <>{args.children}</>
  );
};

export const Properties = Template.bind({});
Properties.args = {};

export const Types = Example.bind({});
Types.args = {
  children: (
    <Block className="grid grid-cols-4 grid-rows-2 gap-4 ">
      <CheckBox />
      <CheckBox variation="default" />
      <CheckBox variation="primary" />
      <CheckBox variation="secondary" />

      <CheckBox checked />
      <CheckBox checked variation="default" />
      <CheckBox checked variation="primary" />
      <CheckBox checked variation="secondary" />
    </Block>
  ),
  classes: "h-64 flex justify-center items-center w-full",
};

export const StyledCheckBox = Example.bind({});
StyledCheckBox.args = {
  children: (
    <Block className="flex items-center justify-center h-64 space-x-6">
      <CheckBox checked className="text-red-600 "></CheckBox>
      <CheckBox checked className="text-green-600 "></CheckBox>
      <CheckBox checked className="text-blue-600 "></CheckBox>
      <CheckBox checked className="text-purple-600 "></CheckBox>
      <CheckBox checked className="text-yellow-600 "></CheckBox>
      <CheckBox checked className="text-orange-600 "></CheckBox>
    </Block>
  ),
};
