import type { Meta, StoryObj } from "@storybook/react";
import * as baseIcons from "@simplybusiness/icons";
import "@simplybusiness/icons/iconfont";
import { Icon } from "./Icon";
import { excludeControls } from "../../utils";
import type { IconProps } from "./types";
import { Text } from "../Text";
import { Link } from "../Link";

type StoryType = StoryObj<typeof Icon>;

const meta: Meta<typeof Icon> = {
  title: "Components/Icon",
  component: Icon,
  argTypes: {
    ...excludeControls("icon"),
  },
};

const defaultArgs = {
  spin: false,
  spinReverse: false,
  fixedWidth: false,
  size: "lg",
} as const;

const home = {
  iconName: "home",
  width: 576,
  height: 512,
  svgPathData:
    "M303.5 13.7L288 .5 272.5 13.7l-264 224 31.1 36.6L64 253.5V488v24H88 488h24V488 253.5l24.5 20.8 31.1-36.6-264-224zM464 212.8V464H112V212.8L288 63.5 464 212.8z",
  iconType: "fill",
  fill: "none",
} as const;

export const Default: StoryType = {
  render: (args: IconProps) => (
    <p>
      <Icon {...args} icon={home} />
    </p>
  ),
  args: {
    ...defaultArgs,
  },
};

export const Spinning: StoryType = {
  render: (args: IconProps) => (
    <p>
      <Icon {...args} icon={home} />
    </p>
  ),
  args: {
    ...defaultArgs,
    spin: true,
  },
};

const AllIconsComponent = () => (
  <>
    {Object.entries(baseIcons).map(([iconName, icon]) => (
      <div
        key={iconName}
        style={{
          backgroundColor: "#eee",
          padding: "10px",
          borderRadius: "5px",
          color: "var(--color-primary)",
        }}
      >
        <Icon size="lg" icon={icon} />
        <div
          style={{
            marginTop: "20px",
            overflow: "hidden",
            textOverflow: "ellipsis",
          }}
          title={iconName}
        >
          {iconName}
        </div>
      </div>
    ))}
  </>
);

export const AllIcons: StoryType = {
  render: () => (
    <>
      <Text>
        Use any icon below with the{" "}
        <Link href="./?path=/docs/components-icon--docs">Icon component</Link>
      </Text>
      <Text>
        Need an icon not listed here? See the{" "}
        <Link href="./?path=/docs/components-icon--docs">Adding New Icons</Link>{" "}
        section in the docs. For support, use{" "}
        <Link to="https://simplybusiness.slack.com/archives/C097XNG2D71">
          #platform-engineering
        </Link>{" "}
        and tag @fett.
      </Text>
      <div
        style={{
          display: "grid",
          gap: "16px",
          gridTemplateColumns: "repeat(auto-fill,minmax(150px,1fr))",
          textAlign: "center",
          fontFamily:
            'system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", sans-serif',
        }}
      >
        <AllIconsComponent />
      </div>
    </>
  ),
};

const IconFontComponent = () => (
  <>
    {Object.values(baseIcons).map(icon => (
      <div
        key={icon.iconName}
        style={{
          backgroundColor: "#eee",
          padding: "10px",
          borderRadius: "5px",
          color: "var(--color-primary)",
        }}
      >
        <i className={`icon-${icon.iconName}`} style={{ fontSize: "32px" }} />
        <div
          style={{
            marginTop: "20px",
            overflow: "hidden",
            textOverflow: "ellipsis",
          }}
          title={icon.iconName}
        >
          {icon.iconName}
        </div>
      </div>
    ))}
  </>
);

export const IconFont: StoryType = {
  render: () => (
    <>
      <Text elementType="h1">Mobius font icons</Text>
      <Text>
        Icon fonts are useful when you need icons in plain HTML/CSS without
        React components, such as in HAML pages or email templates.
      </Text>
      <Text>
        To use icon fonts, import the CSS and add the{" "}
        <code>icon-{"{name}"}</code> class to any element:
      </Text>
      <pre
        style={{
          backgroundColor: "#f5f5f5",
          padding: "16px",
          borderRadius: "4px",
          overflow: "auto",
          fontFamily: "monospace",
        }}
      >
        {`/* In your CSS file */
@import '@simplybusiness/icons/iconfont';

/* In your HTML */
<i class="icon-home"></i>
<span class="icon-check"></span>`}
      </pre>
      <Text elementType="h2">Available icon font classes</Text>
      <div
        style={{
          display: "grid",
          gap: "16px",
          gridTemplateColumns: "repeat(auto-fill,minmax(150px,1fr))",
          textAlign: "center",
          fontFamily:
            'system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", sans-serif',
        }}
      >
        <IconFontComponent />
      </div>
    </>
  ),
};

export default meta;
