// @flow
import React, { useContext } from 'react';
import styled, { ThemeContext } from 'styled-components';
import { map } from 'lodash';
import { Span, Text } from '../../..';

const SwatchSection = styled.div`
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-start;
`;

const Swatch = ({ name, foreground, background }: ColourPaletteSwatchProps) => {
  const ColourPaletteSwatchBackground = styled.div`
    background-color: ${background};
    height: 120px;
    width: 200px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    margin: 0 16px 16px 0;
  `;

  const ColourPaletteSwatchText = styled(Text)`
    text-align: center;
    color: ${foreground};
    padding: 12px 0;
  `;

  return (
    <ColourPaletteSwatchBackground>
      <ColourPaletteSwatchText>
        <Span bold>{name}</Span>
      </ColourPaletteSwatchText>

      <ColourPaletteSwatchText>{background}</ColourPaletteSwatchText>
    </ColourPaletteSwatchBackground>
  );
};

export const Swatches = () => {
  const theme = useContext(ThemeContext);
  const colours = map<*, *>(theme.colorPalette, (v, k) => ({
    key: k,
    value: v,
  }));

  // For swatch presentation only
  const getForegroundColour = (c) => {
    const darkForeground = '#403e3d';
    const darkForegroundWhiteLabel = '#333333';
    const fgToBgMap = {
      // Wealthsimple theme
      // too light for white
      '#ffffff': darkForeground,
      '#f9f8f7': darkForeground,
      '#e6e4e3': darkForeground,
      '#bfbdbb': darkForeground,
      '#e5f1f1': '#377674', // success
      '#ffebe6': '#ed5a3f', // error
      '#fff6e6': '#e69d00', // info

      // White label defaults theme
      // too light for white
      '#fafafa': darkForegroundWhiteLabel,
      '#bfbfbf': darkForegroundWhiteLabel,
      '#e6e6e6': darkForegroundWhiteLabel,
      '#fff2ff': '#662966', // brand primary bg/fg
      '#e6f7ff': '#1f4e66', // brand secondary bg/fg
      '#def2da': '#2a8000', // success
      '#ffe6e6': '#e62e2e', // error
      '#fff7e6': '#cc8f14', // info
    };

    return fgToBgMap[c] || '#ffffff';
  };

  return (
    <SwatchSection>
      {colours.map((colour) => (
        <Swatch
          key={colour.key}
          name={colour.key}
          background={colour.value}
          foreground={getForegroundColour(colour.value)}
        />
      ))}
    </SwatchSection>
  );
};
