import React from 'react';
import {storiesOf} from '@storybook/react';
import PropTypes from 'prop-types';
import * as colors from '@propellerads/stylevariables';

const Color = ({color}) => (
  <div
    style={{
      marginBottom: '16px',
    }}
  >
    <span
      style={{
        backgroundColor: color.value,
        display: 'flex',
        height: '64px',
        width: '170px',
        marginBottom: '8px',
        borderRadius: '8px',
      }}
    />
    <div
      style={{
        fontWeight: 'bold',
      }}
    >
      {color.variableName}
    </div>
    <div
      style={{
        color: 'gray',
        paddingTop: '4px',
      }}
    >
      {color.value}
    </div>
  </div>
);

const stateColors = {
  neutrals: [
    {
      variableName: 'white',
      value: colors.white,
    }, {
      variableName: 'semiWhite',
      value: colors.semiWhite,
    }, {
      variableName: 'gray95',
      value: colors.gray95,
    }, {
      variableName: 'gray80',
      value: colors.gray80,
    }, {
      variableName: 'gray70',
      value: colors.gray70,
    }, {
      variableName: 'gray50',
      value: colors.gray50,
    }, {
      variableName: 'gray20',
      value: colors.gray20,
    }, {
      variableName: 'black',
      value: colors.black,
    },
  ],
  primaryColors: [
    {
      variableName: 'actionColor',
      value: colors.actionColor,
    }, {
      variableName: 'compositeGray',
      value: colors.compositeGray,
    },
  ],
  accentColors: [
    {
      variableName: 'errorColor',
      value: colors.errorColor,
    }, {
      variableName: 'successColor',
      value: colors.successColor,
    }, {
      variableName: 'warningColor',
      value: colors.warningColor,
    },
  ],
};

export default storiesOf('Layout | Color', module)
  .add('Color palette', () => (
    <div>
      <h2>Primary Colors</h2>
      <div
        style={{
          display: 'grid',
          gridAutoFlow: 'row',
          gridTemplateColumns: '200px 200px 200px 200px',
        }}
      >
        {stateColors.primaryColors.map((color) => <Color color={color} />)}
      </div>
      <br />
      <h2>Neutral Colors</h2>
      <div
        style={{
          display: 'grid',
          gridAutoFlow: 'row',
          gridTemplateColumns: '200px 200px 200px 200px',
        }}
      >
        {stateColors.neutrals.map((color) => <Color color={color} />)}
      </div>
      <br />
      <h2>Accent Colors</h2>
      <div
        style={{
          display: 'grid',
          gridAutoFlow: 'row',
          gridTemplateColumns: '200px 200px 200px 200px',
        }}
      >
        {stateColors.accentColors.map((color) => <Color color={color} />)}
      </div>
    </div>
  ));

Color.propTypes = {
  color: PropTypes.string.isRequired,
};