import _taggedTemplateLiteralLoose from "@babel/runtime/helpers/taggedTemplateLiteralLoose";
import _extends from "@babel/runtime/helpers/extends";
import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/objectWithoutPropertiesLoose";

var _templateObject, _templateObject2;

import React from 'react';
import styled from 'styled-components';
import { useProductState } from '@sentecacommerce-theme/lib';
import { Modal, Spinner } from '../../../Common';
import { Navigation } from './Navigation';
import { buildTree, setDefaultSelectedTab, setSelectedSize, removeDefaultNavigation } from './utils';
export var SizeChartModal = (_ref) => {
  var {
    open,
    html,
    handleClose
  } = _ref,
      props = _objectWithoutPropertiesLoose(_ref, ["open", "html", "handleClose"]);

  var [stateIndex, setStateIndex] = React.useState(-1);
  var [dropdown, setDropdowns] = React.useState();
  var {
    selectedVariant
  } = useProductState();
  var [isLoading, setIsLoading] = React.useState(true);
  var setIndex = React.useCallback(index => {
    setStateIndex(index);
  }, []);
  var resetIndex = React.useCallback(() => {
    setStateIndex(-1);
  }, []);
  React.useEffect(() => {
    setTimeout(() => {
      var dropdowns = buildTree();
      setDropdowns(dropdowns);
      removeDefaultNavigation();
      setSelectedSize(selectedVariant == null ? void 0 : selectedVariant.getAttribute('size').label);
      setDefaultSelectedTab();
      document.querySelectorAll('th').forEach((element, index) => {
        element.addEventListener('mouseenter', () => {
          setIndex(index);
        });
        element.addEventListener('mouseleave', () => {
          resetIndex();
        });
      });
      setIsLoading(false);
    }, 0);
    return () => {
      document.querySelectorAll('th').forEach((element, index) => {
        element.removeEventListener('mouseenter', () => {
          setIndex(index);
        });
        element.removeEventListener('mouseleave', () => {
          resetIndex();
        });
      });
    };
  }, []);
  return /*#__PURE__*/React.createElement(Modal, _extends({
    handleClose: handleClose,
    open: open
  }, props), /*#__PURE__*/React.createElement(Container, null, isLoading && /*#__PURE__*/React.createElement(Spinner, null), !isLoading && /*#__PURE__*/React.createElement(Navigation, {
    data: dropdown
  }), /*#__PURE__*/React.createElement(Table, {
    isLoading: isLoading,
    stateIndex: stateIndex,
    dangerouslySetInnerHTML: {
      __html: html
    }
  })));
};
var Container = styled.div(_templateObject || (_templateObject = _taggedTemplateLiteralLoose(["\n  position: relative;\n  background-color: #fff;\n  min-width: 200px;\n"])));
var Table = styled.div(_templateObject2 || (_templateObject2 = _taggedTemplateLiteralLoose(["\n  display: ", ";\n  .nav {\n    display: flex;\n    flex-wrap: wrap;\n    justify-content: flex-start;\n    list-style: none;\n  }\n\n  .nav-tabs {\n    border-bottom: 1px solid #dee2e6;\n    width: 100%;\n    list-style: none;\n\n    @media (max-width: 768px) {\n      display: flex;\n      flex-direction: column;\n    }\n\n    li {\n      margin-bottom: 0.4rem;\n      font-weight: 500;\n    }\n  }\n\n  .nav-item {\n    cursor: pointer;\n  }\n\n  .btn-black {\n    background: #fff;\n    color: #111;\n    border: 1px solid #111;\n    transition: border-color 0.2s cubic-bezier(0.4, 0, 0.2, 1),\n      padding 0.2s cubic-bezier(0.4, 0, 0.2, 1),\n      font-size 0.2s cubic-bezier(0.4, 0, 0.2, 1),\n      opacity 0.2s cubic-bezier(0.4, 0, 0.2, 1);\n\n    display: block;\n\n    border-radius: 1px;\n\n    text-transform: uppercase;\n    padding: 0.5375rem 1rem;\n    font-size: 0.875rem;\n\n    @media (max-width: 768px) {\n      font-size: 1.2rem;\n    }\n\n    &:hover {\n      opacity: 0.6;\n    }\n\n    @media (min-width: 768px) {\n      padding: 0.5375rem 1.7rem;\n      font-size: 1.5rem;\n    }\n  }\n\n  .btn-black.active {\n    background: #111;\n    color: #fff;\n  }\n\n  .table {\n    width: 100%;\n\n    max-width: 100%;\n    margin-bottom: 1rem;\n    background-color: transparent;\n\n    .activated {\n      background: #111 !important;\n      color: #fff;\n    }\n\n    td {\n      padding: 0.75rem;\n      vertical-align: top;\n      border-top: 1px solid #dee2e6;\n\n      transition: background 0.5s;\n\n      &:nth-child(", ") {\n        background-color: rgba(0, 0, 0, 0.2);\n        color: #000;\n      }\n    }\n  }\n\n  th[scope='col'] {\n    background: black;\n\n    cursor: pointer;\n\n    text-align: center;\n\n    color: #fff;\n  }\n\n  tbody {\n    tr:nth-child(even) {\n      background: #e4e4e4;\n    }\n\n    text-align: center;\n\n    tr {\n      font-size: 1.5rem;\n    }\n  }\n\n  .tab-pane {\n    display: none;\n  }\n\n  .active {\n    display: block;\n  }\n\n  .section {\n    margin-top: 5rem;\n  }\n"])), props => props.isLoading ? 'none' : 'block', props => props.stateIndex + 1);
//# sourceMappingURL=index.js.map