// @flow
import React, { useState } from 'react';
import * as Icons from '.';
import { Box } from '../../primitives';
import { Grid, GridItem } from '../structures/grid';
import docs from './icon.mdx';

export default {
  component: Icons,
  title: 'Core/Icon',
  parameters: {
    docs: {
      page: docs,
    },
  },
};

export const AllIcons = () => (
  <Grid>
    {[
      Icons.Add,
      Icons.ArrowBack,
      Icons.ArrowForward,
      Icons.BulletPoint,
      Icons.CheckIcon,
      Icons.Checkmark,
      Icons.ChevronDown,
      Icons.ChevronLeft,
      Icons.ChevronRight,
      Icons.ChevronUp,
      Icons.Close,
      Icons.Ellipsis,
      Icons.ErrorIcon,
      Icons.FilterIcon,
      Icons.Info,
      Icons.Lock,
      Icons.MapPin,
      Icons.NextIcon,
      Icons.Pencil,
      Icons.Remove,
      Icons.SearchIcon,
      Icons.SmallArrowRight,
      Icons.SmallChevronDown,
      Icons.SmallChevronLeft,
      Icons.SmallChevronRight,
      Icons.SmallChevronUp,
      Icons.SortArrowDown,
      Icons.SortArrowUp,
      Icons.ToggleArrows,
      Icons.TrashCan,
    ].map((Component) => {
      const Icon = <Component />;
      return (
        <GridItem sm={3} key={Component.displayName}>
          <Box spacing="p2">
            {Icon}
            <br />
            {Component.displayName}
          </Box>
        </GridItem>
      );
    })}
    <GridItem sm={3} key="ExpandMoreIconOpen">
      <Box spacing="p2">
        <Icons.ExpandMoreIcon isOpen />
        <br />
        ExpandMoreIcon (open)
      </Box>
    </GridItem>
    <GridItem sm={3} key="ExpandMoreIconClosed">
      <Box spacing="p2">
        <Icons.ExpandMoreIcon isOpen={false} />
        <br />
        ExpandMoreIcon (closed)
      </Box>
    </GridItem>
    <GridItem sm={3} key="CheckboxSelected">
      <Box spacing="p2">
        <Icons.Checkbox selected />
        <br />
        Checkbox (selected)
      </Box>
    </GridItem>
    <GridItem sm={3} key="CheckboxDeselected">
      <Box spacing="p2">
        <Icons.Checkbox selected={false} />
        <br />
        Checkbox (deselected)
      </Box>
    </GridItem>
    <GridItem sm={3} key="NumberedBullet">
      <Box spacing="p2">
        <Icons.NumberedBullet value="7" />
        <br />
        NumberedBullet
      </Box>
    </GridItem>
    <GridItem sm={3} key="RevealTextShow">
      <Box spacing="p2">
        <Icons.RevealTextShow colorName="greyscale-dark" />
        <br />
        RevealTextShow
      </Box>
    </GridItem>
    <GridItem sm={3} key="RevealTextHide">
      <Box spacing="p2">
        <Icons.RevealTextHide colorName="greyscale-dark" />
        <br />
        RevealTextHide
      </Box>
    </GridItem>
    <GridItem sm={3} key="TrashCan">
      <Box spacing="p2">
        <Icons.TrashCan />
        TrashCan
      </Box>
    </GridItem>
  </Grid>
);

export const CheckmarkNormal = () => <Icons.Checkmark />;
export const CheckmarkInverted = () => <Icons.Checkmark inverted />;

export const NumberedBullet = () => <Icons.NumberedBullet value="3" />;
export const NumberedBulletWithColor = () => (
  <Icons.NumberedBullet value="3" colorName="brand-secondary-base" />
);
export const NumberedBulletInverted = () => (
  <Box colorName="background" spacing="p4">
    <Icons.NumberedBullet value="3" inverted />
  </Box>
);
export const NumberedBulletDisabled = () => (
  <Icons.NumberedBullet value="3" disabled />
);
export const NumberedBulletInvertedAndDisabled = () => (
  <Box colorName="background" spacing="p4">
    <Icons.NumberedBullet value="3" inverted disabled />
  </Box>
);

export const ArrowForward = () => <Icons.ArrowForward />;
export const ArrowForwardDisabled = () => <Icons.ArrowForward disabled />;
export const ArrowBack = () => <Icons.ArrowBack />;
export const ArrowBackDisabled = () => <Icons.ArrowBack disabled />;

export const NextIconSm = () => <Icons.NextIcon size="sm" />;
export const NextIconLg = () => <Icons.NextIcon size="lg" />;
export const NextIconDisabled = () => <Icons.NextIcon disabled />;

