import React, { FC } from "react";
import { Decorator, Meta, StoryFn } from "@storybook/react";
import { IconButton, ThemeProviderWithStyledEngine } from "..";
import icons from "../components/icon/icons";
import type { IconButtonProps } from "../components/iconButton/IconButton";
import type { TooltipProps } from "../components/tooltip/Tooltip";

const iconNames = Object.keys(icons).sort();
const colorOptions = [
  "current",
  "main",
  "secondary",
  "action",
  "success",
  "danger",
];

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

const tooltipSpacingOptions: TooltipProps["spacing"][] = ["4", "6", "8", "12"];

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

const meta = {
  title: "Components/Inputs/IconButton",
  component: IconButton as FC<IconButtonProps & AdditionalControls>,
  decorators: [decorator],
  argTypes: {
    name: {
      options: iconNames,
      name: "Icon name",
      table: {
        type: null,
      },
    },
    size: {
      options: ["24", "28", "32"],
      control: "radio",
    },
    "aria-label": {
      name: "ARIA label",
      type: "string",
    },
    tooltip: {
      type: "string",
    },
    tooltipPlacement: {
      name: "Tooltip placement",
      table: {
        type: null,
      },
      options: tooltipPlacementOptions,
      description: tooltipPlacementOptions.map((o) => `\`"${o}"\``).join(", "),
    },
    tooltipSpacing: {
      name: "Tooltip spacing",
      table: {
        type: null,
      },
      control: "select",
      options: tooltipSpacingOptions,
    },
    color: {
      name: "Color options",
      options: colorOptions,
      description: colorOptions.map((o) => `\`"${o}"\``).join(", "),
      table: {
        type: null,
      },
    },
    disabled: {
      name: "Disabled",
      type: "boolean",
    },
  },
} satisfies Meta<FC<IconButtonProps & AdditionalControls>>;

export default meta;

interface AdditionalControls {
  tooltipPlacement: TooltipProps["placement"];
  tooltipSpacing: TooltipProps["spacing"];
}

const Template: StoryFn<FC<IconButtonProps & AdditionalControls>> = ({
  tooltipPlacement,
  tooltipSpacing,
  ...args
}) => (
  <IconButton
    {...args}
    toggled={args.toggled}
    onClick={() => {}}
    tooltipProps={{ placement: tooltipPlacement, spacing: tooltipSpacing }}
  />
);

export const Default: StoryFn<FC<IconButtonProps & AdditionalControls>> =
  Template.bind({});

Default.args = {
  disabled: false,
  name: "trash",
  size: "32",
  tooltip: "Tooltip",
  toggled: false,
  "aria-label": "Delete",
  tooltipPlacement: "bottom",
  tooltipSpacing: "8",
  color: "current",
};
