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

/* eslint-disable no-console */
import React from 'react';
import Blockquote from '../../components/Blockquote';
import Link from '../../components/Link';
import Icon from '../../components/Icon';
import { Module, ModuleFooter } from '../../components/Module';
import { DownloadGlyph } from '@wfp/icons-react';
import Button from '../../components/Button';
import IconConverter from './IconConverter';
import Tippy from '@tippy.js/react';
import { tooltipStyle } from '../../components/Tooltip';

var IconPreview = function IconPreview(_ref) {
  var _icon$moduleInfo;

  var i = _ref.i,
      icon = _ref.icon,
      iconsReact = _ref.iconsReact;
  var iconName = icon.name;
  var name = (_icon$moduleInfo = icon.moduleInfo) !== null && _icon$moduleInfo !== void 0 && _icon$moduleInfo.global ? "".concat(icon.moduleInfo.global) : icon.output[0].moduleName;
  var Icon = iconsReact[name];
  if (!Icon) return null;
  if (i !== 10) 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(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, {
    color: "red",
    description: "WFP",
    width: "39",
    className: "wfp--footer-cta-logo"
  })), /*#__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 IconList = function IconList(_ref2) {
  var iconsReact = _ref2.iconsReact,
      metadata = _ref2.metadata;
  console.log(iconsReact, metadata);
  console.log('metadata', iconsReact);
  return /*#__PURE__*/React.createElement("div", {
    style: wrapperStyle
  }, metadata.icons.map(function (icon, i) {
    return /*#__PURE__*/React.createElement(IconPreview, {
      i: i,
      icon: icon,
      iconsReact: iconsReact
    });
  }));
};

export default IconList;