import React, { useState } from "react";
import { Decorator, Meta, StoryFn } from "@storybook/react";
import { Icon, ThemeProviderWithStyledEngine } from "../";
import type { IconProps } from "../components/icon/Icon";
import theme from "../theme/theme";
import icons from "../components/icon/icons";

const weightOptions = ["regular", "medium", "semibold", "bold"];
const colorOptions = [
  "current",
  "main",
  "secondary",
  "action",
  "success",
  "danger",
];

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

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

const meta = {
  title: "Components/Data Display/Icon",
  component: Icon,
  decorators: [decorator],
  argTypes: {
    weight: {
      options: weightOptions,
      description: weightOptions.map((o) => `\`"${o}"\``).join(", "),
      table: {
        type: null,
      },
    },
    color: {
      options: colorOptions,
      description: colorOptions.map((o) => `\`"${o}"\``).join(", "),
      table: {
        type: null,
      },
    },
    name: {
      options: iconNames,
      description: "Icon name",
      table: {
        type: null,
      },
    },
  },
} satisfies Meta<typeof Icon>;

export default meta;

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

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

Default.args = {
  weight: "regular",
  size: "40",
  color: "main",
  name: "antenna-on",
};

const AllIconsTemplate: StoryFn<typeof Icon> = () => {
  const [weight, setWeight] = useState<IconProps["weight"]>("regular");
  const [color, setColor] = useState<IconProps["color"]>("secondary");

  return (
    <>
      <div style={{ display: "flex", gap: "10px" }}>
        <select
          title="weight"
          value={weight}
          onChange={(e) => {
            setWeight(e.currentTarget.value as IconProps["weight"]);
          }}
        >
          <option value="regular">Regular</option>
          <option value="medium">Medium</option>
          <option value="semibold">Semibold</option>
          <option value="bold">Bold</option>
        </select>
        <select
          title="color"
          value={color}
          onChange={(e) => {
            setColor(e.currentTarget.value as IconProps["color"]);
          }}
        >
          <option value="main">Main</option>
          <option value="secondary">Secondary</option>
          <option value="action">Action</option>
          <option value="success">Success</option>
          <option value="danger">Danger</option>
        </select>
      </div>
      <div
        style={{
          display: "grid",
          gridTemplateColumns: "repeat(6, 1fr)",
          gap: "35px",
          marginTop: "10px",
        }}
      >
        {iconNames.map((icon) => (
          <div
            key={icon}
            style={{
              border: `1px solid ${theme.palette.N40}`,
              display: "flex",
              alignItems: "center",
              flexDirection: "column",
              textAlign: "center",
              padding: "10px 0px",
            }}
          >
            <Icon
              name={icon as IconProps["name"]}
              size="32"
              weight={weight}
              color={color}
            />
            <div
              style={{
                ...theme.typography.textStyles.R100,
                color: theme.palette.N70,
              }}
            >
              {icon}
            </div>
          </div>
        ))}
      </div>
    </>
  );
};
export const AllIcons: StoryFn<typeof Icon> = AllIconsTemplate.bind({});
