import { Story, Meta } from "@storybook/react";

import { Option } from "../../elements/Select/Select";

import { SideBar, Block, Button, Select, Text, Input, style } from "../../../";

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

export default {
  title: "Component/Compounds/Sidebar",
  component: SideBar,
  parameters: {
    component: SideBar,
    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) => <SideBar {...args}></SideBar>;

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: (
    <Block className="relative flex w-full">
      <SideBar className="max-w-md">
        <Button className={style.sideBar.menuItem.root}>Menu item</Button>
        <Button className={style.sideBar.menuItem.root}>Menu item</Button>
        <Button
          className={
            style.sideBar.menuItem.root + style.sideBar.menuItem.selected
          }
        >
          Menu item
        </Button>
        <Button className={style.sideBar.menuItem.root}>Menu item</Button>
        <Button className={style.sideBar.menuItem.root}>Menu item</Button>
        <Block className="px-8 mt-8">
          <Text className="pb-2 text-sm">Search ...</Text>
          <Input variation="default" placeholder="Input key words ..." />
          <Text className="pb-2 mt-6 text-sm">Select a color</Text>
          <Select variation="default" value={options[0]} options={options} />
        </Block>
        <Block className="flex items-end flex-auto mt-10">
          <Button className="justify-center flex-auto py-3" variation="primary">
            Save
          </Button>
          <Button
            className="justify-center flex-auto py-3"
            variation="secondary"
          >
            Cancel
          </Button>
        </Block>
      </SideBar>
      <Block className="flex-auto h-screen px-12 py-8 text-white bg-gray-700">
        Content
      </Block>
    </Block>
  ),
  classes: "flex items-start w-full h-screen",
};
