import React, { FC } from "react";
import { Box } from "@mui/material";
import type { Decorator, Meta, StoryFn } from "@storybook/react";

import { ThemeProviderWithStyledEngine, Link, Icon } from "../index";
import type { TooltipProps } from "../components/tooltip/Tooltip";
import { LinkProps } from "../components/link/Link";
import icons from "../components/icon/icons";

const disabled = {
  table: {
    disable: true,
  },
};

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

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/Navigation/Link",
  component: Link as FC<LinkProps & AdditionalControls>,
  argTypes: {
    linkText: {
      name: "Link text",
      control: {
        type: "text",
      },
    },
    href: disabled,
    size: {
      control: {
        type: "radio",
      },
      options: ["16", "20", "24"],
    },
    tooltip: {
      name: "Tooltip text",
      control: {
        type: "text",
      },
    },
    tooltipPlacement: {
      name: "Tooltip placement",
      table: {
        type: null,
      },
      options: tooltipPlacementOptions,
      description: tooltipPlacementOptions.map((o) => `\`"${o}"\``).join(", "),
    },
    icon: {
      options: iconNames,
      name: "Icon name",
      control: {
        type: "select",
      },
      table: {
        type: null,
      },
    },
    tooltipSpacing: {
      name: "Tooltip spacing",
      table: {
        type: null,
      },
      control: "select",
      options: tooltipSpacingOptions,
    },
  },
  decorators: [decorator],
} satisfies Meta<FC<LinkProps & AdditionalControls>>;

export default meta;

interface AdditionalControls {
  tooltipPlacement: TooltipProps["placement"];
  tooltipSpacing: TooltipProps["spacing"];
  linkText: string;
  icon: keyof typeof icons;
}

const Template: StoryFn<FC<LinkProps & AdditionalControls>> = ({
  tooltipPlacement,
  tooltipSpacing,
  icon,
  linkText,
  ...args
}) => {
  return (
    <Box
      display="flex"
      flexDirection="column"
      alignItems="flex-start"
      gap="20px"
    >
      <Link
        {...args}
        tooltipProps={{ placement: tooltipPlacement, spacing: tooltipSpacing }}
      >
        {linkText}
      </Link>

      <Link
        {...args}
        tooltipProps={{ placement: tooltipPlacement, spacing: tooltipSpacing }}
      >
        <Icon name={icon} />
        {linkText}
      </Link>

      <Link
        {...args}
        tooltipProps={{ placement: tooltipPlacement, spacing: tooltipSpacing }}
      >
        {linkText}
        <Icon name={icon} />
      </Link>

      <Link
        {...args}
        tooltipProps={{ placement: tooltipPlacement, spacing: tooltipSpacing }}
      >
        Learn more
        <Link.Arrow />
      </Link>
    </Box>
  );
};

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

Default.args = {
  href: "https://www.oerwrite.nl/",
  linkText: "Test me",
  disabled: false,
  size: "20",
  tooltip: undefined,
  tooltipPlacement: "bottom",
  tooltipSpacing: "8",
  icon: "copy",
};
