"use strict";

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

var _interopRequireWildcard = require("@babel/runtime/helpers/interopRequireWildcard");

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

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

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

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

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

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

var _CTA = require("./CTA");

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

var AddToBagModal = function AddToBagModal(_ref) {
  var _selectedVariant$offe, _selectedVariant$offe2, _selectedVariant$imag;

  var modalState = _ref.modalState,
      metaData = _ref.metaData,
      selectedVariant = _ref.selectedVariant;
  var popupRef = (0, _react.useRef)(null);

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

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

  var _useGlobalLabels = (0, _lib.useGlobalLabels)(),
      commonMessages = _useGlobalLabels.commonMessages;

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

  var handleClose = (0, _react.useCallback)(function () {
    closeViewById(views.bagModal);
  }, []);

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

  var capitalize = function capitalize(s) {
    return s ? s.charAt(0).toUpperCase() + s.slice(1) : '';
  };

  var sizeLabel = capitalize(selectedVariant == null ? void 0 : selectedVariant.getAttribute(attributeKeys.size).name);
  var sizeValue = selectedVariant == null ? void 0 : selectedVariant.getAttribute(attributeKeys.size).label;
  (0, _react.useEffect)(function () {
    var _selectedVariant$offe3, _selectedVariant$offe4;

    window.scrollTo(0, 0);
    pixelAddLineItem({
      product: {
        id: metaData._id,
        sku: selectedVariant == null ? void 0 : selectedVariant.sku
      },
      currencyCode: selectedVariant == null ? void 0 : (_selectedVariant$offe3 = selectedVariant.offer) == null ? void 0 : (_selectedVariant$offe4 = _selectedVariant$offe3.price) == null ? void 0 : _selectedVariant$offe4.currencyCode
    });
  }, []);

  var handleKey = _react["default"].useCallback(function (e) {
    if (e.key === 'Escape') {
      return handleClose();
    }
  }, [handleClose]);

  (0, _react.useEffect)(function () {
    window.addEventListener('keydown', handleKey);
    return function () {
      window.removeEventListener('keydown', handleKey);
    };
  }, [handleKey]);
  var timeOut = setTimeout(function () {
    return handleClose();
  }, 3000);

  var _authApi$isAuthentica = _lib.authApi.isAuthenticated(),
      isAuthenticated = _authApi$isAuthentica.data;

  (0, _lib.useClickOutside)(popupRef, function () {
    return handleClose();
  }, [popupRef]);
  return /*#__PURE__*/_react["default"].createElement(_lib.Portal, null, /*#__PURE__*/_react["default"].createElement(Background, null), /*#__PURE__*/_react["default"].createElement(_lib.OverflowHidden, null), /*#__PURE__*/_react["default"].createElement(Container, null, /*#__PURE__*/_react["default"].createElement(PopupContainer, null, /*#__PURE__*/_react["default"].createElement(PopupInner, {
    ref: popupRef,
    onMouseEnter: function onMouseEnter() {
      return clearTimeout(timeOut);
    }
  }, /*#__PURE__*/_react["default"].createElement(Header, null, commonMessages.addedTo, ' ', modalState.type === 'basket' && commonMessages.bag, modalState.type === 'wishlist' && commonMessages.favorites), /*#__PURE__*/_react["default"].createElement(ProductContainer, null, /*#__PURE__*/_react["default"].createElement(ImageWrapper, null, /*#__PURE__*/_react["default"].createElement(_Common.LazyResponsiveImage, {
    imagesMap: selectedVariant == null ? void 0 : (_selectedVariant$imag = selectedVariant.images) == null ? void 0 : _selectedVariant$imag[0],
    defaultImageWidth: "small",
    breakpointSizes: {}
  })), /*#__PURE__*/_react["default"].createElement(ProductDetails, null, /*#__PURE__*/_react["default"].createElement("span", null, metaData.name), /*#__PURE__*/_react["default"].createElement(Label, null, metaData.brand.name || commonMessages.brand), /*#__PURE__*/_react["default"].createElement("span", null, sizeLabel, ":\xA0", /*#__PURE__*/_react["default"].createElement("span", {
    style: {
      color: theme.palette.hint
    }
  }, sizeValue)), /*#__PURE__*/_react["default"].createElement(Price, null, discountPrice ? /*#__PURE__*/_react["default"].createElement(_react["default"].Fragment, null, /*#__PURE__*/_react["default"].createElement(OldPrice, null, price.displayValue), /*#__PURE__*/_react["default"].createElement(Row, null, /*#__PURE__*/_react["default"].createElement(DiscountPrice, null, discountPrice.displayValue), /*#__PURE__*/_react["default"].createElement(DiscountPercentageWrapper, null, /*#__PURE__*/_react["default"].createElement(DiscountPercentage, null, "-" + discountPercentage + "%")))) : /*#__PURE__*/_react["default"].createElement("p", null, price.displayValue)))), /*#__PURE__*/_react["default"].createElement(ButtonsContainer, null, modalState.type === 'basket' && /*#__PURE__*/_react["default"].createElement(_CTA.OnAddToBagCTA, {
    isAuthenticated: isAuthenticated,
    handleClose: handleClose
  }), modalState.type === 'wishlist' && /*#__PURE__*/_react["default"].createElement(_CTA.OnAddToWishlistCTA, {
    handleClose: handleClose
  }))))));
};

exports.AddToBagModal = AddToBagModal;

var Container = _styledComponents["default"].div(_templateObject || (_templateObject = (0, _taggedTemplateLiteralLoose2["default"])(["\n  position: fixed;\n  top: 0;\n  height: 100%;\n  width: 100%;\n  z-index: 4000;\n\n  @media (min-width: 1025px) {\n    top: 14.4rem;\n  }\n"])));

