import * as React from 'react';
import getColour from '@lendi-ui/commons/colours';
import { getThemeName, ThemeNames } from '../../utils';
import { color } from '../tokens';
import styled from 'styled-components';
import Error from '@lendi-ui/icon/Error';
import { ColorPaletteTable } from './components/PaletteTable';
import { SemanticTable } from './components/SemanticTable';

export const SemanticColours = () => {
  return <SemanticTable />;
};

export const CommonColor = () => {
  return <ColorPaletteTable colorPalette={color.common.base} />;
};

export const ThemedBaseColor = () => {
  const themeName = getThemeName();
  switch (themeName) {
    case ThemeNames.Lendi:
      return <ColorPaletteTable colorPalette={color.lendi.base} />;
    case ThemeNames.LendiNext:
      return <ColorPaletteTable colorPalette={color.lendiNext.base} />;
    case ThemeNames.Domain:
      return <ColorPaletteTable colorPalette={color.domain.base} />;
    case ThemeNames.Aussie:
      return <ColorPaletteTable colorPalette={color.aussie.base} />;
  }
};

export const UsageWithReact = () => {
  const linkColor = getColour('interaction', 'main');

  return (
    <a style={{ color: linkColor }} href={'https://lendi.style'}>
      Welcome to LUI!
    </a>
  );
};

export const UsageWithStyledComponent = () => {
  const Link = styled.a`
    color: ${getColour('interaction', 'main')};
  `;

  return <Link href={'https://lendi.style'}>Welcome to LUI!</Link>;
};

export const UsageWithIcon = () => {
  const errorColour = getColour('interaction', 'error');

  return (
    <a href={'https://lendi.style'} style={{ color: errorColour }}>
      <Error color={errorColour} width={'20px'} height={'20px'} /> Error Message (Interactive)
    </a>
  );
};