"use strict";

Object.defineProperty(exports, "__esModule", {
  value: true
});
exports.default = void 0;

var _react = _interopRequireDefault(require("react"));

var _Blockquote = _interopRequireDefault(require("../../components/Blockquote"));

var _Link = _interopRequireDefault(require("../../components/Link"));

var _Icon = _interopRequireDefault(require("../../components/Icon"));

var _Module = require("../../components/Module");

var _iconsReact = require("@wfp/icons-react");

var _Button = _interopRequireDefault(require("../../components/Button"));

var _IconConverter = _interopRequireDefault(require("./IconConverter"));

var _react2 = _interopRequireDefault(require("@tippy.js/react"));

var _Tooltip = require("../../components/Tooltip");

function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }

function _extends() { _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }

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.default.createElement(_react2.default, _extends({
    interactive: true,
    content: /*#__PURE__*/_react.default.createElement("div", {
      style: {
        lineHeight: '1.2em',
        padding: '0.2em 0.5em',
        minHeight: '3rem',
        display: 'flex',
        justifyContent: 'center',
        flexDirection: 'column',
        alignItems: 'center'
      }
    }, /*#__PURE__*/_react.default.createElement(_iconsReact.DownloadGlyph, {
      description: "WFP",
      width: "150",
      height: "150",
      className: "wfp--footer-cta-logo"
    }), /*#__PURE__*/_react.default.createElement("div", {
      className: "wfp--inline-highlight",
      style: {
        fontFamily: 'monospace',
        display: 'block',
        marginTop: '1rem',
        marginBottom: '1rem',
        fontWeight: 'bold'
      }
    }, iconName), /*#__PURE__*/_react.default.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.default.createElement(_Button.default, {
      icon: _iconsReact.DownloadGlyph,
      href: "https://github.com/wfp/carbon-icons/blob/master/src/svg/".concat(iconName, ".svg"),
      small: true
    }, "View on GitHub")),
    trigger: "click"
  }, _Tooltip.tooltipStyle), /*#__PURE__*/_react.default.createElement("div", {
    style: {
      width: '12.5%'
    }
  }, /*#__PURE__*/_react.default.createElement(_Module.Module, {
    light: true,
    withHover: true
  }, /*#__PURE__*/_react.default.createElement("div", {
    style: {
      display: 'flex',
      justifyContent: 'center',
      alignItems: 'center',
      flexDirection: 'column',
      width: '100%',
      height: '55px'
    }
  }, /*#__PURE__*/_react.default.createElement(Icon, {
    color: "red",
    description: "WFP",
    width: "39",
    className: "wfp--footer-cta-logo"
  })), /*#__PURE__*/_react.default.createElement(_Module.ModuleFooter, {
    style: {
      padding: '0.2em',
      fontSize: '0.45em',
      textAlign: 'center',
      alignItems: 'center',
      justifyContent: 'center',
      minHeight: '2rem'
    }
  }, /*#__PURE__*/_react.default.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.default.createElement("div", {
    style: wrapperStyle
  }, metadata.icons.map(function (icon, i) {
    return /*#__PURE__*/_react.default.createElement(IconPreview, {
      i: i,
      icon: icon,
      iconsReact: iconsReact
    });
  }));
};

var _default = IconList;
exports.default = _default;