import _taggedTemplateLiteralLoose from "@babel/runtime/helpers/taggedTemplateLiteralLoose";

var _templateObject, _templateObject2, _templateObject3, _templateObject4;

import React from 'react';
import styled from 'styled-components';
import Link from 'next/link';
import { IconTriangleRight } from '../../../Common';
export var CategoryTree = /*#__PURE__*/React.memo(function CategoryTree(_ref) {
  var {
    data,
    currentCategory
  } = _ref;
  var keys = Object.keys(data || {});
  return /*#__PURE__*/React.createElement(Container, {
    selectedCategory: currentCategory
  }, keys.map(key => /*#__PURE__*/React.createElement(List, {
    nestedLevel: 0,
    key: "Category__" + key
  }, renderNode(data[key], [], currentCategory))));
});

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(n => renderNode(n, [...parents, n.parentId], currentCategoryUrl, count + 1));
  var isSelected = currentCategoryUrl.replaceAll('&', '&filter=') === node.url;

  var capitalize = s => s.charAt(0).toUpperCase() + s.slice(1);

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

var getStyle = keys => {
  return keys.reduce((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 = styled.li(_templateObject || (_templateObject = _taggedTemplateLiteralLoose([""])));
var Container = styled.div.attrs({
  className: 'mt-md-1'
})(_templateObject2 || (_templateObject2 = _taggedTemplateLiteralLoose(["\n  & li > ul {\n    display: none;\n  }\n"])));
var LinkContainer = styled.span.attrs({
  className: 'd-flex align-items-center'
})(_templateObject3 || (_templateObject3 = _taggedTemplateLiteralLoose(["\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"])), props => 0.8 - props.nestedLevel * 0.1, props => Math.max(0.6 - props.nestedLevel * 0.2, 0));
var List = styled.ul(_templateObject4 || (_templateObject4 = _taggedTemplateLiteralLoose(["\n  & > li > span > a {\n    font-size: ", "rem;\n  }\n\n  padding-left: ", ";\n"])), props => Math.max(2 - props.nestedLevel * 0.4, 1.4), props => props.nestedLevel > 0 ? '2rem' : 0);
//# sourceMappingURL=index.js.map