import { Table } from '../../index.style';
import { ColorPalette } from '../../../tokens';
import { Palette } from '../Palette';
import { Contrast } from '../Contrast';
import * as React from 'react';
import getColour from '@lendi-ui/commons/colours';
import { DesignToken } from 'style-dictionary';

export const ColorPaletteTable = ({ colorPalette }: { colorPalette: ColorPalette<DesignToken> }) => {
  const categories = Object.keys(colorPalette);

  console.log('colorPalette ', colorPalette);
  return (
    <Table>
      <tr>
        <th>Category</th>
        <th>Transparency</th>
        <th>Value</th>
        <th>
          <a href={'https://www.npmjs.com/package/wcag-color#score-and-ratio'} target={'_blank'} rel="noreferrer">
            WCAG
          </a>
        </th>
      </tr>
      {categories.map((category, index) => {
        const transparencies = Object.keys(colorPalette[category]);
        return (
          <>
            <tr key={`${category}-${index}`}>
              <td rowSpan={transparencies.length + 1}>{category}</td>
            </tr>
            {transparencies.map((transparency, i) => (
              <tr key={`${transparency}-${i}`}>
                <td>{transparency}</td>
                <td>
                  <Palette color={getColour(category, transparency) || 'N/A'} />
                </td>
                {category === 'transparent' ? (
                  <td>transparent</td>
                ) : (
                  <>
                    {Number(transparency) >= 300 ? (
                      <Contrast foreground={'#ffffff'} background={getColour(category, transparency) || '#000'} />
                    ) : (
                      <Contrast
                        foreground={getColour(category, 700) || '#000'}
                        background={getColour(category, transparency) || '#FFF'}
                      />
                    )}
                  </>
                )}
              </tr>
            ))}
          </>
        );
      })}
    </Table>
  );
};