import React from "react";
import { Decorator, Meta, StoryFn } from "@storybook/react";
import { Tooltip, ThemeProviderWithStyledEngine, Typography } from "../";
import icons from "../components/icon/icons";

const iconNames = Object.keys(icons).sort();

const tooltipPlacementOptions = [
  "top",
  "top-start",
  "top-end",
  "right",
  "right-start",
  "right-end",
  "bottom",
  "bottom-start",
  "bottom-end",
  "left",
  "left-start",
  "left-end",
];

const decorator: Decorator<unknown> = (Story) => (
  <ThemeProviderWithStyledEngine>
    <div
      style={{
        height: "12em",
        display: "flex",
        alignItems: "center",
        justifyContent: "center",
      }}
    >
      {Story()}
    </div>
  </ThemeProviderWithStyledEngine>
);

const meta = {
  title: "Components/Data Display/Tooltip",
  component: Tooltip,
  decorators: [decorator],
  argTypes: {
    children: {
      table: {
        disable: true,
      },
    },
    placement: {
      type: "string",
      control: {
        type: "select",
        options: tooltipPlacementOptions,
      },
      description: tooltipPlacementOptions.map((o) => `\`"${o}"\``).join(", "),
    },
    tooltip: {
      type: "string",
    },
    shortcutText: {
      name: "Shortcut text",
      type: "string",
    },
    shortcutIcons: {
      name: "Shortcut icons",
      control: "multi-select",
      options: iconNames,
    },
  },
} satisfies Meta<typeof Tooltip>;

export default meta;

const Template: StoryFn<typeof Tooltip> = (args) => (
  <Tooltip {...args}>
    <Typography>{args.children}</Typography>
  </Tooltip>
);

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

Default.args = {
  children: <span tabIndex={0}>Hover or tab here to see tooltip</span>,
  placement: "bottom",
  tooltip: "Tooltip",
  secondaryTooltip: "Secondary",
  tertiaryTooltip: "Tertiary",
};
