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

import colorDefaults from './color-defaults.json';
import colorPairing from './color-pairing.json';
import rawColors from './colors.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 style={{ color: 'rgb(var(--c-color-gray))' }}>{colorName}</h2>
      <div style={{ display: 'grid', gridTemplateColumns: 'repeat(10, minmax(0, 1fr))' }}>
        {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,
                  display: 'flex',
                  position: 'relative',
                  flex: '1 1 0%',
                  justifyContent: 'center',
                  alignItems: 'center',
                  height: '6rem',
                }}
              >
                {!isDefault ? null : (
                  <div
                    style={{
                      width: 8,
                      height: 8,
                      backgroundColor: 'currentColor',
                      borderRadius: '0.25rem',
                    }}
                  />
                )}
                <div
                  style={{
                    position: 'absolute',
                    top: '0.5rem',
                    right: '0.5rem',
                    left: '0.5rem',
                    fontSize: '0.875rem',
                    lineHeight: '1.25rem',
                    textAlign: 'center',
                  }}
                >
                  {shade}
                </div>
              </div>
              <div
                style={{
                  padding: '1rem',
                  fontSize: '0.875rem',
                  lineHeight: '1.25rem',
                  textAlign: 'center',
                  color: 'rgb(var(--c-color-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>
  ),
};
