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

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

const ColourPaletteSwatchBackground = styled(Box)`
  height: 120px;
  width: 200px;
`;

type ColourPaletteSwatchProps = { name: string, hexCode: string };
const Swatch = ({ name, hexCode }: ColourPaletteSwatchProps) => {
  const foregroundName = new Color(hexCode).isLight()
    ? 'greyscale-black'
    : 'white';

  return (
    <ColourPaletteSwatchBackground
      colorName={name}
      stacked="column"
      justify="center"
      align="center"
      spacing={['mr1', 'mb1']}
    >
      <Text bold colorName={foregroundName} spacing={['pv1', 'ph0']}>
        {name}
      </Text>

      <Text colorName={foregroundName}>{hexCode}</Text>
    </ColourPaletteSwatchBackground>
  );
};

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

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