"use strict";

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

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

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

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

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

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

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

var _SizeChart = require("../SizeChart");

var _templateObject, _templateObject2, _templateObject3, _templateObject4;

var AllSizesList = function AllSizesList(_ref) {
  var _attributeRules$attri, _content$name, _content$description, _allSizes$stateSizeId;

  var stateSizeId = _ref.stateSizeId,
      setStateSizeId = _ref.setStateSizeId,
      onSelectCallback = _ref.onSelectCallback;

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

  var _useConfigState = (0, _lib.useConfigState)(),
      attributeKeys = _useConfigState.attributeKeys,
      views = _useConfigState.views;

  var labels = (0, _lib.useLocalLabels)();

  var _useUIFunctions = (0, _lib.useUIFunctions)(),
      enqueueView = _useUIFunctions.enqueueView;

  var _useProductFunctions = (0, _lib.useProductFunctions)(),
      selectVariantByCombination = _useProductFunctions.selectVariantByCombination,
      getVariantByCombination = _useProductFunctions.getVariantByCombination,
      getCombinationsForAttributeRule = _useProductFunctions.getCombinationsForAttributeRule;

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

  var _React$useState2 = _react["default"].useState({}),
      content = _React$useState2[0],
      setContent = _React$useState2[1];

  var fetchSizeChart = function fetchSizeChart() {
    var _metaData$rootCategor, _metaData$brand;

    fetch("/hub/size-charts/search?category=" + (metaData == null ? void 0 : (_metaData$rootCategor = metaData.rootCategory) == null ? void 0 : _metaData$rootCategor._id) + "&brand=" + (metaData == null ? void 0 : (_metaData$brand = metaData.brand) == null ? void 0 : _metaData$brand._id), {
      method: 'GET',
      headers: {
        Accept: 'application/json',
        'Content-Type': 'application/json'
      }
    }).then(function (data) {
      return data.json().then(function (result) {
        setContent(result);
        setSizeChart(true);
      });
    })["catch"](console.error);
  };

  var selectedColor = selectedVariant == null ? void 0 : selectedVariant.getAttribute(attributeKeys.color);

  var selectVariantBySizeAndColor = function selectVariantBySizeAndColor(sizeId, colorId) {
    setStateSizeId(sizeId);
    selectVariantByCombination(sizeId, colorId);
    onSelectCallback == null ? void 0 : onSelectCallback();
  };

  var allSizes = attributeRules == null ? void 0 : (_attributeRules$attri = attributeRules[attributeKeys.size]) == null ? void 0 : _attributeRules$attri.values;
  var unavailableSizes = Object.keys(allSizes).filter(function (size) {
    var _getVariantByCombinat;

    var isAvailable = (_getVariantByCombinat = getVariantByCombination(size, selectedColor == null ? void 0 : selectedColor.id)) == null ? void 0 : _getVariantByCombinat.isAvailable;
    return !isAvailable;
  });
  var allPossibleSizesForSelectedColor = getCombinationsForAttributeRule(attributeKeys.color, selectedColor == null ? void 0 : selectedColor.id);

  _react["default"].useEffect(function () {
    stateSizeId && selectVariantBySizeAndColor(stateSizeId, selectedColor == null ? void 0 : selectedColor.id);
  }, [stateSizeId]);

  if (!allSizes) return null;
  var sortedSizes = Object.keys(allSizes).sort(function (a, b) {
    return allSizes[a].extra.sort - allSizes[b].extra.sort;
  });
  return /*#__PURE__*/_react["default"].createElement(_react["default"].Fragment, null, showSizeChart && /*#__PURE__*/_react["default"].createElement(_SizeChart.SizeChartModal, {
    title: content == null ? void 0 : (_content$name = content.name) == null ? void 0 : _content$name[0].value,
    open: showSizeChart,
    html: content == null ? void 0 : (_content$description = content.description) == null ? void 0 : _content$description[0].value,
    handleClose: function handleClose() {
      return setSizeChart(false);
    }
  }), /*#__PURE__*/_react["default"].createElement("div", {
    className: "col-12"
  }, /*#__PURE__*/_react["default"].createElement(SizeLabelContainer, null, /*#__PURE__*/_react["default"].createElement("span", null, labels.selectedSize, ' ', /*#__PURE__*/_react["default"].createElement("strong", null, (_allSizes$stateSizeId = allSizes[stateSizeId]) == null ? void 0 : _allSizes$stateSizeId.label)), /*#__PURE__*/_react["default"].createElement("span", {
    style: {
      cursor: 'pointer',
      textDecoration: 'underline',
      userSelect: 'none'
    },
    onClick: function onClick() {
      return fetchSizeChart();
    }
  }, labels.sizeChart)), /*#__PURE__*/_react["default"].createElement(OptionList, null, sortedSizes.map(function (sizeId) {
    var _getVariantByCombinat2;

    var currentSize = allSizes[sizeId];
    var isSelected = stateSizeId === sizeId;
    var isAvailable = (_getVariantByCombinat2 = getVariantByCombination(sizeId, selectedColor == null ? void 0 : selectedColor.id)) == null ? void 0 : _getVariantByCombinat2.isAvailable;
    return /*#__PURE__*/_react["default"].createElement(OptionListItem, {
      key: sizeId + "__" + isSelected,
      disabled: !isAvailable
    }, /*#__PURE__*/_react["default"].createElement(_Common.Button, {
      variant: isSelected ? 'primary' : 'light',
      bordered: !isSelected,
      fullWidth: true,
      disabled: !isAvailable,
      withCrossOver: true,
      type: "button",
      onClick: function onClick() {
        return selectVariantBySizeAndColor(sizeId, selectedColor == null ? void 0 : selectedColor.id);
      }
    }, currentSize.label));
  })), Boolean(unavailableSizes.length) && /*#__PURE__*/_react["default"].createElement(SubForRestock, {
    onClick: function onClick() {
      return enqueueView(views.subForProduct, {
        selectedVariant: selectedVariant,
        sizes: allSizes,
        setStateSizeId: setStateSizeId,
        unavailableSizes: unavailableSizes
      });
    }
  }, labels.restock)));
};

