"use strict";

var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");

exports.__esModule = true;
exports.CategoryTree = void 0;

var _taggedTemplateLiteralLoose2 = _interopRequireDefault(require("@babel/runtime/helpers/taggedTemplateLiteralLoose"));

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

var _styledComponents = _interopRequireDefault(require("styled-components"));

var _link = _interopRequireDefault(require("next/link"));

var _Common = require("../../../Common");

var _templateObject, _templateObject2, _templateObject3, _templateObject4;

var CategoryTree = /*#__PURE__*/_react["default"].memo(function CategoryTree(_ref) {
  var data = _ref.data,
      currentCategory = _ref.currentCategory;
  var keys = Object.keys(data || {});
  return /*#__PURE__*/_react["default"].createElement(Container, {
    selectedCategory: currentCategory
  }, keys.map(function (key) {
    return /*#__PURE__*/_react["default"].createElement(List, {
      nestedLevel: 0,
      key: "Category__" + key
    }, renderNode(data[key], [], currentCategory));
  }));
});

exports.CategoryTree = CategoryTree;

function renderNode(node, parents, currentCategoryUrl, count) {
  var _node$children, _node$name;

  if (count === void 0) {
    count = 1;
  }

  var children = node == null ? void 0 : (_node$children = node.children) == null ? void 0 : _node$children.map(function (n) {
    return renderNode(n, [].concat(parents, [n.parentId]), currentCategoryUrl, count + 1);
  });
  var isSelected = currentCategoryUrl === node.url;

  var capitalize = function capitalize(s) {
    return s.charAt(0).toUpperCase() + s.slice(1);
  };

  var name = capitalize((_node$name = node.name) == null ? void 0 : _node$name.toLowerCase());
  return /*#__PURE__*/_react["default"].createElement(NodeContainer, {
    "data-key": node.key,
    "data-url": node.url,
    key: "Node__" + node.key + "-" + node.url
  }, /*#__PURE__*/_react["default"].createElement(LinkContainer, {
    nestedLevel: count
  }, isSelected && /*#__PURE__*/_react["default"].createElement(_react["default"].Fragment, null, /*#__PURE__*/_react["default"].createElement("style", {
    dangerouslySetInnerHTML: {
      __html: getStyle([].concat(parents, [node.key]))
    }
  })), /*#__PURE__*/_react["default"].createElement(_link["default"], {
    prefetch: false,
    href: node.url,
    passHref: true
  }, /*#__PURE__*/_react["default"].createElement("a", {
    "aria-label": name == null ? void 0 : name.toLowerCase()
  }, name)), isSelected && /*#__PURE__*/_react["default"].createElement(_Common.IconTriangleRight, {
    style: {
      width: '0.5rem',
      marginBottom: '-0.2rem'
    }
  })), Boolean(children == null ? void 0 : children.length) && /*#__PURE__*/_react["default"].createElement(List, {
    nestedLevel: count
  }, children));
}

var getStyle = function getStyle(keys) {
  return keys.reduce(function (css, key) {
    return css + ("\n\n        li[data-key=\"" + key + "\"] > span > a {\n          font-weight: bold;\n        }\n\n        li[data-key=\"" + key + "\"] > ul {\n          display: block;\n          padding-bottom: 1rem;\n        }\n      ");
  }, '');
};

var NodeContainer = _styledComponents["default"].li(_templateObject || (_templateObject = (0, _taggedTemplateLiteralLoose2["default"])([""])));

var Container = _styledComponents["default"].div.attrs({
  className: 'mt-md-1'
})(_templateObject2 || (_templateObject2 = (0, _taggedTemplateLiteralLoose2["default"])(["\n  & li > ul {\n    display: none;\n  }\n"])));

var LinkContainer = _styledComponents["default"].span.attrs({
  className: 'd-flex align-items-center'
})(_templateObject3 || (_templateObject3 = (0, _taggedTemplateLiteralLoose2["default"])(["\n  position: relative;\n\n  padding: ", "rem 0;\n\n  line-height: 1.2;\n\n  & > svg {\n    position: absolute;\n    top: ", "rem;\n    left: -1rem;\n  }\n"])), function (props) {
  return 0.8 - props.nestedLevel * 0.1;
}, function (props) {
  return Math.max(0.6 - props.nestedLevel * 0.2, 0);
});

var List = _styledComponents["default"].ul(_templateObject4 || (_templateObject4 = (0, _taggedTemplateLiteralLoose2["default"])(["\n  & > li > span > a {\n    font-size: ", "rem;\n  }\n\n  padding-left: ", ";\n"])), function (props) {
  return Math.max(2 - props.nestedLevel * 0.4, 1.4);
}, function (props) {
  return props.nestedLevel > 0 ? '2rem' : 0;
});
//# sourceMappingURL=index.js.map