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

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

import React from 'react';
import styled from 'styled-components';
import { useClickOutside } from '@sentecacommerce-theme/lib';
import { IconArrowDown, Typography } from '../../../../Common';
import { activateTab } from '../utils';
export var Navigation = (_ref) => {
  var {
    data
  } = _ref;
  var [isOpened, setIsOpened] = React.useState(false);
  var optionsRef = React.useRef(null);
  var [selectedOption, setSelectedOption] = React.useState('');
  React.useEffect(() => {
    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 = (label, id) => {
    var _newTab$parentElement, _newTab$parentElement2, _newTab$parentElement3;

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

  useClickOutside(optionsRef, () => setIsOpened(false), [optionsRef]);
  return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(MainContainer, {
    onClick: () => setIsOpened(!isOpened),
    ref: optionsRef
  }, /*#__PURE__*/React.createElement(Container, {
    isOpened: isOpened
  }, /*#__PURE__*/React.createElement(Select, null, /*#__PURE__*/React.createElement(Typography, {
    variant: "6"
  }, selectedOption), /*#__PURE__*/React.createElement(ToggleContainer, {
    isOpened: isOpened
  }, /*#__PURE__*/React.createElement(IconArrowDown, null)))), isOpened ? /*#__PURE__*/React.createElement(Content, null, data == null ? void 0 : data.map((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.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(Option, {
      onClick: !isRoot ? () => handleOptionChange(el.label, el.parentId) : undefined,
      isRoot: isRoot,
      key: index
    }, /*#__PURE__*/React.createElement(Typography, {
      variant: "7"
    }, el.label)), el.children.map(chil => /*#__PURE__*/React.createElement(Option, {
      key: index,
      onClick: () => handleOptionChange(chil.label, chil.parentId)
    }, /*#__PURE__*/React.createElement(Typography, {
      variant: "7"
    }, chil.label))));
  })) : null));
};
var Container = styled.div.attrs({
  className: 'd-flex align-items-center justify-content-start py-2 px-4'
})(_templateObject || (_templateObject = _taggedTemplateLiteralLoose(["\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"])), (_ref2) => {
  var {
    theme
  } = _ref2;
  return theme.palette.grey;
}, (_ref3) => {
  var {
    theme
  } = _ref3;
  return theme.palette.secondary;
}, (_ref4) => {
  var {
    isOpened
  } = _ref4;
  return !isOpened ? '3rem' : '3rem 3rem 0 0';
}, (_ref5) => {
  var {
    isOpened
  } = _ref5;
  return isOpened && 'none';
});
var MainContainer = styled.div.attrs({
  className: 'my-3 mx-2'
})(_templateObject2 || (_templateObject2 = _taggedTemplateLiteralLoose(["\n  position: relative;\n  color: ", ";\n"])), (_ref6) => {
  var {
    theme
  } = _ref6;
  return theme.palette.grey;
});
var Select = styled.span.attrs({
  className: 'd-flex align-items-center justify-content-between'
})(_templateObject3 || (_templateObject3 = _taggedTemplateLiteralLoose(["\n  width: 100%;\n  overflow: hidden;\n"])));
var ToggleContainer = styled.div(_templateObject4 || (_templateObject4 = _taggedTemplateLiteralLoose(["\n  cursor: pointer;\n  & > svg {\n    width: 2rem;\n    transition: transform 0.25s ease;\n    transform: ", ";\n  }\n"])), props => props.isOpened && "translate(0%, 12%) rotate(180deg)");
var Content = styled.div(_templateObject5 || (_templateObject5 = _taggedTemplateLiteralLoose(["\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"])), (_ref7) => {
  var {
    theme
  } = _ref7;
  return theme.palette.secondary;
}, (_ref8) => {
  var {
    theme
  } = _ref8;
  return theme.palette.grey;
});
var Option = styled.div.attrs({
  className: 'py-3 px-4'
})(_templateObject6 || (_templateObject6 = _taggedTemplateLiteralLoose(["\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"])), (_ref9) => {
  var {
    theme
  } = _ref9;
  return theme.palette.grey;
}, props => props.isRoot && "\n  opacity: 0.5;\n  pointer-events: none;\n  ");
//# sourceMappingURL=index.js.map