import type { Meta, StoryObj } from '@storybook/react';
import { cx } from 'class-variance-authority';
import { useDarkMode } from 'storybook-dark-mode';

import rawColors from './colors.json';
import colorPairing from './color-pairing.json';
import colorDefaults from './color-defaults.json';
import type { Color, ColorName, Colors } from './types';

const meta: Meta = {
  title: 'Colors',
};

const colors: Colors = rawColors;

// The application for colors coming from Figma
const applications: {
  colorName: ColorName;
  shade: number; // Defaults to light mode
  application: string;
}[] = [
  {
    colorName: 'pink',
    shade: 300,
    application: 'pricelist-bg',
  },
  {
    colorName: 'pink',
    shade: 600,
    application: 'error',
  },
  {
    colorName: 'gray',
    shade: 50,
    application: 'bg-gray',
  },
  {
    colorName: 'gray',
    shade: 100,
    application: 'gutter',
  },
  {
    colorName: 'gray',
    shade: 500,
    application: 'label',
  },
  {
    colorName: 'gray',
    shade: 700,
    application: 'text, btn-text',
  },
  {
    colorName: 'purple',
    shade: 50,
    application: 'btn-bg',
  },
  {
    colorName: 'purple',
    shade: 700,
    application: 'pricelist-text',
  },
];

export default meta;

function ColorItem({ colorName, color }: { colorName: ColorName; color: Color }) {
  const shades = Object.keys(color);

  const isDark = useDarkMode();

  // @ts-expect-error
  const applicationsForMode = !isDark ? applications : applications.map(a => ({ ...a, shade: colorPairing[a.shade] }));

  return (
    <div>
      <h2 className="text-gray">{colorName}</h2>
      <div className="grid grid-cols-10">
        {shades.map(shade => {
          // @ts-expect-error
          const def = color[shade] as string;

          const applicatedAt = applicationsForMode.filter(a => a.colorName === colorName && a.shade == shade);
          const isDefault = colorDefaults[colorName] == shade;

          const textColor = parseInt(shade) > 400 ? '#fff' : `rgb(var(--c-color-${colorName}-900))`;

          return (
            <div>
              <div
                style={{ background: def, color: textColor }}
                className={cx('relative flex h-24 flex-1 items-center justify-center')}
              >
                {!isDefault ? null : (
                  <div
                    className="h-[8px] w-[8px] rounded"
                    style={{
                      backgroundColor: 'currentColor',
                    }}
                  />
                )}
                <div className="absolute top-2 left-2 right-2 text-center text-sm">{shade}</div>
              </div>
              <div className={cx('p-4 text-center text-sm text-gray')}>
                {applicatedAt.map(a => (
                  <div key={a.application}>{a.application}</div>
                ))}
              </div>
            </div>
          );
        })}
      </div>
    </div>
  );
}

const colorNames = Object.keys(colors) as ColorName[];

export const Default: StoryObj = {
  args: {},
  render: () => (
    <div>
      {colorNames.map(colorName => (
        <ColorItem key={colorName} colorName={colorName} color={colors[colorName]} />
      ))}
    </div>
  ),
};
