import React from "react";
import { Box } from "@mui/material";
import { Decorator, Meta, StoryFn } from "@storybook/react";

import { ThemeProviderWithStyledEngine, Checkbox } from "..";

const decorator: Decorator<unknown> = (Story) => (
  <ThemeProviderWithStyledEngine>{Story()}</ThemeProviderWithStyledEngine>
);

const meta = {
  title: "Components/Inputs/Checkbox",
  component: Checkbox,
  decorators: [decorator],
} satisfies Meta<typeof Checkbox>;

export default meta;

const name = "checkbox-group";

const Template: StoryFn<typeof Checkbox> = () => {
  return (
    <Box display="flex" flexDirection="column" alignItems="flex-start">
      <Checkbox name={name} value="a" label="Click me to switch on!" />
      <Checkbox
        name={name}
        defaultChecked
        value="b"
        label="Click me to switch off!"
      />
      <Checkbox
        name={name}
        disabled
        value="c"
        label="Clicking me won't change anything"
      />
      <Checkbox
        name={name}
        disabled
        checked
        value="c"
        label="Clicking me won't change anything either"
      />
      <Checkbox
        name={name}
        indeterminate
        defaultChecked
        value="e"
        label="Indeterminate"
      />
      <Checkbox
        name={name}
        indeterminate
        disabled
        value="f"
        label="Disabled indeterminate"
      />
    </Box>
  );
};

export const Default: StoryFn<typeof Checkbox> = Template.bind({});

Default.args = {};
