"use strict";

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

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

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

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

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

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

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

var _IconClose = require("../../../../../Common/Icons/IconClose");

var _templateObject, _templateObject2, _templateObject3, _templateObject4, _templateObject5, _templateObject6, _templateObject7, _templateObject8, _templateObject9, _templateObject10, _templateObject11, _templateObject12, _templateObject13;

var SelectSizeModal = function SelectSizeModal(props) {
  var _selectedVariant$offe, _item$variant, _item$variant2, _item$variant2$offer, _selectedVariant$offe6, _selectedVariant$offe7, _attributeRules$attri, _selectedVariant$imag, _selectedVariant$imag2, _selectedVariant$imag3, _selectedVariant$imag4;

  var open = props.open,
      handleClose = props.handleClose,
      title = props.title,
      onSelectCallback = props.onSelectCallback,
      setStateSizeId = props.setStateSizeId,
      stateSizeId = props.stateSizeId,
      item = props.item;

  var _usePixel = (0, _lib.usePixel)(),
      pixelAddLineItem = _usePixel.pixelAddLineItem,
      pixelRemoveLineItem = _usePixel.pixelRemoveLineItem;

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

  var _useGlobalLabels = (0, _lib.useGlobalLabels)(),
      buttons = _useGlobalLabels.buttons,
      infoMessages = _useGlobalLabels.infoMessages;

  var _useBasket = (0, _lib.useBasket)({
    productId: metaData == null ? void 0 : metaData._id,
    variantId: selectedVariant == null ? void 0 : selectedVariant._id,
    offerId: selectedVariant == null ? void 0 : (_selectedVariant$offe = selectedVariant.offer) == null ? void 0 : _selectedVariant$offe._id,
    quantity: selectedVariant == null ? void 0 : selectedVariant.quantity
  }),
      addToBasket = _useBasket.addToBasket,
      status = _useBasket.status;

  var handleChangeSize = function handleChangeSize() {
    var _selectedVariant$offe2, _selectedVariant$offe3;

    addToBasket(1);
    pixelAddLineItem({
      product: {
        id: metaData._id,
        sku: selectedVariant == null ? void 0 : selectedVariant.sku
      },
      currencyCode: selectedVariant == null ? void 0 : (_selectedVariant$offe2 = selectedVariant.offer) == null ? void 0 : (_selectedVariant$offe3 = _selectedVariant$offe2.price) == null ? void 0 : _selectedVariant$offe3.currencyCode
    });
  };

  var _useBasket2 = (0, _lib.useBasket)({
    productId: item == null ? void 0 : item.productId,
    variantId: item == null ? void 0 : (_item$variant = item.variant) == null ? void 0 : _item$variant._id,
    offerId: item == null ? void 0 : (_item$variant2 = item.variant) == null ? void 0 : (_item$variant2$offer = _item$variant2.offer) == null ? void 0 : _item$variant2$offer._id,
    onRemoveCallback: handleChangeSize
  }),
      removeFromBasket = _useBasket2.removeFromBasket;

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

  var handleAddToBasket = function handleAddToBasket() {
    var _selectedVariant$offe4, _selectedVariant$offe5;

    removeFromBasket();
    pixelRemoveLineItem({
      product: {
        id: metaData._id,
        sku: selectedVariant == null ? void 0 : selectedVariant.sku
      },
      currencyCode: selectedVariant == null ? void 0 : (_selectedVariant$offe4 = selectedVariant.offer) == null ? void 0 : (_selectedVariant$offe5 = _selectedVariant$offe4.price) == null ? void 0 : _selectedVariant$offe5.currencyCode
    }); //onAddToBag?.()

    handleClose();
  };

  var _usePrice = (0, _lib.usePrice)({
    price: selectedVariant == null ? void 0 : (_selectedVariant$offe6 = selectedVariant.offer) == null ? void 0 : _selectedVariant$offe6.price,
    discountedPrice: selectedVariant == null ? void 0 : (_selectedVariant$offe7 = selectedVariant.offer) == null ? void 0 : _selectedVariant$offe7.discountedPrice
  }),
      price = _usePrice.price,
      discountPrice = _usePrice.discountPrice;

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

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

  var allSizes = attributeRules == null ? void 0 : (_attributeRules$attri = attributeRules[attributeKeys.size]) == null ? void 0 : _attributeRules$attri.values;
  var sizeKeys = Object.keys(allSizes).sort(function (a, b) {
    return allSizes[a].extra.sort - allSizes[b].extra.sort;
  });
  var brandName = metaData.brand.name;
  var selectedColor = selectedVariant == null ? void 0 : selectedVariant.getAttribute(attributeKeys.color);
  var allPossibleSizesForSelectedColor = getCombinationsForAttributeRule(attributeKeys.color, selectedColor == null ? void 0 : selectedColor.id);
  var isInStock = status === _lib.ProductQuantityStatusEnum.Available && !!stateSizeId;
  var image = selectedVariant == null ? void 0 : (_selectedVariant$imag = selectedVariant.images) == null ? void 0 : (_selectedVariant$imag2 = _selectedVariant$imag[0]) == null ? void 0 : _selectedVariant$imag2.large;
  return /*#__PURE__*/_react["default"].createElement(_Common.Modal, {
    open: open,
    handleClose: handleClose,
    maxWidth: "88rem",
    width: "88rem",
    smallPadding: true,
    noTitlePadding: true,
    borderRadius: "normal",
    hideHeader: true,
    bottomOnMobile: true
  }, /*#__PURE__*/_react["default"].createElement(Row, null, /*#__PURE__*/_react["default"].createElement(ImageContainer, null, /*#__PURE__*/_react["default"].createElement(Desktop, null, /*#__PURE__*/_react["default"].createElement(_Common.LazyResponsiveImage, {
    breakpointSizes: {},
    defaultImageWidth: "16rem",
    imagesMap: selectedVariant == null ? void 0 : (_selectedVariant$imag3 = selectedVariant.images) == null ? void 0 : _selectedVariant$imag3[0]
  }))), /*#__PURE__*/_react["default"].createElement(Mobile, null, /*#__PURE__*/_react["default"].createElement(Row, null, /*#__PURE__*/_react["default"].createElement(ImageContainer, null, /*#__PURE__*/_react["default"].createElement(_Common.LazyResponsiveImage, {
    breakpointSizes: {},
    defaultImageWidth: "16rem",
    imagesMap: selectedVariant == null ? void 0 : (_selectedVariant$imag4 = selectedVariant.images) == null ? void 0 : _selectedVariant$imag4[0]
  })), /*#__PURE__*/_react["default"].createElement(CloseButtonContainer, {
    onClick: handleClose
  }, /*#__PURE__*/_react["default"].createElement(_Common.Button, {
    variant: "light",
    bordered: true,
    small: true,
    borderRadius: "circle",
    icon: /*#__PURE__*/_react["default"].createElement(_IconClose.IconClose, null)
  })), /*#__PURE__*/_react["default"].createElement(Content, null, Boolean(brandName) && /*#__PURE__*/_react["default"].createElement(Brand, null, brandName), /*#__PURE__*/_react["default"].createElement(Title, null, title), /*#__PURE__*/_react["default"].createElement(_Common.Price, {
    size: "tiny",
    currency: price.currency,
    price: price.value,
    hideDiscountPercentage: true,
    discountedPrice: discountPrice ? discountPrice.value : undefined
  })))), /*#__PURE__*/_react["default"].createElement(SizeListContainer, null, /*#__PURE__*/_react["default"].createElement(Desktop, null, /*#__PURE__*/_react["default"].createElement(CloseButtonContainer, {
    onClick: handleClose
  }, /*#__PURE__*/_react["default"].createElement(_Common.Button, {
    variant: "light",
    bordered: true,
    small: true,
    borderRadius: "circle",
    icon: /*#__PURE__*/_react["default"].createElement(_IconClose.IconClose, null)
  })), /*#__PURE__*/_react["default"].createElement(Content, null, brandName && /*#__PURE__*/_react["default"].createElement(Brand, null, brandName), /*#__PURE__*/_react["default"].createElement(Title, null, title), /*#__PURE__*/_react["default"].createElement(_Common.Price, {
    size: "tiny",
    currency: price.currency,
    price: price.value,
    hideDiscountPercentage: true,
    discountedPrice: discountPrice ? discountPrice.value : undefined
  }))), /*#__PURE__*/_react["default"].createElement(SelectSizeLabel, null, buttons.selectSize), /*#__PURE__*/_react["default"].createElement(_Common.ScrollView, {
    overflowDirection: "x",
    lgOverflowDirection: "y",
    maxHeight: "20rem"
  }, /*#__PURE__*/_react["default"].createElement(SizeList, null, sizeKeys.map(function (sizeId) {
    var _allPossibleSizesForS;

    var size = allSizes[sizeId];
    var isSelected = stateSizeId === sizeId;
    var isAvailable = Boolean(allPossibleSizesForSelectedColor == null ? void 0 : (_allPossibleSizesForS = allPossibleSizesForSelectedColor.combinations) == null ? void 0 : _allPossibleSizesForS[sizeId]);
    return /*#__PURE__*/_react["default"].createElement(Size, {
      isSelected: isSelected,
      key: sizeId
    }, /*#__PURE__*/_react["default"].createElement(_Common.Button, {
      borderRadius: "small",
      variant: isSelected ? 'primary' : 'gray',
      bordered: !isSelected,
      fullWidth: true,
      disabled: !isAvailable,
      withCrossOver: true,
      type: "button",
      onClick: function onClick() {
        return selectVariantBySizeAndColor(sizeId, selectedColor == null ? void 0 : selectedColor.id);
      }
    }, size.label));
  }))), /*#__PURE__*/_react["default"].createElement(ButtonContainer, null, /*#__PURE__*/_react["default"].createElement(_Common.Button, {
    type: "button",
    onClick: handleAddToBasket,
    variant: !isInStock ? 'disabled' : 'primary',
    borderRadius: "large",
    disabled: !isInStock,
    fullWidth: true
  }, isInStock && buttons.selectSize, !stateSizeId && buttons.chooseSize, status === _lib.ProductQuantityStatusEnum.OutOfStock && infoMessages.outOfStock, status === _lib.ProductQuantityStatusEnum.MaxQuantityReached && infoMessages.maxQuantity)))));
};