exports.AllSizesList = AllSizesList;

var SizeLabelContainer = _styledComponents["default"].div.attrs({
  className: 'd-flex mb-3'
})(_templateObject || (_templateObject = (0, _taggedTemplateLiteralLoose2["default"])(["\n  color: ", ";\n  text-transform: uppercase;\n  font-size: 13px;\n  line-height: 20px;\n\n  & span:last-of-type {\n    margin-left: auto;\n    color: ", ";\n  }\n"])), function (_ref2) {
  var theme = _ref2.theme;
  return theme.palette.primary;
}, function (_ref3) {
  var theme = _ref3.theme;
  return theme.palette.hint;
});

var OptionList = _styledComponents["default"].ul.attrs({
  className: 'row row-cols-md-6 row-cols-5 g-2 mb-4'
})(_templateObject2 || (_templateObject2 = (0, _taggedTemplateLiteralLoose2["default"])([""])));

var OptionListItem = _styledComponents["default"].li.attrs({
  className: ''
})(_templateObject3 || (_templateObject3 = (0, _taggedTemplateLiteralLoose2["default"])(["\n  text-align: center;\n  & button {\n    padding: 0 !important;\n  }\n  ", "\n\n  @media (max-width: ", ") {\n    & button:hover {\n      background: ", " !important;\n      border-color: ", " !important;\n    }\n  }\n"])), function (props) {
  return props.disabled && "\n      opacity: 0.5;\n      border: none;\n      & button{\n        pointer-events: none;\n        cursor: not-allowed;\n      }\n    ";
}, function (_ref4) {
  var theme = _ref4.theme;
  return theme.breakpoints.md.max;
}, function (_ref5) {
  var theme = _ref5.theme;
  return theme.palette.primary;
}, function (_ref6) {
  var theme = _ref6.theme;
  return theme.palette.primary;
});

var SubForRestock = (0, _styledComponents["default"])(_Common.Typography).attrs({
  variant: '5',
  className: 'mb-2'
})(_templateObject4 || (_templateObject4 = (0, _taggedTemplateLiteralLoose2["default"])(["\n  text-decoration: underline;\n  cursor: pointer;\n  margin-top: 0.6rem;\n  color: ", ";\n"])), function (_ref7) {
  var theme = _ref7.theme;
  return theme.palette.primary;
});
//# sourceMappingURL=index.js.map