import _extends from "@babel/runtime/helpers/extends";

/* eslint-disable no-console */
import React from 'react';
import { linkTo } from '@storybook/addon-links';
import Blockquote from '../../components/Blockquote';
import Link from '../../components/Link';
import Icon from '../../components/Icon';
import { Module, ModuleFooter } from '../../components/Module';
import metadata from '@wfp/icons/metadata.json';
import * as Icons from '@wfp/icons-react';
import { DownloadGlyph } from '@wfp/icons-react';
/*import moduleInfo, {
  getModuleName,
} from '@wfp/icon-build-helpers/src/metadata/extensions/module-info';*/

import Button from '../../components/Button';
import IconConverter from './IconConverter';
import Tippy from '@tippy.js/react';
import { tooltipStyle } from '../../components/Tooltip';
var iconList = metadata.icons;

function camelCaseFromHyphnated(s) {
  return s.replace(/-+([A-z])/g, function (match, token) {
    return token.toUpperCase();
  });
}

var IconList = function IconList(_ref) {
  var icon = _ref.icon;
  console.log(icon);
  var iconName = icon.name.replace('icon--', '');
  var Icon = Icons["".concat(icon.moduleInfo.global, "Glyph")];
  if (!Icon) return null;
  return /*#__PURE__*/React.createElement(Tippy, _extends({
    interactive: true,
    content: /*#__PURE__*/React.createElement("div", {
      style: {
        lineHeight: '1.2em',
        padding: '0.2em 0.5em',
        minHeight: '3rem',
        display: 'flex',
        justifyContent: 'center',
        flexDirection: 'column',
        alignItems: 'center'
      }
    }, /*#__PURE__*/React.createElement(DownloadGlyph, {
      description: "WFP",
      width: "150",
      height: "150",
      className: "wfp--footer-cta-logo"
    }), /*#__PURE__*/React.createElement("div", {
      className: "wfp--inline-highlight",
      style: {
        fontFamily: 'monospace',
        display: 'block',
        marginTop: '1rem',
        marginBottom: '1rem',
        fontWeight: 'bold'
      }
    }, iconName), /*#__PURE__*/React.createElement("div", {
      className: "wfp--inline-highlight",
      style: {
        fontFamily: 'monospace',
        display: 'block',
        whiteSpace: 'pre',
        marginTop: '0.2rem',
        marginBottom: '1rem'
      }
    }, "import\n  {".concat(camelCaseFromHyphnated('icon--' + iconName), "}\nfrom '@wfp/icons-react'")), /*#__PURE__*/React.createElement(Button, {
      icon: DownloadGlyph,
      href: "https://github.com/wfp/carbon-icons/blob/master/src/svg/".concat(iconName, ".svg"),
      small: true
    }, "View on GitHub")),
    trigger: "click"
  }, tooltipStyle), /*#__PURE__*/React.createElement("div", {
    style: {
      width: '12.5%'
    }
  }, /*#__PURE__*/React.createElement(Module, {
    light: true,
    withHover: true
  }, /*#__PURE__*/React.createElement("div", {
    style: {
      display: 'flex',
      justifyContent: 'center',
      alignItems: 'center',
      flexDirection: 'column',
      width: '100%',
      height: '55px'
    }
  }, /*#__PURE__*/React.createElement(Icon, {
    description: "WFP",
    width: "39"
  })), /*#__PURE__*/React.createElement(ModuleFooter, {
    style: {
      padding: '0.2em',
      fontSize: '0.45em',
      textAlign: 'center',
      alignItems: 'center',
      justifyContent: 'center',
      minHeight: '2rem'
    }
  }, /*#__PURE__*/React.createElement("span", null, iconName)))));
};

var wrapperStyle = {
  display: 'flex',
  flexWrap: 'wrap',
  margin: '0 -0.7em'
};

