// @flow
import React, { useState } from 'react';
import { storiesOf } from '@storybook/react';
import { withInfo } from '@storybook/addon-info';
import { configDocs } from '../../../.storybook/config-docs';
import * as Icons from '.';
import { Box } from '../../primitives';
import { Grid, GridItem } from '../structures/grid';
import docs from './ICON.mkd';

storiesOf('Core/Icon', module)
  .addDecorator(withInfo(configDocs(docs)))
  .add('All Icons', () => {
    return (
      <Grid>
        {Object.keys(Icons)
          .sort()
          .filter(key => key.match(/^[A-Z]/))
          .map(key => {
            const IconComponent = Icons[key];
            // We ignore flow for the following reasons:
            // - Some imports are excluded by the filter call above, but fail
            // flow check because flow won't execute the code that filters it.
            // - Checkbox requires a `selected` prop.
            // - NumberedBullet requires a `value` prop.
            // $FlowFixMe
            const iconComponent = <IconComponent />;

            return (
              <GridItem sm={3} key={key}>
                <Box spacing="p2">
                  {iconComponent}
                  <br />
                  {key}
                </Box>
              </GridItem>
            );
          })}
      </Grid>
    );
  });

storiesOf('Core/Icon/Checkmark', module)
  .add('normal', () => <Icons.Checkmark />)
  .add('inverted', () => <Icons.Checkmark inverted />);

storiesOf('Core/Icon/NumberedBullet', module)
  .add('normal', () => <Icons.NumberedBullet value="3" />)
  .add('with color', () => (
    <Icons.NumberedBullet value="3" colorName="brand-secondary-base" />
  ))
  .add('inverted', () => (
    <Box colorName="background" spacing="p4">
      <Icons.NumberedBullet value="3" inverted />
    </Box>
  ))
  .add('disabled', () => <Icons.NumberedBullet value="3" disabled />)
  .add('inverted & disabled', () => (
    <Box colorName="background" spacing="p4">
      <Icons.NumberedBullet value="3" inverted disabled />
    </Box>
  ));

storiesOf('Core/Icon/ArrowForward', module)
  .add('normal', () => <Icons.ArrowForward />)
  .add('disabled', () => <Icons.ArrowForward disabled />);

storiesOf('Core/Icon/ArrowBack', module)
  .add('normal', () => <Icons.ArrowBack />)
  .add('disabled', () => <Icons.ArrowBack disabled />);

storiesOf('Core/Icon/NextIcon', module)
  .add('sm', () => <Icons.NextIcon size="sm" />)
  .add('lg', () => <Icons.NextIcon size="lg" />)
  .add('disabled', () => <Icons.NextIcon disabled />);

storiesOf('Core/Icon/ErrorIcon', module).add('normal', () => (
  <Icons.ErrorIcon />
));

storiesOf('Core/Icon/FilterIcon', module)
  .add('normal', () => <Icons.FilterIcon />)
  .add('with color', () => <Icons.FilterIcon colorName="brand-primary-base" />);

storiesOf('Core/Icon/SearchIcon', module)
  .add('normal', () => <Icons.SearchIcon />)
  .add('with color', () => <Icons.SearchIcon colorName="brand-primary-base" />)
  .add('disabled', () => (
    <Icons.SearchIcon colorName="brand-primary-base" disabled />
  ));

storiesOf('Core/Icon/MapPin', module)
  .add('normal', () => <Icons.MapPin />)
  .add('disabled', () => <Icons.MapPin disabled />);

storiesOf('Core/Icon/BulletPoint', module).add('normal', () => (
  <Icons.BulletPoint />
));

storiesOf('Core/Icon/ChevronRight', module).add('normal', () => (
  <Icons.ChevronRight />
));

storiesOf('Core/Icon/ChevronRight', module).add('with color', () => (
  <Icons.ChevronRight colorName="greyscale-light" />
));

storiesOf('Core/Icon/SmallChevronRight', module).add('normal', () => (
  <Icons.SmallChevronRight />
));

storiesOf('Core/Icon/SmallChevronRight', module).add('with color', () => (
  <Icons.SmallChevronRight colorName="greyscale-black" />
));

storiesOf('Core/Icon/ChevronDown', module).add('normal', () => (
  <Icons.ChevronDown />
));

