import type { Meta, StoryObj } from '@storybook/react'
import { colorVariants, Typography } from '../components/Typography'
import { tokens } from '../theme/tokens/tokens'
import { createSizeDecorator } from '../utils/decorators'
import * as ArrowsIcons from './library/Arrows'
import * as CommerceIcons from './library/Commerce'
import * as EntertainmentIcons from './library/Entertainment'
import * as InterfaceIcons from './library/Interface'
import { SvgPiSymbol } from './library/Interface'
import * as LivingIcons from './library/Living'
import * as MailIcons from './library/Mail'
import * as TechnologyIcons from './library/Technology'
import * as TravelIcons from './library/Travel'

const colorVariantsKeys = Object.keys(colorVariants)

const findTokenValue = (tokenName: string) => {
  for (const category of Object.values(tokens)) {
    if (category[tokenName]) {
      return {
        light: category[tokenName].light.replace('var(--', '').replace(')', ''),
        dark: category[tokenName].dark.replace('var(--', '').replace(')', ''),
      }
    }
  }
  return null
}

const meta: Meta<typeof SvgPiSymbol> = {
  title: 'Icons/Legacy',
  component: SvgPiSymbol,
  decorators: [createSizeDecorator('XL')],
  argTypes: {
    color: {
      description:
        'Allows you to set the icon color. The values for this prop correspond to blocks design system tokens. <br />Available colors:',
      control: {
        type: 'select',
        labels: colorVariantsKeys,
      },
      value: 'foreground',
      options: colorVariantsKeys,
      table: {
        type: { summary: colorVariantsKeys.join(' | ') },
        defaultValue: { summary: 'foreground' },
      },
    },
  },
} satisfies Meta

export default meta

type Story = StoryObj<typeof SvgPiSymbol>

export const Default: Story = {
  args: {
    color: 'progress',
  },
}

export const Colors: Story = {
  render: () => (
    <div className="flex w-fit flex-col gap-1 bg-background p-4">
      <div className="flex gap-1 bg-background p-4">
        <SvgPiSymbol color="foreground" />
        <SvgPiSymbol color="link" />
        <SvgPiSymbol color="brand" />
        <SvgPiSymbol color="muted" />
        <SvgPiSymbol color="muted-more" />
        <SvgPiSymbol color="success" />
        <SvgPiSymbol color="error" />
        <SvgPiSymbol color="warning" />
        <SvgPiSymbol color="progress" />
      </div>
      <div className="dark flex gap-1 bg-background p-4">
        <SvgPiSymbol color="foreground" />
        <SvgPiSymbol color="link" />
        <SvgPiSymbol color="brand" />
        <SvgPiSymbol color="muted" />
        <SvgPiSymbol color="muted-more" />
        <SvgPiSymbol color="success" />
        <SvgPiSymbol color="error" />
        <SvgPiSymbol color="warning" />
        <SvgPiSymbol color="progress" />
      </div>
    </div>
  ),
}

Colors.parameters = {
  themes: {
    defaultTheme: 'light',
    disable: true,
  },
}

export const AllColors: Story = {
  render: () => (
    <div className="flex flex-col gap-8 bg-background p-8">
      {Object.entries(colorVariants).map(([key, value]) => {
        const tokenName = value.replace('text-', '')
        const tokenValue = findTokenValue(tokenName)
        if (!tokenValue) {
          return null
        }
        return (
          <div key={key} className="flex flex-col gap-1">
            <Typography variant="h4" color="foreground">
              {key}
            </Typography>
            <Typography variant="body" color="muted">
              --{tokenName}
            </Typography>
            {tokenValue && (
              <div className="grid max-w-[300px] grid-cols-2 gap-8">
                <div className="flex flex-col items-center justify-center gap-4 rounded-lg bg-muted p-4">
                  <SvgPiSymbol
                    color={key as keyof typeof colorVariants}
                    width={48}
                    height={48}
                  />
                  <div className="flex items-center justify-center gap-2">
                    <Typography variant="body">{tokenValue.light}</Typography>
                  </div>
                </div>

                <div className="dark flex flex-col items-center justify-center gap-4 rounded-lg bg-muted p-4">
                  <SvgPiSymbol
                    color={key as keyof typeof colorVariants}
                    width={48}
                    height={48}
                  />
                  <div className="flex items-center justify-center gap-2">
                    <Typography variant="body">{tokenValue.dark}</Typography>
                  </div>
                </div>
              </div>
            )}
          </div>
        )
      })}
    </div>
  ),
}

interface CategoryProps {
  icons: Record<string, typeof SvgPiSymbol>
}

const Category = ({ icons }: CategoryProps) => {
  return (
    <div className="grid max-w-[300px] grid-cols-1 gap-1 bg-background p-4 md:max-w-[600px] md:grid-cols-2">
      {Object.entries(icons).map(([name, Icon]) => (
        <div key={name} className="flex items-center gap-1">
          <Icon width={16} height={16} />
          <Typography className="text-wrap" variant="body-xs">
            {name}
          </Typography>
        </div>
      ))}
    </div>
  )
}

export const Arrows: Story = {
  render: () => <Category icons={ArrowsIcons} />,
}

export const Commerce: Story = {
  render: () => <Category icons={CommerceIcons} />,
}

export const Entertainment: Story = {
  render: () => <Category icons={EntertainmentIcons} />,
}

export const Interface: Story = {
  render: () => <Category icons={InterfaceIcons} />,
}

export const Living: Story = {
  render: () => <Category icons={LivingIcons} />,
}

export const Mail: Story = {
  render: () => <Category icons={MailIcons} />,
}

export const Technology: Story = {
  render: () => <Category icons={TechnologyIcons} />,
}

export const Travel: Story = {
  render: () => <Category icons={TravelIcons} />,
}