exports.SelectSizeModal = SelectSizeModal;

var Content = _styledComponents["default"].div.attrs({
  className: 'col-auto col-20'
})(_templateObject || (_templateObject = (0, _taggedTemplateLiteralLoose2["default"])(["\n  display: flex;\n  flex-direction: column;\n  position: relative;\n"])));

var CloseButtonContainer = _styledComponents["default"].div(_templateObject2 || (_templateObject2 = (0, _taggedTemplateLiteralLoose2["default"])(["\n  position: absolute;\n  top: -0.5rem;\n  right: 0;\n  width: fit-content;\n\n  & button {\n    padding: 0;\n\n    min-width: 3rem;\n    min-height: 3rem;\n    max-width: 3rem;\n    max-height: 3rem;\n\n    display: flex;\n    align-items: center;\n    justify-content: center;\n\n    border-width: 0;\n  }\n\n  & span {\n    position: static;\n  }\n\n  & svg {\n    height: 1.2rem;\n  }\n"])));

var Row = _styledComponents["default"].div.attrs({
  className: 'row'
})(_templateObject3 || (_templateObject3 = (0, _taggedTemplateLiteralLoose2["default"])(["\n  align-items: stretch;\n  position: relative;\n"])));

var Brand = (0, _styledComponents["default"])(_Common.Typography).attrs({
  as: 'h3',
  variant: 'base'
})(_templateObject4 || (_templateObject4 = (0, _taggedTemplateLiteralLoose2["default"])([""])));
var Title = (0, _styledComponents["default"])(_Common.Typography).attrs({
  as: 'h2',
  className: 'mb-2'
})(_templateObject5 || (_templateObject5 = (0, _taggedTemplateLiteralLoose2["default"])(["\n  font-size: 2.2rem;\n\n  @media (min-width: ", ") {\n    width: 77%;\n  }\n"])), function (_ref) {
  var theme = _ref.theme;
  return theme.breakpoints.lg.min;
});

