// @flow
import React from 'react';
import { withInfo } from '@storybook/addon-info';
import styled, { withTheme } from 'styled-components';
import { storiesOf } from '@storybook/react';
import { map } from 'lodash';
import { ColourPaletteSwatch } from './colour-palette-swatch';
import { Card } from '..';
import docs from '../mixins/branding/BRANDING.mkd';

const withDocs = withInfo({
  text: docs,
  source: false,
  TableComponent: () => null,
});

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

const ColourPaletteStory = withTheme(({ theme }) => {
  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 (
    <Card spacing={['p3', 'm3']}>
      <SwatchSection>
        {colours.map(colour => (
          <ColourPaletteSwatch
            key={colour.key}
            name={colour.key}
            background={colour.value}
            foreground={getForegroundColour(colour.value)}
          />
        ))}
      </SwatchSection>
    </Card>
  );
});

storiesOf('Colors', module).add(
  'Swatches',
  withDocs(() => <ColourPaletteStory />),
);
