import type { Meta, StoryObj } from "@storybook/react";
import { StoryContainer } from "../../utils/StoryContainer";
import { Option } from "../Option";
import type { SelectProps } from "./Select";
import { Select } from "./Select";
import { excludeControls } from "../../utils";

type StoryType = StoryObj<typeof Select>;

const meta: Meta<typeof Select> = {
  title: "Forms/Select",
  component: Select,
  argTypes: {
    value: {
      control: { type: "select" },
      options: ["", "red", "blue", "green"],
    },
    ...excludeControls("validationState"),
  },
  decorators: [
    Story => (
      <StoryContainer>
        <Story />
      </StoryContainer>
    ),
  ],
};

export const Default: StoryType = {
  render: (args: SelectProps) => (
    <Select {...args}>
      <Option key="none" value="" isDisabled>
        Please select a color
      </Option>
      <Option key="red" value="red">
        Red
      </Option>
      <Option key="blue" value="blue">
        Blue
      </Option>
      <Option key="green" value="green">
        Green
      </Option>
    </Select>
  ),
  args: {
    name: "color",
    label: "Colors",
    defaultValue: "",
    errorMessage: "",
    isDisabled: false,
    isRequired: false,
  },
};

export const ControlledValue: StoryType = {
  render: (args: SelectProps) => (
    <Select {...args}>
      <Option key="none" value="" isDisabled>
        Please select a color
      </Option>
      <Option key="red" value="red">
        Red
      </Option>
      <Option key="blue" value="blue">
        Blue
      </Option>
      <Option key="green" value="green">
        Green
      </Option>
    </Select>
  ),
  args: {
    name: "color",
    label: "Colors",
    value: "green",
    errorMessage: "",
    defaultValue: "",
    isDisabled: false,
    isRequired: false,
  },
};

export const Disabled: StoryType = {
  render: (args: SelectProps) => (
    <Select {...args}>
      <Option key="none" value="" isDisabled>
        Please select a color
      </Option>
      <Option key="red" value="red">
        Red
      </Option>
      <Option key="blue" value="blue">
        Blue
      </Option>
      <Option key="green" value="green">
        Green
      </Option>
    </Select>
  ),
  args: {
    name: "color",
    label: "Colors",
    defaultValue: "green",
    errorMessage: "",
    isDisabled: true,
    isRequired: false,
  },
};

export const Valid: StoryType = {
  render: (args: SelectProps) => (
    <Select {...args}>
      <Option key="none" value="" isDisabled>
        Please select a color
      </Option>
      <Option key="red" value="red">
        Red
      </Option>
      <Option key="blue" value="blue">
        Blue
      </Option>
      <Option key="green" value="green">
        Green
      </Option>
    </Select>
  ),
  args: {
    name: "color",
    label: "Colors",
    defaultValue: "green",
    isInvalid: false,
    errorMessage: "",
    isDisabled: false,
    isRequired: false,
  },
};

export const Invalid: StoryType = {
  render: (args: SelectProps) => (
    <Select {...args}>
      <Option key="none" value="" isDisabled>
        Please select a color
      </Option>
      <Option key="red" value="red">
        Red
      </Option>
      <Option key="blue" value="blue">
        Blue
      </Option>
      <Option key="green" value="green">
        Green
      </Option>
    </Select>
  ),
  args: {
    name: "color",
    label: "Colors",
    defaultValue: "green",
    isInvalid: true,
    errorMessage: "Unacceptable color",
    isDisabled: false,
    isRequired: false,
  },
};

export default meta;
