import React from "react";
import { Decorator, Meta, StoryFn } from "@storybook/react";
import { Button, Icon, Menu, ThemeProviderWithStyledEngine } from "../index";

const menuPlacementOptions = [
  "top",
  "top-start",
  "top-end",
  "bottom",
  "bottom-start",
  "bottom-end",
];

const decorator: Decorator<unknown> = (Story) => (
  <ThemeProviderWithStyledEngine>{Story()}</ThemeProviderWithStyledEngine>
);

const meta = {
  title: "Components/Navigation/Menu",
  component: Menu,
  decorators: [decorator],
  argTypes: {
    placement: {
      table: {
        type: null,
      },
      options: menuPlacementOptions,
      description: menuPlacementOptions.map((o) => `\`"${o}"\``).join(", "),
      control: "select",
    },
  },
} satisfies Meta<typeof Menu>;

export default meta;

const Template: StoryFn<typeof Menu> = ({ placement, spacing }) => {
  const [anchorEl, setAnchorEl] = React.useState<null | HTMLElement>(null);
  const [checked, setChecked] = React.useState(false);

  return (
    <>
      <Button onClick={(e) => setAnchorEl(e.currentTarget)}>Click Here</Button>
      <Menu
        anchorEl={anchorEl}
        onClose={() => setAnchorEl(null)}
        placement={placement}
        spacing={spacing}
      >
        <Menu.Item leftIcon="square-and-pencil" rightIcon="square-and-pencil">
          Icon Both side
        </Menu.Item>
        <Menu.Item rightIcon="trash">Icon Right Side</Menu.Item>
        <Menu.Item
          rightIcon={
            <Icon size="20" weight="bold" color="success" name="checkmark" />
          }
        >
          Custom Icon Right Side
        </Menu.Item>
        <Menu.CheckboxItem
          checked={checked}
          onChange={() => setChecked((val) => !val)}
        >
          Checkbox
        </Menu.CheckboxItem>
        <Menu.Item
          leftIcon="archive"
          color="action"
          onClick={() => alert("clicked")}
        >
          Action item
        </Menu.Item>
        <Menu.Item leftIcon="duplicate" disabled>
          Disabled
        </Menu.Item>
        <Menu.Divider />
        <Menu.Item leftIcon="trash" color="danger">
          Delete
        </Menu.Item>
      </Menu>
    </>
  );
};

export const Default: StoryFn<typeof Menu> = Template.bind({});
Default.args = {};
