"use strict";

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

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

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

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

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

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

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

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

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

var _Navigation = require("./Navigation");

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

var _templateObject, _templateObject2;

var SizeChartModal = function SizeChartModal(_ref) {
  var open = _ref.open,
      html = _ref.html,
      handleClose = _ref.handleClose,
      props = (0, _objectWithoutPropertiesLoose2["default"])(_ref, ["open", "html", "handleClose"]);

  var _React$useState = _react["default"].useState(-1),
      stateIndex = _React$useState[0],
      setStateIndex = _React$useState[1];

  var _React$useState2 = _react["default"].useState(),
      dropdown = _React$useState2[0],
      setDropdowns = _React$useState2[1];

  var _useProductState = (0, _lib.useProductState)(),
      selectedVariant = _useProductState.selectedVariant;

  var _React$useState3 = _react["default"].useState(true),
      isLoading = _React$useState3[0],
      setIsLoading = _React$useState3[1];

  var setIndex = _react["default"].useCallback(function (index) {
    setStateIndex(index);
  }, []);

  var resetIndex = _react["default"].useCallback(function () {
    setStateIndex(-1);
  }, []);

  _react["default"].useEffect(function () {
    setTimeout(function () {
      var dropdowns = (0, _utils.buildTree)();
      setDropdowns(dropdowns);
      (0, _utils.removeDefaultNavigation)();
      (0, _utils.setSelectedSize)(selectedVariant == null ? void 0 : selectedVariant.getAttribute('size').label);
      (0, _utils.setDefaultSelectedTab)();
      document.querySelectorAll('th').forEach(function (element, index) {
        element.addEventListener('mouseenter', function () {
          setIndex(index);
        });
        element.addEventListener('mouseleave', function () {
          resetIndex();
        });
      });
      setIsLoading(false);
    }, 0);
    return function () {
      document.querySelectorAll('th').forEach(function (element, index) {
        element.removeEventListener('mouseenter', function () {
          setIndex(index);
        });
        element.removeEventListener('mouseleave', function () {
          resetIndex();
        });
      });
    };
  }, []);

  return /*#__PURE__*/_react["default"].createElement(_Common.Modal, (0, _extends2["default"])({
    handleClose: handleClose,
    open: open
  }, props), /*#__PURE__*/_react["default"].createElement(Container, null, isLoading && /*#__PURE__*/_react["default"].createElement(_Common.Spinner, null), !isLoading && /*#__PURE__*/_react["default"].createElement(_Navigation.Navigation, {
    data: dropdown
  }), /*#__PURE__*/_react["default"].createElement(Table, {
    isLoading: isLoading,
    stateIndex: stateIndex,
    dangerouslySetInnerHTML: {
      __html: html
    }
  })));
};

exports.SizeChartModal = SizeChartModal;

var Container = _styledComponents["default"].div(_templateObject || (_templateObject = (0, _taggedTemplateLiteralLoose2["default"])(["\n  position: relative;\n  background-color: #fff;\n  min-width: 200px;\n"])));

var Table = _styledComponents["default"].div(_templateObject2 || (_templateObject2 = (0, _taggedTemplateLiteralLoose2["default"])(["\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"])), function (props) {
  return props.isLoading ? 'none' : 'block';
}, function (props) {
  return props.stateIndex + 1;
});
//# sourceMappingURL=index.js.map