// @flow
import PropTypes from 'prop-types';

// Flow:

// https://app.zeplin.io/project/5b4fadb7035c8618066b55af/styleguide
export type ColorPalette = {
  // Backgrounds
  white: string,
  background: string,

  // Greys
  'greyscale-black': string,
  'greyscale-darker': string,
  'greyscale-dark': string,
  'greyscale-medium': string,
  'greyscale-light': string,

  // Brand colours - primary
  'brand-primary-base': string,
  'brand-primary-dark': string,
  'brand-primary-fg': string,
  'brand-primary-bg': string,

  // Brand colours - secondary
  'brand-secondary-base': string,
  'brand-secondary-dark': string,
  'brand-secondary-fg': string,
  'brand-secondary-bg': string,

  // Flash messages
  'error-fg': string,
  'error-bg': string,
  'success-fg': string,
  'success-bg': string,
  'info-fg': string,
  'info-bg': string,

  // Auxiliary colours
  'aux-1': string,
  'aux-2': string,
  'aux-3': string,
  'aux-4': string,
};

export type ColorPaletteColorNameKey = $Keys<ColorPalette>;

export type BrandProps = {
  colorName?: ColorPaletteColorNameKey,
};

export const colorPaletteColorNames = [
  'white',
  'background',
  'greyscale-black',
  'greyscale-darker',
  'greyscale-dark',
  'greyscale-medium',
  'greyscale-light',
  'brand-primary-base',
  'brand-primary-dark',
  'brand-primary-fg',
  'brand-primary-bg',
  'brand-secondary-base',
  'brand-secondary-dark',
  'brand-secondary-fg',
  'brand-secondary-bg',
  'error-fg',
  'error-bg',
  'success-fg',
  'success-bg',
  'info-fg',
  'info-bg',
  'aux-1',
  'aux-2',
  'aux-3',
  'aux-4',
];

// PropTypes:
export const brandPropTypes = () => ({
  colorName: PropTypes.oneOf(colorPaletteColorNames),
});
