/* eslint-disable max-lines-per-function */
import React from "react";
import { fontSizes, fontWeights, fonts, lineHeights, styled } from "../../theme";
import { commonProps } from "../../utils/storybook";
import { Text, typographyVariants } from ".";
import type { StoryObj, Meta } from "@storybook/react";

/**
 * The Typography System
 */
const meta: Meta<typeof Text> = {
  title: "Text",
  component: Text,
  tags: ["autodocs"],
  argTypes: {
    variant: {
      options: Object.keys(typographyVariants),
    },
    children: {
      type: "string",
      table: {
        type: { summary: "string" },
      },
    },
    ...commonProps,
  },
};
export default meta;
type Story = StoryObj<typeof Text>;

const Th: React.FC<{ children: React.ReactNode }> = ({ children }) => (
  <th style={{ padding: "15px 60px" }}>{children}</th>
);

const Tr: React.FC<{ children: React.ReactNode }> = ({ children }) => (
  <tr style={{ borderBottom: "1px black solid" }}>{children}</tr>
);

const Td: React.FC<{ children: React.ReactNode }> = ({ children }) => (
  <td style={{ padding: "15px 60px" }}>{children}</td>
);

export const Default: Story = {
  render: (args) => (
    <Text {...args} css={{ color: "$light-off-white" }}>
      I am some text
    </Text>
  ),
};

const StyledTable = styled("table", { borderCollapse: "collapse", color: "$light-off-white" });

export const CompleteTypography: Story = {
  render: () => (
    <StyledTable>
      <Tr>
        <Th>
          <Text>Variant</Text>
        </Th>
        <Th>
          <Text>Typestyle</Text>
        </Th>
        <Th>
          <Text>Font Family</Text>
        </Th>
        <Th>
          <Text>Weight</Text>
        </Th>
        <Th>
          <Text>Font Size</Text>
        </Th>
        <Th>
          <Text>Line Height</Text>
        </Th>
      </Tr>

      {Object.entries(typographyVariants).map(([textVariant, properties]) => {
        const variant = textVariant as React.ComponentProps<typeof Text>["variant"];
        const fontWeightName = (properties.fontWeight as string).slice(
          1
        ) as unknown as keyof typeof fontWeights;
        const fontWeight = fontWeights[fontWeightName];
        const fontSize =
          fontSizes[(properties.fontSize as string).slice(1) as unknown as keyof typeof fontSizes];
        const lineHeight =
          lineHeights[
            (properties.lineHeight as string).slice(1) as unknown as keyof typeof lineHeights
          ];

        return (
          <Tr key={String(variant)}>
            <Td>
              <Text variant={variant}>{variant?.toString()}</Text>
            </Td>
            <Td>
              <Text variant={variant}>{`font-size-${fontSize}-${fontWeight}`}</Text>
            </Td>
            <Td>
              <Text>
                {fonts[(properties.fontFamily as string).slice(1) as unknown as keyof typeof fonts]}
              </Text>
            </Td>
            <Td>
              <Text
                css={{ fontWeight: properties.fontWeight }}
              >{`${fontWeightName}/${fontWeight}`}</Text>
            </Td>
            <Td>
              <Text>{fontSize}</Text>
            </Td>
            <Td>
              <Text>{lineHeight}</Text>
            </Td>
          </Tr>
        );
      })}
    </StyledTable>
  ),
};