import { Story, Meta } from "@storybook/react";
import React from "react";
import { StoryLayout } from "../../../../.storybook/StoryComponents";

import { Select } from "../Select";
import { SelectProps } from "../types";
import { SelectDocs } from "./SelectDocs";

const { Option } = Select;

export default {
  title: "Atoms/Select",
  parameters: {
    docs: {
      page: SelectDocs,
    },
  },
  component: Select,
} as Meta;

export const Default: Story<SelectProps> = args => {
  const opts = [
    { label: "first option", value: 1 },
    { label: "second option", value: 2 },
    { label: "third option", value: 3 },
  ];

  return (
    <StoryLayout>
      <Select
        style={{ width: "100%" }}
        defaultValue={opts[0]}
        options={opts}
        {...args}
      />
    </StoryLayout>
  );
};

Default.args = {
  year: "2022",
};

Default.argTypes = {
  year: {
    options: ["2020", "2022"],
    control: { type: "select" },
  },
  disabled: {
    options: [true, false],
    control: { type: "radio" },
  },
  status: {
    defaultValue: "",
    options: ["error", ""],
    control: {
      type: "select",
    },
  },
};

const children: any[] = [];
for (let i = 0; i < 5; i++) {
  children.push(<Option key={i.toString(36) + i}>{i.toString(36) + i}</Option>);
}

export const WithMultiple: Story<SelectProps> = args => {
  return (
    <StoryLayout>
      <Select
        mode="multiple"
        placeholder="Select Item..."
        defaultValue={children[3]}
        style={{ width: "100%" }}
        {...args}
      >
        {children}
      </Select>
    </StoryLayout>
  );
};

WithMultiple.args = {
  year: "2022",
};

WithMultiple.argTypes = {
  year: {
    options: ["2020", "2022"],
    control: { type: "select" },
  },
  disabled: {
    options: [true, false],
    control: { type: "radio" },
  },
  status: {
    defaultValue: "",
    options: ["error", ""],
    control: {
      type: "select",
    },
  },
};