"use strict";

function _typeof(obj) { "@babel/helpers - typeof"; if (typeof Symbol === "function" && typeof Symbol.iterator === "symbol") { _typeof = function _typeof(obj) { return typeof obj; }; } else { _typeof = function _typeof(obj) { return obj && typeof Symbol === "function" && obj.constructor === Symbol && obj !== Symbol.prototype ? "symbol" : typeof obj; }; } return _typeof(obj); }

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

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

var _addonLinks = require("@storybook/addon-links");

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

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

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

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

var _metadata = _interopRequireDefault(require("@wfp/icons/metadata.json"));

var Icons = _interopRequireWildcard(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 _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }

function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || _typeof(obj) !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }

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 iconList = _metadata.default.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.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(Icons.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(camelCaseFromHyphnated('icon--' + iconName), "}\nfrom '@wfp/icons-react'")), /*#__PURE__*/_react.default.createElement(_Button.default, {
      icon: Icons.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, {
    description: "WFP",
    width: "39"
  })), /*#__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 IconsComponent = function IconsComponent() {
  return /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement("p", null, "For Usage please take a look at the", ' ', /*#__PURE__*/_react.default.createElement(_Link.default, {
    onClick: (0, _addonLinks.linkTo)('Components|Icon', 'Default')
  }, "Icon"), " component or", ' ', /*#__PURE__*/_react.default.createElement(_Link.default, {
    onClick: (0, _addonLinks.linkTo)(' Getting started', 'Developers')
  }, "Usage for Developers"), "."), /*#__PURE__*/_react.default.createElement(_Blockquote.default, {
    title: "Notice"
  }, "WFP UI Icons is using a fork of", ' ', /*#__PURE__*/_react.default.createElement(_Link.default, {
    href: "https://github.com/IBM/carbon-icons",
    target: "_blank"
  }, "Carbon Icons"), ". You can find additional information in the", ' ', /*#__PURE__*/_react.default.createElement(_Link.default, {
    href: "http://www.carbondesignsystem.com/guidelines/iconography",
    target: "_blank"
  }, "Carbon Design System")), /*#__PURE__*/_react.default.createElement("h3", null, "Generate custom Icon"), /*#__PURE__*/_react.default.createElement("p", null, "Generate a custom icon which can be used inside the", ' ', /*#__PURE__*/_react.default.createElement("span", {
    className: "wfp--inline-highlight"
  }, "icon"), " prop of the", ' ', /*#__PURE__*/_react.default.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.default.createElement(_IconConverter.default, null), /*#__PURE__*/_react.default.createElement("h3", null, "Humanitarian Thematic Icon Set"), /*#__PURE__*/_react.default.createElement("p", null, "The ", /*#__PURE__*/_react.default.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.default.createElement(_Link.default, {
    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.default.createElement("p", null, "WFP has also created some", ' ', /*#__PURE__*/_react.default.createElement(_Link.default, {
    href: "http://newgo.wfp.org/documents/humanitarian-thematic-icon-set-png",
    target: "_blank"
  }, "WFP specific icons"), ' ', "to add to this set."), /*#__PURE__*/_react.default.createElement("h3", null, "List of Icons"), /*#__PURE__*/_react.default.createElement(_Link.default, {
    href: "https://github.com/wfp/carbon-icons/tree/master/src/svg",
    target: "_blank"
  }, "Source svg files"), /*#__PURE__*/_react.default.createElement("h4", null, "WFP Logos"), /*#__PURE__*/_react.default.createElement("div", {
    style: wrapperStyle
  }, iconList.filter(function (icon) {
    return icon.name.includes('logo');
  }).map(function (icon) {
    return /*#__PURE__*/_react.default.createElement(IconList, {
      icon: icon
    });
  })), /*#__PURE__*/_react.default.createElement("h4", null, "WFP Humanitatian Icons"), /*#__PURE__*/_react.default.createElement("div", {
    style: wrapperStyle
  }, iconList.filter(function (icon) {
    return icon.name.includes('wfp-hum--');
  }).map(function (icon) {
    return /*#__PURE__*/_react.default.createElement(IconList, {
      icon: icon
    });
  })), /*#__PURE__*/_react.default.createElement("h4", null, "UI Icons"), /*#__PURE__*/_react.default.createElement("div", {
    style: wrapperStyle
  }, iconList.filter(function (icon) {
    return !icon.name.includes('wfp-hum--') && !icon.name.includes('logo');
  }).map(function (icon) {
    return /*#__PURE__*/_react.default.createElement(IconList, {
      icon: icon
    });
  })));
};

var _default = IconsComponent;
exports.default = _default;