import React from "react";
import { storiesOf } from "@storybook/react";
import Icon from "./Icon";
import styles from "./Icon.storybook.scss";
import { ICON_MAP } from "./utils/getIcon";
import { Label } from "../../Inputs/_common/Label";
import Docs from "./Icon.mdx";
import * as Icons from "./IconExports";
import * as MultiColoredIcons from "./MultiIconExports";

storiesOf("Components|UI/Icon", module).add("Documentation", () => {
  return <Docs />;
});

export const IconSheet = () => {
  return (
    <div>
      {Object.keys(ICON_MAP)
        .sort()
        .map(key => {
          return (
            <div className={styles.container}>
              <Icon className={styles.iconsheet} src={ICON_MAP[key]} />
              <Label>{key}</Label>
            </div>
          );
        })}
    </div>
  );
};

export const NewIconSheet = () =>
  Object.keys(Icons)
    .sort()
    .map(element => {
      if (element !== "iconExports") {
        const Component = Icons[element];
        return (
          <div className={styles.newIconsContainer}>
            <div className={styles.iconsheet}>
              <Component />
            </div>
            <Label>{`<${element} />`}</Label>
          </div>
        );
      }
    });

export const MultiColoredIconSheet = () =>
  Object.keys(MultiColoredIcons)
    .sort()
    .map(element => {
      if (element !== "MultiColouredIconExports") {
        const Component = MultiColoredIcons[element];
        return (
          <div className={styles.newIconsContainer}>
            <div className={styles.iconsheet}>
              <Component />
            </div>
            <Label>{`<${element} />`}</Label>
          </div>
        );
      }
    });
