import type { Meta, StoryObj } from '@storybook/react'
import { SvgPiSymbol, type SvgIcon } from '@chainlink/blocks-icons'
import { colorVariants } from '@chainlink/blocks-icons/src/icons/iconVariants'
import { Typography } from '../components'
import { tokens } from '../theme/tokens/tokens'
import { createSizeDecorator } from '../utils/decorators'

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<SvgIcon> = {
  title: 'Icons',
  component: SvgPiSymbol,
  decorators: [createSizeDecorator('M')],
  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<SvgIcon>

export const Default: Story = {
  args: {
    color: 'progress',
  },
}
export const Colors: Story = {
  render: (_args) => (
    <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: (_args) => (
    <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-[240px] 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={36}
                    height={36}
                  />
                  <div className="flex items-center justify-center gap-2">
                    <Typography variant="body-s">{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={36}
                    height={36}
                  />
                  <div className="flex items-center justify-center gap-2">
                    <Typography variant="body-s">{tokenValue.dark}</Typography>
                  </div>
                </div>
              </div>
            )}
          </div>
        )
      })}
    </div>
  ),
}