import { Story, Meta } from "@storybook/react";
import { Option } from "../../elements/Select/Select";

import Select from "./InputSelect";
import Block from "../../atoms/Block";

import { DotMark16 } from "@carbon/icons-react";

export default {
  title: "Component/Atoms/InputSelect",
  component: Select,
  parameters: {
    component: Select,
    previewTabs: {
      canvas: {
        hidden: true,
      },
    },
    viewMode: "docs",
  },
} as Meta;

interface ExampleProps {
  children?: React.ReactNode;
  classes: string;
}

const options: Option[] | string[] = [
  {
    value: "yellow",
    label: "Yellow",
    icon: <DotMark16 className="text-yellow-700" />,
  },
  {
    value: "blue",
    label: "Blue",
    icon: <DotMark16 className="text-blue-700" />,
  },
  {
    value: "green",
    label: "Green",
    icon: <DotMark16 className="text-green-700" />,
  },
  {
    value: "pink",
    label: "Pink",
    icon: <DotMark16 className="text-pink-700" />,
  },
  {
    value: "purple",
    label: "Purple",
    icon: <DotMark16 className="text-purple-700" />,
  },
  {
    value: "orange",
    label: "Orange",
    icon: <DotMark16 className="text-orange-700" />,
  },
  {
    value: "gray",
    label: "Gray",
    icon: <DotMark16 className="text-gray-700" />,
  },
  {
    value: "indigo",
    label: "Indigo",
    icon: <DotMark16 className="text-yellow-700" />,
  },
  {
    value: "white",
    label: "White",
    icon: <DotMark16 className="text-white" />,
  },
  {
    value: "magenta",
    label: "Magenta",
    icon: <DotMark16 className="text-pink-700" />,
  },
];

const Template: Story = (args) => (
  <Select {...args} value={options[0].value} options={options}></Select>
);

const Example: Story<ExampleProps> = (args) => {
  const classes = args.classes;
  return classes ? (
    <Block className={args.classes}>{args.children}</Block>
  ) : (
    <>{args.children}</>
  );
};

export const Properties = Template.bind({});
Properties.args = {};

export const Types = Example.bind({});
Types.args = {
  children: (
    <>
      <Select value={options[0].value} options={options}></Select>
      <Select
        variation="default"
        value={options[0].value}
        options={options}
      ></Select>
      <Select
        variation="primary"
        value={options[0].value}
        options={options}
      ></Select>
      <Select
        variation="secondary"
        value={options[0].value}
        options={options}
      ></Select>
    </>
  ),
  classes: "flex items-start w-full h-64 space-x-6",
};

export const MultipleSelect = Example.bind({});
MultipleSelect.args = {
  children: (
    <Block className="w-full max-w-sm space-y-6">
      <Select
        multiple
        value={[
          options[0].value,
          options[1].value,
          options[2].value,
          options[3].value,
          options[4].value,
        ]}
        options={options}
      ></Select>
      <Select
        multiple
        variation="default"
        value={[
          options[0].value,
          options[1].value,
          options[2].value,
          options[3].value,
          options[4].value,
        ]}
        options={options}
      ></Select>
      <Select
        multiple
        variation="primary"
        value={[
          options[0].value,
          options[1].value,
          options[2].value,
          options[3].value,
          options[4].value,
        ]}
        options={options}
      ></Select>
      <Select
        multiple
        variation="secondary"
        value={[
          options[0].value,
          options[1].value,
          options[2].value,
          options[3].value,
          options[4].value,
        ]}
        options={options}
      ></Select>
    </Block>
  ),
  classes: "flex items-start flex-col w-full h-[640px] space-y-6",
};