var IconsComponent = function IconsComponent() {
  return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement("p", null, "For Usage please take a look at the", ' ', /*#__PURE__*/React.createElement(Link, {
    onClick: linkTo('Components|Icon', 'Default')
  }, "Icon"), " component or", ' ', /*#__PURE__*/React.createElement(Link, {
    onClick: linkTo(' Getting started', 'Developers')
  }, "Usage for Developers"), "."), /*#__PURE__*/React.createElement(Blockquote, {
    title: "Notice"
  }, "WFP UI Icons is using a fork of", ' ', /*#__PURE__*/React.createElement(Link, {
    href: "https://github.com/IBM/carbon-icons",
    target: "_blank"
  }, "Carbon Icons"), ". You can find additional information in the", ' ', /*#__PURE__*/React.createElement(Link, {
    href: "http://www.carbondesignsystem.com/guidelines/iconography",
    target: "_blank"
  }, "Carbon Design System")), /*#__PURE__*/React.createElement("h3", null, "Generate custom Icon"), /*#__PURE__*/React.createElement("p", null, "Generate a custom icon which can be used inside the", ' ', /*#__PURE__*/React.createElement("span", {
    className: "wfp--inline-highlight"
  }, "icon"), " prop of the", ' ', /*#__PURE__*/React.createElement("span", {
    className: "wfp--inline-highlight"
  }, "<Icon/>"), " component. SVG images which are generated with Sketch App works best. Also consider optimizing the svg image before."), /*#__PURE__*/React.createElement(IconConverter, null), /*#__PURE__*/React.createElement("h3", null, "Humanitarian Thematic Icon Set"), /*#__PURE__*/React.createElement("p", null, "The ", /*#__PURE__*/React.createElement("i", null, "UN Office for the Coordination of Humanitarian Affairs (OCHA)"), ' ', "has established icons to represent humanitarian assistance and to ensure consistency in use, these have been shared widely with UN agencies and NGOs.", ' ', /*#__PURE__*/React.createElement(Link, {
    href: "https://www.unocha.org/story/iconography-part-un%E2%80%99s-humanitarian-efforts-ocha-releases-new-humanitarian-icons",
    target: "_blank"
  }, "Visit OCHA Icon Library")), /*#__PURE__*/React.createElement("p", null, "WFP has also created some", ' ', /*#__PURE__*/React.createElement(Link, {
    href: "http://newgo.wfp.org/documents/humanitarian-thematic-icon-set-png",
    target: "_blank"
  }, "WFP specific icons"), ' ', "to add to this set."), /*#__PURE__*/React.createElement("h3", null, "List of Icons"), /*#__PURE__*/React.createElement(Link, {
    href: "https://github.com/wfp/carbon-icons/tree/master/src/svg",
    target: "_blank"
  }, "Source svg files"), /*#__PURE__*/React.createElement("h4", null, "WFP Logos"), /*#__PURE__*/React.createElement("div", {
    style: wrapperStyle
  }, iconList.filter(function (icon) {
    return icon.name.includes('logo');
  }).map(function (icon) {
    return /*#__PURE__*/React.createElement(IconList, {
      icon: icon
    });
  })), /*#__PURE__*/React.createElement("h4", null, "WFP Humanitatian Icons"), /*#__PURE__*/React.createElement("div", {
    style: wrapperStyle
  }, iconList.filter(function (icon) {
    return icon.name.includes('wfp-hum--');
  }).map(function (icon) {
    return /*#__PURE__*/React.createElement(IconList, {
      icon: icon
    });
  })), /*#__PURE__*/React.createElement("h4", null, "UI Icons"), /*#__PURE__*/React.createElement("div", {
    style: wrapperStyle
  }, iconList.filter(function (icon) {
    return !icon.name.includes('wfp-hum--') && !icon.name.includes('logo');
  }).map(function (icon) {
    return /*#__PURE__*/React.createElement(IconList, {
      icon: icon
    });
  })));
};

export default IconsComponent;