var SizeListContainer = _styledComponents["default"].div.attrs({
  className: 'col-12 col-lg-6'
})(_templateObject6 || (_templateObject6 = (0, _taggedTemplateLiteralLoose2["default"])(["\n  @media (min-width: ", ") {\n    display: flex;\n    flex-direction: column;\n  }\n"])), function (_ref2) {
  var theme = _ref2.theme;
  return theme.breakpoints.lg.min;
});

var SelectSizeLabel = _styledComponents["default"].p.attrs({
  className: 'my-2 mt-lg-auto'
})(_templateObject7 || (_templateObject7 = (0, _taggedTemplateLiteralLoose2["default"])([""])));

var SizeList = _styledComponents["default"].div.attrs({
  className: 'row g-3 g-lg-2'
})(_templateObject8 || (_templateObject8 = (0, _taggedTemplateLiteralLoose2["default"])(["\n  flex-wrap: nowrap !important;\n\n  @media (min-width: ", ") {\n    flex-wrap: wrap !important;\n  }\n"])), function (_ref3) {
  var theme = _ref3.theme;
  return theme.breakpoints.lg.min;
});

var Size = _styledComponents["default"].div.attrs({
  className: 'col-auto col-lg-4'
})(_templateObject9 || (_templateObject9 = (0, _taggedTemplateLiteralLoose2["default"])(["\n  min-width: max(21.6%, 8.5rem);\n\n  @media (min-width: ", ") {\n    min-width: none;\n  }\n"])), function (_ref4) {
  var theme = _ref4.theme;
  return theme.breakpoints.lg.min;
});

var Desktop = _styledComponents["default"].div.attrs({
  className: 'd-none d-lg-block'
})(_templateObject10 || (_templateObject10 = (0, _taggedTemplateLiteralLoose2["default"])([""])));

var Mobile = _styledComponents["default"].div.attrs({
  className: 'd-lg-none'
})(_templateObject11 || (_templateObject11 = (0, _taggedTemplateLiteralLoose2["default"])([""])));

var ButtonContainer = _styledComponents["default"].div.attrs({
  className: 'mt-3 pt-3 mt-lg-0'
})(_templateObject12 || (_templateObject12 = (0, _taggedTemplateLiteralLoose2["default"])([""])));

var ImageContainer = _styledComponents["default"].div.attrs({
  className: 'col-auto col-lg-6'
})(_templateObject13 || (_templateObject13 = (0, _taggedTemplateLiteralLoose2["default"])(["\n  min-width: 16rem;\n\n  @media (min-width: ", ") {\n    min-width: none;\n  }\n"])), function (_ref5) {
  var theme = _ref5.theme;
  return theme.breakpoints.lg.min;
});
//# sourceMappingURL=index.js.map