// @flow
import React, { type ComponentType } from 'react';
import styled, { useTheme } from 'styled-components';
import {
  Box,
  type BoxProps,
  Card,
  type CardProps,
  CardSection,
  SectionHeader,
  Span,
  Text,
} from '../../../src';
import type { ColorPaletteColorNameKey } from '../../../src/mixins/branding/branding.proptypes';

const BackgroundColor: ComponentType<BoxProps> = styled(Box)`
  min-height: 50px;
`;

const SwatchContainer: ComponentType<CardProps> = styled(Card)`
  overflow: hidden;
`;

type SwatchProps = {|
  backgroundColorName: ColorPaletteColorNameKey,
  hoverColorName?: ColorPaletteColorNameKey,
  legalForegroundColorNames: ColorPaletteColorNameKey[],
|};
const Swatch = ({
  backgroundColorName,
  hoverColorName,
  legalForegroundColorNames,
}: SwatchProps) => {
  const theme = useTheme();
  return (
    <SwatchContainer spacing="mv2">
      <CardSection spacing="p1" stacked="column" align="start">
        <Text spacing="m0" fontSize="f0">
          <Span bold>{backgroundColorName}</Span> (
          {theme.colorPalette[backgroundColorName]})
        </Text>
        {hoverColorName && (
          <Text spacing="m0" fontSize="f0">
            <Span bold>:hover</Span> ({theme.colorPalette[hoverColorName]})
          </Text>
        )}
      </CardSection>
      <CardSection>
        <BackgroundColor
          colorName={backgroundColorName}
          spacing="pt1"
          stacked="column"
          align="end"
          justify="center"
        >
          {legalForegroundColorNames.map((legalForegroundColorName) => (
            <Text
              fontSize="f0"
              colorName={legalForegroundColorName}
              key={legalForegroundColorName}
              spacing="mr1"
            >
              <Span bold>{legalForegroundColorName}</Span> (
              {theme.colorPalette[legalForegroundColorName]})
            </Text>
          ))}
        </BackgroundColor>
        {hoverColorName && (
          <BackgroundColor
            colorName={hoverColorName}
            spacing="p1"
            stacked="column"
            align="end"
            justify="center"
          />
        )}
      </CardSection>
    </SwatchContainer>
  );
};

const Basics = () => (
  <Box spacing="mr2" basis={225}>
    <SectionHeader>Basics</SectionHeader>
    <Swatch
      backgroundColorName="background"
      legalForegroundColorNames={[
        'greyscale-dark',
        'greyscale-black',
        'brand-primary-fg',
        'brand-secondary-fg',
      ]}
    />

    <Swatch
      backgroundColorName="white"
      hoverColorName="background"
      legalForegroundColorNames={[
        'greyscale-dark',
        'greyscale-black',
        'brand-primary-fg',
        'brand-secondary-fg',
      ]}
    />
  </Box>
);

const Primary = () => (
  <Box spacing="mr2" basis={240}>
    <SectionHeader>Primary</SectionHeader>

    <Swatch
      backgroundColorName="brand-primary-bg"
      hoverColorName="brand-primary-bg-hover"
      legalForegroundColorNames={['brand-primary-fg']}
    />

    <Swatch
      backgroundColorName="brand-primary-fg"
      hoverColorName="brand-primary-fg-hover"
      legalForegroundColorNames={['brand-primary-bg', 'white']}
    />

    <Swatch
      backgroundColorName="brand-primary-base"
      hoverColorName="brand-primary-base-hover"
      legalForegroundColorNames={[]}
    />
  </Box>
);

const Secondary = () => (
  <Box spacing="mr2" basis={240}>
    <SectionHeader>Secondary</SectionHeader>

    <Swatch
      backgroundColorName="brand-secondary-bg"
      hoverColorName="brand-secondary-bg-hover"
      legalForegroundColorNames={['brand-secondary-fg']}
    />

    <Swatch
      backgroundColorName="brand-secondary-fg"
      hoverColorName="brand-secondary-fg-hover"
      legalForegroundColorNames={['brand-secondary-bg', 'white']}
    />

    <Swatch
      backgroundColorName="brand-secondary-base"
      hoverColorName="brand-secondary-base-hover"
      legalForegroundColorNames={[]}
    />
  </Box>
);

const Alerts = () => (
  <Box basis={200}>
    <SectionHeader>Alerts</SectionHeader>
    <Swatch
      backgroundColorName="success-bg"
      legalForegroundColorNames={['success-fg']}
    />
    <Swatch
      backgroundColorName="info-bg"
      legalForegroundColorNames={['info-fg']}
    />
    <Swatch
      backgroundColorName="error-bg"
      legalForegroundColorNames={['error-fg']}
    />
  </Box>
);

export const Palette = () => (
  <Box stacked="row" spacing={['mt3', 'pr1']} justify="space-between" wrap>
    <Basics />
    <Primary />
    <Secondary />
    <Alerts />
  </Box>
);
