"use strict";

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

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

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

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

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

var _lib = require("@sentecacommerce-theme/lib");

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

var _utils = require("../utils");

var _templateObject, _templateObject2, _templateObject3, _templateObject4, _templateObject5, _templateObject6;

var Navigation = function Navigation(_ref) {
  var data = _ref.data;

  var _React$useState = _react["default"].useState(false),
      isOpened = _React$useState[0],
      setIsOpened = _React$useState[1];

  var optionsRef = _react["default"].useRef(null);

  var _React$useState2 = _react["default"].useState(''),
      selectedOption = _React$useState2[0],
      setSelectedOption = _React$useState2[1];

  _react["default"].useEffect(function () {
    var _data$0$children$0$la, _data$, _data$$children, _data$$children$, _data$2;

    var defaultOption = (_data$0$children$0$la = data == null ? void 0 : (_data$ = data[0]) == null ? void 0 : (_data$$children = _data$.children) == null ? void 0 : (_data$$children$ = _data$$children[0]) == null ? void 0 : _data$$children$.label) != null ? _data$0$children$0$la : data == null ? void 0 : (_data$2 = data[0]) == null ? void 0 : _data$2.label;
    setSelectedOption(defaultOption);
  }, [data]);

  var handleOptionChange = function handleOptionChange(label, id) {
    var _newTab$parentElement, _newTab$parentElement2, _newTab$parentElement3;

    setSelectedOption(label);
    document.querySelectorAll('.tab-pane').forEach(function (item) {
      return item.classList.remove('active', 'show');
    });
    var newTab = document.querySelector(id);
    (0, _utils.activateTab)(newTab);
    (0, _utils.activateTab)(newTab == null ? void 0 : (_newTab$parentElement = newTab.parentElement) == null ? void 0 : _newTab$parentElement.parentElement);
    (0, _utils.activateTab)(newTab == null ? void 0 : (_newTab$parentElement2 = newTab.parentElement) == null ? void 0 : (_newTab$parentElement3 = _newTab$parentElement2.parentElement) == null ? void 0 : _newTab$parentElement3.parentElement);
  };

  (0, _lib.useClickOutside)(optionsRef, function () {
    return setIsOpened(false);
  }, [optionsRef]);
  return /*#__PURE__*/_react["default"].createElement(_react["default"].Fragment, null, /*#__PURE__*/_react["default"].createElement(MainContainer, {
    onClick: function onClick() {
      return setIsOpened(!isOpened);
    },
    ref: optionsRef
  }, /*#__PURE__*/_react["default"].createElement(Container, {
    isOpened: isOpened
  }, /*#__PURE__*/_react["default"].createElement(Select, null, /*#__PURE__*/_react["default"].createElement(_Common.Typography, {
    variant: "6"
  }, selectedOption), /*#__PURE__*/_react["default"].createElement(ToggleContainer, {
    isOpened: isOpened
  }, /*#__PURE__*/_react["default"].createElement(_Common.IconArrowDown, null)))), isOpened ? /*#__PURE__*/_react["default"].createElement(Content, null, data == null ? void 0 : data.map(function (el, index) {
    var _el$children;

    var isRoot = (el == null ? void 0 : (_el$children = el.children) == null ? void 0 : _el$children.length) > 0;
    return /*#__PURE__*/_react["default"].createElement(_react["default"].Fragment, null, /*#__PURE__*/_react["default"].createElement(Option, {
      onClick: !isRoot ? function () {
        return handleOptionChange(el.label, el.parentId);
      } : undefined,
      isRoot: isRoot,
      key: index
    }, /*#__PURE__*/_react["default"].createElement(_Common.Typography, {
      variant: "7"
    }, el.label)), el.children.map(function (chil) {
      return /*#__PURE__*/_react["default"].createElement(Option, {
        key: index,
        onClick: function onClick() {
          return handleOptionChange(chil.label, chil.parentId);
        }
      }, /*#__PURE__*/_react["default"].createElement(_Common.Typography, {
        variant: "7"
      }, chil.label));
    }));
  })) : null));
};

exports.Navigation = Navigation;

var Container = _styledComponents["default"].div.attrs({
  className: 'd-flex align-items-center justify-content-start py-2 px-4'
})(_templateObject || (_templateObject = (0, _taggedTemplateLiteralLoose2["default"])(["\n  width: 100%;\n  cursor: pointer;\n  border: 0.1rem solid ", ";\n  background-color: ", ";\n  min-height: 4rem;\n  border-radius: ", ";\n  border-bottom: ", ";\n\n  &:focus {\n    outline: none;\n  }\n"])), function (_ref2) {
  var theme = _ref2.theme;
  return theme.palette.grey;
}, function (_ref3) {
  var theme = _ref3.theme;
  return theme.palette.secondary;
}, function (_ref4) {
  var isOpened = _ref4.isOpened;
  return !isOpened ? '3rem' : '3rem 3rem 0 0';
}, function (_ref5) {
  var isOpened = _ref5.isOpened;
  return isOpened && 'none';
});

var MainContainer = _styledComponents["default"].div.attrs({
  className: 'my-3 mx-2'
})(_templateObject2 || (_templateObject2 = (0, _taggedTemplateLiteralLoose2["default"])(["\n  position: relative;\n  color: ", ";\n"])), function (_ref6) {
  var theme = _ref6.theme;
  return theme.palette.grey;
});

var Select = _styledComponents["default"].span.attrs({
  className: 'd-flex align-items-center justify-content-between'
})(_templateObject3 || (_templateObject3 = (0, _taggedTemplateLiteralLoose2["default"])(["\n  width: 100%;\n  overflow: hidden;\n"])));

var ToggleContainer = _styledComponents["default"].div(_templateObject4 || (_templateObject4 = (0, _taggedTemplateLiteralLoose2["default"])(["\n  cursor: pointer;\n  & > svg {\n    width: 2rem;\n    transition: transform 0.25s ease;\n    transform: ", ";\n  }\n"])), function (props) {
  return props.isOpened && "translate(0%, 12%) rotate(180deg)";
});

var Content = _styledComponents["default"].div(_templateObject5 || (_templateObject5 = (0, _taggedTemplateLiteralLoose2["default"])(["\n  z-index: 2;\n  position: absolute;\n  width: 100%;\n  bottom: auto;\n  left: auto;\n  background-color: ", ";\n  border: 0.1rem solid ", ";\n  border-radius: 0 0 3rem 3rem;\n"])), function (_ref7) {
  var theme = _ref7.theme;
  return theme.palette.secondary;
}, function (_ref8) {
  var theme = _ref8.theme;
  return theme.palette.grey;
});

var Option = _styledComponents["default"].div.attrs({
  className: 'py-3 px-4'
})(_templateObject6 || (_templateObject6 = (0, _taggedTemplateLiteralLoose2["default"])(["\n  transition: background-color 0.3s cubic-bezier(0.4, 0, 0.2, 1);\n  cursor: pointer;\n  &:last-child {\n    border-radius: 0 0 3rem 3rem;\n  }\n  &:hover {\n    background-color: ", ";\n  }\n\n  ", "\n"])), function (_ref9) {
  var theme = _ref9.theme;
  return theme.palette.grey;
}, function (props) {
  return props.isRoot && "\n  opacity: 0.5;\n  pointer-events: none;\n  ";
});
//# sourceMappingURL=index.js.map