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

type StoryType = StoryObj<typeof CheckboxGroup>;

const meta: Meta<typeof CheckboxGroup> = {
  title: "Forms/CheckboxGroup",
  component: CheckboxGroup,
  argTypes: {
    ...excludeControls(
      "isRequired",
      "isReadOnly",
      "defaultValue",
      "value",
      "validationState",
    ),
  },
  decorators: [
    Story => (
      <StoryContainer>
        <Story />
      </StoryContainer>
    ),
  ],
};

export const Default: StoryType = {
  render: (args: CheckboxGroupProps) => (
    <CheckboxGroup {...args}>
      <Checkbox label="Option 1" value="option1" />
      <Checkbox label="Option 2" value="option2" />
      <Checkbox label="Option 3" value="option3" />
    </CheckboxGroup>
  ),
  args: {
    label: "Value",
    errorMessage: "",
    isDisabled: false,
    orientation: "vertical",
    defaultValue: ["option1", "option3"],
    isRequired: false,
  },
};

export const Horizontal: StoryType = {
  render: (args: CheckboxGroupProps) => (
    <CheckboxGroup {...args}>
      <Checkbox label="Option 1" value="option1" />
      <Checkbox label="Option 2" value="option2" />
      <Checkbox label="Option 3" value="option3" />
      <Checkbox label="Option 4" value="option4" />
    </CheckboxGroup>
  ),
  args: {
    label: "Value",
    errorMessage: "",
    isDisabled: false,
    orientation: "horizontal",
    defaultValue: ["option2", "option4"],
    isRequired: false,
    itemsPerRow: 2,
  },
};

export const Disabled: StoryType = {
  render: (args: CheckboxGroupProps) => (
    <CheckboxGroup {...args}>
      <Checkbox label="Option 1" value="option1" />
      <Checkbox label="Option 2" value="option2" />
      <Checkbox label="Option 3" value="option3" />
    </CheckboxGroup>
  ),
  args: {
    label: "Value",
    errorMessage: "",
    isDisabled: true,
    orientation: "vertical",
    isRequired: false,
  },
};

export const Valid: StoryType = {
  render: (args: CheckboxGroupProps) => (
    <CheckboxGroup {...args}>
      <Checkbox label="Option 1" value="option1" />
      <Checkbox label="Option 2" value="option2" />
      <Checkbox label="Option 3" value="option3" />
    </CheckboxGroup>
  ),
  args: {
    label: "Value",
    errorMessage: "",
    isDisabled: false,
    isInvalid: false,
    orientation: "vertical",
    isRequired: false,
  },
};

export const Invalid: StoryType = {
  render: (args: CheckboxGroupProps) => (
    <CheckboxGroup {...args}>
      <Checkbox label="Option 1" value="option1" />
      <Checkbox label="Option 2" value="option2" />
      <Checkbox label="Option 3" value="option3" />
    </CheckboxGroup>
  ),
  args: {
    label: "Value",
    errorMessage: "This field is required",
    isDisabled: false,
    isInvalid: true,
    orientation: "vertical",
    isRequired: false,
  },
};

export const LastItemDisables: StoryType = {
  render: (args: CheckboxGroupProps) => (
    <CheckboxGroup {...args}>
      <Checkbox label="Option 1" value="option1" />
      <Checkbox label="Option 2" value="option2" />
      <Checkbox label="Option 3" value="option3" />
      <Checkbox label="None" value="none" />
    </CheckboxGroup>
  ),
  args: {
    label: "Value",
    lastItemDisables: true,
  },
};

export default meta;