export const ErrorIcon = () => <Icons.ErrorIcon />;

export const FilterIconNormal = () => <Icons.FilterIcon />;
export const FilterIconWithColor = () => (
  <Icons.FilterIcon colorName="brand-primary-base" />
);

export const SearchIconNormal = () => <Icons.SearchIcon />;
export const SearchIconWithColor = () => (
  <Icons.SearchIcon colorName="brand-primary-base" />
);
export const SearchIconDisabled = () => (
  <Icons.SearchIcon colorName="brand-primary-base" disabled />
);

export const MapPin = () => <Icons.MapPin />;
export const MapPinDisabled = () => <Icons.MapPin disabled />;

export const BulletPoint = () => <Icons.BulletPoint />;

export const ChevronRight = () => <Icons.ChevronRight />;

export const ChevronRightWithColor = () => (
  <Icons.ChevronRight colorName="greyscale-light" />
);

export const SmallChevronRight = () => <Icons.SmallChevronRight />;
export const SmallChevronRightWithColor = () => (
  <Icons.SmallChevronRight colorName="greyscale-black" />
);

export const ChevronDown = () => <Icons.ChevronDown />;
export const ChevronDownWithColor = () => (
  <Icons.ChevronDown colorName="greyscale-light" />
);

export const SmallChevronDown = () => <Icons.SmallChevronDown />;
export const SmallChevronDownWithColor = () => (
  <Icons.SmallChevronDown colorName="greyscale-black" />
);

export const ChevronUp = () => <Icons.ChevronUp />;
export const ChevronUpWithColor = () => (
  <Icons.ChevronUp colorName="greyscale-light" />
);

export const SmallChevronUp = () => <Icons.SmallChevronUp />;
export const SmallChevronUpWithColor = () => (
  <Icons.SmallChevronUp colorName="greyscale-black" />
);

export const ChevronLeft = () => <Icons.ChevronLeft />;
export const ChevronLeftWithColor = () => (
  <Icons.ChevronLeft colorName="greyscale-black" />
);

export const SmallChevronLeft = () => <Icons.SmallChevronLeft />;
export const SmallChevronLeftWithColor = () => (
  <Icons.SmallChevronLeft colorName="greyscale-black" />
);

export const CheckboxNotSelected = () => <Icons.Checkbox selected={false} />;
export const CheckboxSelected = () => <Icons.Checkbox selected />;

export const Close = () => (
  <Box colorName="background" spacing="p4">
    <Icons.Close colorName="brand-secondary-fg" />
    <Icons.Close />
    <Icons.Close colorName="greyscale-dark" />
    <Icons.Close colorName="brand-primary-base" />
  </Box>
);

export const Info = () => <Icons.Info />;

export const Add = () => <Icons.Add />;
export const AddWithColor = () => <Icons.Add colorName="greyscale-dark" />;

export const Remove = () => <Icons.Remove />;

export const SmallArrowRight = () => <Icons.SmallArrowRight />;
export const SmallArrowRightWithColor = () => (
  <Icons.SmallArrowRight colorName="greyscale-dark" />
);

export const Lock = () => <Icons.Lock />;
export const LockDisabled = () => <Icons.Lock disabled />;

export const ToggleArrows = () => <Icons.ToggleArrows />;
export const ToggleArrowsDisabled = () => <Icons.ToggleArrows disabled />;
export const ToggleArrowsTop = () => <Icons.ToggleArrows hideBottom />;
export const ToggleArrowsBottom = () => <Icons.ToggleArrows hideTop />;
export const ToggleArrowsInheritedColor = () => (
  <div style={{ color: 'red' }}>
    <Icons.ToggleArrows useCurrentColor />
  </div>
);

export const CheckIconSmall = () => <Icons.CheckIcon size="sm" />;
export const CheckIconLarge = () => <Icons.CheckIcon size="lg" />;
export const CheckIconInverted = () => <Icons.CheckIcon size="lg" inverted />;

export const SortArrayDown = () => <Icons.SortArrowDown />;

export const SortArrowUp = () => <Icons.SortArrowUp />;

export const RevealTextShow = () => (
  <Icons.RevealTextShow colorName="greyscale-dark" />
);

export const RevealTextHide = () => (
  <Icons.RevealTextHide colorName="greyscale-dark" />
);

export const ExpandMoreIcon = () => {
  const [open, setOpen] = useState(false);
  return (
    <div>
      <Icons.ExpandMoreIcon isOpen={open} />
      <div>
        <button type="button" onClick={() => setOpen(!open)}>
          flip me
        </button>
      </div>
    </div>
  );
};

export const TrashCanIcon = () => <Icons.TrashCan />;