var Background = _styledComponents["default"].div(_templateObject2 || (_templateObject2 = (0, _taggedTemplateLiteralLoose2["default"])(["\n  position: fixed;\n\n  background-color: ", ";\n  opacity: 0.4;\n  z-index: 200;\n  height: 100%;\n  width: 100%;\n  top: 9.2rem;\n  left: 0;\n"])), function (_ref2) {
  var theme = _ref2.theme;
  return theme.palette.primary;
});

var DiscountPrice = _styledComponents["default"].span(_templateObject3 || (_templateObject3 = (0, _taggedTemplateLiteralLoose2["default"])(["\n  font-size: 1.6rem;\n  color: ", ";\n  margin-bottom: -0.3rem;\n"])), function (_ref3) {
  var theme = _ref3.theme;
  return theme.palette.discount;
});

var PopupContainer = _styledComponents["default"].div.attrs({
  className: 'mr-5'
})(_templateObject4 || (_templateObject4 = (0, _taggedTemplateLiteralLoose2["default"])(["\n  position: absolute;\n  width: 100%;\n  min-width: 100vw;\n  max-width: 100%;\n  top: 0px;\n  background-color: ", ";\n\n  @media (max-width: ", ") {\n    top: 60px;\n  }\n\n  @media (min-width: ", ") {\n    right: 0;\n  }\n\n  @media (min-width: ", ") {\n    max-width: 40rem;\n    min-width: 40rem;\n  }\n"])), function (_ref4) {
  var theme = _ref4.theme;
  return theme.palette.secondary;
}, function (_ref5) {
  var theme = _ref5.theme;
  return theme.breakpoints.sm.max;
}, function (_ref6) {
  var theme = _ref6.theme;
  return theme.breakpoints.sm.max;
}, function (_ref7) {
  var theme = _ref7.theme;
  return theme.breakpoints.md.min;
});

var PopupInner = _styledComponents["default"].div.attrs({
  className: 'p-4'
})(_templateObject5 || (_templateObject5 = (0, _taggedTemplateLiteralLoose2["default"])(["\n  width: 100%;\n  display: inline-block;\n"])));

var Header = _styledComponents["default"].div(_templateObject6 || (_templateObject6 = (0, _taggedTemplateLiteralLoose2["default"])(["\n  font-weight: 400;\n  font-size: 16px;\n  line-height: 1.5;\n"])));

var ProductContainer = _styledComponents["default"].div.attrs({
  className: 'd-flex py-4'
})(_templateObject7 || (_templateObject7 = (0, _taggedTemplateLiteralLoose2["default"])([""])));

var ImageWrapper = _styledComponents["default"].div(_templateObject8 || (_templateObject8 = (0, _taggedTemplateLiteralLoose2["default"])(["\n  width: 100px;\n"])));

var ProductDetails = _styledComponents["default"].div.attrs({
  className: 'd-flex flex-column'
})(_templateObject9 || (_templateObject9 = (0, _taggedTemplateLiteralLoose2["default"])(["\n  margin-left: 20px;\n  & span:nth-of-type(3) {\n    margin: 0 0 -0.6rem 0;\n  }\n"])));

var Label = _styledComponents["default"].span(_templateObject10 || (_templateObject10 = (0, _taggedTemplateLiteralLoose2["default"])(["\n  color: ", ";\n"])), function (_ref8) {
  var theme = _ref8.theme;
  return theme.palette.hint;
});

var Price = (0, _styledComponents["default"])(_Common.Typography).attrs({
  className: 'd-flex flex-column mt-1',
  variant: 5
})(_templateObject11 || (_templateObject11 = (0, _taggedTemplateLiteralLoose2["default"])([""])));

var Row = _styledComponents["default"].div.attrs({
  className: 'd-flex align-items-center'
})(_templateObject12 || (_templateObject12 = (0, _taggedTemplateLiteralLoose2["default"])(["\n  & > * {\n    margin-right: 0.6rem;\n  }\n"])));

var OldPrice = (0, _styledComponents["default"])(_Common.Typography).attrs({
  variant: 5
})(_templateObject13 || (_templateObject13 = (0, _taggedTemplateLiteralLoose2["default"])(["\n  text-decoration: line-through;\n  opacity: 0.5;\n"])));
var DiscountPercentageWrapper = (0, _styledComponents["default"])(_Common.Typography).attrs({
  className: 'px-2 d-flex align-items-center'
})(_templateObject14 || (_templateObject14 = (0, _taggedTemplateLiteralLoose2["default"])(["\n  border-radius: 0.3rem;\n  width: fit-content;\n  background-color: ", ";\n"])), function (_ref9) {
  var theme = _ref9.theme;
  return theme.palette.discount;
});
var DiscountPercentage = (0, _styledComponents["default"])(_Common.Typography).attrs({
  variant: 6,
  color: 'secondary'
})(_templateObject15 || (_templateObject15 = (0, _taggedTemplateLiteralLoose2["default"])(["\n  margin-top: 0.2rem;\n"])));

var ButtonsContainer = _styledComponents["default"].div.attrs({
  className: 'd-flex justify-content-center'
})(_templateObject16 || (_templateObject16 = (0, _taggedTemplateLiteralLoose2["default"])(["\n  @media (max-width: ", ") {\n    flex-direction: column;\n    justify-content: start;\n\n    & > button {\n      width: 100%;\n      margin-bottom: 2rem;\n    }\n  }\n"])), function (_ref10) {
  var theme = _ref10.theme;
  return theme.breakpoints.xs.max;
});
//# sourceMappingURL=index.js.map