storiesOf('Core/Icon/ChevronDown', module).add('with color', () => (
  <Icons.ChevronDown colorName="greyscale-light" />
));

storiesOf('Core/Icon/SmallChevronDown', module).add('normal', () => (
  <Icons.SmallChevronDown />
));
storiesOf('Core/Icon/SmallChevronDown', module).add('with color', () => (
  <Icons.SmallChevronDown colorName="greyscale-black" />
));

storiesOf('Core/Icon/ChevronUp', module).add('normal', () => (
  <Icons.ChevronUp />
));

storiesOf('Core/Icon/ChevronUp', module).add('with color', () => (
  <Icons.ChevronUp colorName="greyscale-light" />
));

storiesOf('Core/Icon/SmallChevronUp', module).add('normal', () => (
  <Icons.SmallChevronUp />
));

storiesOf('Core/Icon/SmallChevronUp', module).add('with color', () => (
  <Icons.SmallChevronUp colorName="greyscale-black" />
));

storiesOf('Core/Icon/ChevronLeft', module).add('normal', () => (
  <Icons.ChevronLeft />
));

storiesOf('Core/Icon/ChevronLeft', module).add('with color', () => (
  <Icons.ChevronLeft colorName="greyscale-light" />
));

storiesOf('Core/Icon/SmallChevronLeft', module).add('normal', () => (
  <Icons.SmallChevronLeft />
));

storiesOf('Core/Icon/SmallChevronLeft', module).add('with color', () => (
  <Icons.SmallChevronLeft colorName="greyscale-black" />
));

storiesOf('Core/Icon/Checkbox', module)
  .add('not selected', () => <Icons.Checkbox selected={false} />)
  .add('selected', () => <Icons.Checkbox selected />);

storiesOf('Core/Icon/Close', module).add('normal', () => (
  <Box colorName="background" spacing="p4">
    <Icons.Close colorName="brand-secondary-dark" />
    <Icons.Close />
    <Icons.Close colorName="greyscale-dark" />
    <Icons.Close colorName="brand-primary-base" />
  </Box>
));

storiesOf('Core/Icon/Info', module).add('normal', () => <Icons.Info />);

storiesOf('Core/Icon/Add', module)
  .add('normal', () => <Icons.Add />)
  .add('with different color', () => (
    <Icons.Add colorName="greyscale-darker" />
  ));

storiesOf('Core/Icon/Remove', module).add('normal', () => <Icons.Remove />);

storiesOf('Core/Icon/SmallArrowRight', module)
  .add('normal', () => <Icons.SmallArrowRight />)
  .add('with different color', () => (
    <Icons.SmallArrowRight colorName="greyscale-darker" />
  ));

storiesOf('Core/Icon/Lock', module)
  .add('normal', () => <Icons.Lock />)
  .add('disabled', () => <Icons.Lock disabled />);

storiesOf('Core/Icon/ToggleArrows', module)
  .add('normal', () => <Icons.ToggleArrows />)
  .add('disabled', () => <Icons.ToggleArrows disabled />)
  .add('top', () => <Icons.ToggleArrows hideBottom />)
  .add('bottom', () => <Icons.ToggleArrows hideTop />)
  .add('inherited color for fill', () => (
    <div style={{ color: 'red' }}>
      <Icons.ToggleArrows useCurrentColor />
    </div>
  ));

storiesOf('Core/Icon/CheckIcon', module)
  .add('sm', () => <Icons.CheckIcon size="sm" />)
  .add('lg', () => <Icons.CheckIcon size="lg" />)
  .add('inverted', () => <Icons.CheckIcon size="lg" inverted />);

storiesOf('Core/Icon/SortArrowDown', module).add('normal', () => (
  <Icons.SortArrowDown />
));

storiesOf('Core/Icon/SortArrowUp', module).add('normal', () => (
  <Icons.SortArrowUp />
));

storiesOf('Core/Icon/Pencil', module).add('normal', () => <Icons.Pencil />);

const ExpandMoreContainer = () => {
  const [open, setOpen] = useState(false);
  return (
    <div>
      <Icons.ExpandMoreIcon isOpen={open} />
      <div>
        <button type="button" onClick={() => setOpen(!open)}>
          flip me
        </button>
      </div>
    </div>
  );
};
storiesOf('Core/Icon/ExpandMoreIcon', module).add('normal', () => (
  <ExpandMoreContainer />
));
