import type { Meta, StoryObj } from "@storybook/react";
import type { CheckboxProps } from ".";
import { Checkbox } from ".";
import { excludeControls } from "../../utils";
import { StoryContainer } from "../../utils/StoryContainer";

type StoryType = StoryObj<typeof Checkbox>;

const meta: Meta<typeof Checkbox> = {
  title: "Forms/Checkbox",
  component: Checkbox,
  argTypes: {
    label: {
      control: { type: "text" },
    },
    ...excludeControls(
      "selected",
      "setSelected",
      "isRequired",
      "isReadOnly",
      "defaultSelected",
      "value",
      "groupDisabled",
      "validationState",
    ),
  },
  decorators: [
    Story => (
      <StoryContainer>
        <Story />
      </StoryContainer>
    ),
  ],
};

export const Default: StoryType = {
  render: (args: CheckboxProps) => <Checkbox {...args} />,
  args: {
    label: "I agree",
    value: "agree",
    isDisabled: false,
    errorMessage: "",
    defaultSelected: false,
    isRequired: false,
  },
};

export const Disabled: StoryType = {
  render: (args: CheckboxProps) => <Checkbox {...args} />,
  args: {
    label: "I agree",
    value: "agree",
    isDisabled: true,
    errorMessage: "",
    defaultSelected: false,
    isRequired: false,
  },
};

export const Valid: StoryType = {
  render: (args: CheckboxProps) => <Checkbox {...args} />,
  args: {
    label: "I agree",
    value: "agree",
    isDisabled: false,
    errorMessage: "",
    isInvalid: false,
    defaultSelected: false,
    isRequired: false,
  },
};

export const Invalid: StoryType = {
  render: (args: CheckboxProps) => <Checkbox {...args} />,
  args: {
    label: "I agree",
    value: "agree",
    isDisabled: false,
    isInvalid: true,
    errorMessage: "This is an error message",
    defaultSelected: false,
    isRequired: false,
  },
};

export const LongLabel: StoryType = {
  render: (args: CheckboxProps) => <Checkbox {...args} />,
  args: {
    label: (
      <>
        Example
        <br />
        of
        <br />
        long
        <br />
        label
        <br />
        text
        <br />
      </>
    ),
    value: "agree",
    isDisabled: false,
    errorMessage: "",
    defaultSelected: false,
    isRequired: false,
  },
};

export default meta;
