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

storiesOf('Core/Icon', module).add(
  'All Icons',
  withDocs(docs)(() => {
    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', withDocs(docs)(() => <Icons.Checkmark />))
  .add('inverted', withDocs(docs)(() => <Icons.Checkmark inverted />));

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

storiesOf('Core/Icon/Close', module).add(
  'normal',
  withDocs(docs, [Box])(() => (
    <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',
  withDocs(docs)(() => <Icons.Info />),
);

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

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

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

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

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

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

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

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

storiesOf('Core/Icon/Pencil', module).add(
  'normal',
  withDocs(docs)(() => <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',
  withDocs(docs)(() => <ExpandMoreContainer />),
);
