import { Table } from '../../index.style';
import { Palette } from '../Palette';
import * as React from 'react';
import getColour from '@lendi-ui/commons/colours';
import { scales as interactionScales } from '../../../tokens/types/semantic/interaction';
import { scales as textScales } from '../../../tokens/types/semantic/text';
import { scales as backgroundScales } from '../../../tokens/types/semantic/background';
import { scales as fillScales } from '../../../tokens/types/semantic/fill';
import { states as borderStates } from '../../../tokens/types/semantic/border';

export const SemanticTable = () => (
  <Table>
    <tr>
      <th>Category</th>
      <th>Scale</th>
      <th>Value</th>
      <th>Usages</th>
    </tr>
    <tr>
      <td rowSpan={interactionScales.length + 1}>
        <strong>Interaction</strong>
      </td>
    </tr>
    {interactionScales.map((scale) => {
      return (
        <tr key={scale}>
          <td>
            <pre>{scale}</pre>
          </td>
          <td>
            <Palette color={getColour('interaction', scale)} />
          </td>
          <td>
            <p>TODO</p>
          </td>
        </tr>
      );
    })}
    <tr>
      <td rowSpan={textScales.length + 1}>
        <strong>Text</strong>
      </td>
    </tr>
    {textScales.map((scale, index) => {
      return (
        <tr key={index}>
          <td>
            <pre>{scale}</pre>
          </td>
          <td>
            <Palette color={getColour('text', scale)} />
          </td>
          <td>
            <p>TODO</p>
          </td>
        </tr>
      );
    })}
    <tr>
      <td rowSpan={backgroundScales.length + 1}>
        <strong>Background</strong>
      </td>
    </tr>
    {backgroundScales.map((scale, index) => {
      return (
        <tr key={index}>
          <td>
            <pre>{scale}</pre>
          </td>
          <td>
            <Palette color={getColour('background', scale)} />
          </td>
          <td>
            <p>TODO</p>
          </td>
        </tr>
      );
    })}
    <tr>
      <td rowSpan={fillScales.length + 1}>
        <strong>Fill</strong>
      </td>
    </tr>
    {fillScales.map((scale, index) => {
      return (
        <tr key={index}>
          <td>
            <pre>{scale}</pre>
          </td>
          <td>
            <Palette color={getColour('fill', scale)} />
          </td>
          <td>
            <p>TODO</p>
          </td>
        </tr>
      );
    })}
    <tr>
      <td rowSpan={borderStates.length + 6}>
        <strong>Border</strong>
      </td>
    </tr>
    <tr>
      <td>
        <pre>container</pre>
      </td>
      <td>
        <Palette color={getColour('border', 'container')} />
      </td>
      <td>
        <p>TODO</p>
      </td>
    </tr>
    <tr>
      <td>
        <pre>divider</pre>
      </td>
      <td>
        <Palette color={getColour('border', 'divider')} />
      </td>
      <td>
        <p>TODO</p>
      </td>
    </tr>
    <tr>
      <td>
        <pre>dividerEmphasis</pre>
      </td>
      <td>
        <Palette color={getColour('border', 'dividerEmphasis')} />
      </td>
      <td>
        <p>TODO</p>
      </td>
    </tr>
    <tr>
      <td>
        <pre>interaction (state: default)</pre>
      </td>
      <td>
        <Palette color={getColour('border', 'interaction', { state: 'default' })} />
      </td>
      <td>
        <p>TODO</p>
      </td>
    </tr>
    {borderStates.map((state, index) => (
      <tr key={index}>
        <td>
          <pre>interaction (state: {state})</pre>
        </td>
        <td>
          <Palette color={getColour('border', 'interaction', { state: state })} />
        </td>
        <td>
          <p>TODO</p>
        </td>
      </tr>
    ))}
  </Table>
);