import _taggedTemplateLiteralLoose from "@babel/runtime/helpers/taggedTemplateLiteralLoose";

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

import React, { useEffect, useRef, useCallback } from 'react';
import styled from 'styled-components';
import { useClickOutside, usePrice, authApi, useUIFunctions, OverflowHidden, useGlobalLabels, usePixel } from '@sentecacommerce-theme/lib';
import { LazyResponsiveImage, Typography } from '../../../Common';
import { Portal, useConfigState } from '@sentecacommerce-theme/lib';
import { OnAddToBagCTA, OnAddToWishlistCTA } from './CTA';
export var AddToBagModal = (_ref) => {
  var _selectedVariant$offe, _selectedVariant$offe2, _selectedVariant$imag;

  var {
    modalState,
    metaData,
    selectedVariant
  } = _ref;
  var popupRef = useRef(null);
  var {
    pixelAddLineItem
  } = usePixel();
  var {
    closeViewById
  } = useUIFunctions();
  var {
    commonMessages
  } = useGlobalLabels();
  var {
    views,
    attributeKeys,
    theme
  } = useConfigState();
  var handleClose = useCallback(() => {
    closeViewById(views.bagModal);
  }, []);
  var {
    price,
    discountPercentage,
    discountPrice
  } = 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
  });

  var 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;
  useEffect(() => {
    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.useCallback(e => {
    if (e.key === 'Escape') {
      return handleClose();
    }
  }, [handleClose]);
  useEffect(() => {
    window.addEventListener('keydown', handleKey);
    return () => {
      window.removeEventListener('keydown', handleKey);
    };
  }, [handleKey]);
  var timeOut = setTimeout(() => handleClose(), 3000);
  var {
    data: isAuthenticated
  } = authApi.isAuthenticated();
  useClickOutside(popupRef, () => handleClose(), [popupRef]);
  return /*#__PURE__*/React.createElement(Portal, null, /*#__PURE__*/React.createElement(Background, null), /*#__PURE__*/React.createElement(OverflowHidden, null), /*#__PURE__*/React.createElement(Container, null, /*#__PURE__*/React.createElement(PopupContainer, null, /*#__PURE__*/React.createElement(PopupInner, {
    ref: popupRef,
    onMouseEnter: () => clearTimeout(timeOut)
  }, /*#__PURE__*/React.createElement(Header, null, commonMessages.addedTo, ' ', modalState.type === 'basket' && commonMessages.bag, modalState.type === 'wishlist' && commonMessages.favorites), /*#__PURE__*/React.createElement(ProductContainer, null, /*#__PURE__*/React.createElement(ImageWrapper, null, /*#__PURE__*/React.createElement(LazyResponsiveImage, {
    imagesMap: selectedVariant == null ? void 0 : (_selectedVariant$imag = selectedVariant.images) == null ? void 0 : _selectedVariant$imag[0],
    defaultImageWidth: "small",
    breakpointSizes: {}
  })), /*#__PURE__*/React.createElement(ProductDetails, null, /*#__PURE__*/React.createElement("span", null, metaData.name), /*#__PURE__*/React.createElement(Label, null, metaData.brand.name || commonMessages.brand), /*#__PURE__*/React.createElement("span", null, sizeLabel, ":\xA0", /*#__PURE__*/React.createElement("span", {
    style: {
      color: theme.palette.hint
    }
  }, sizeValue)), /*#__PURE__*/React.createElement(Price, null, discountPrice ? /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(OldPrice, null, price.displayValue), /*#__PURE__*/React.createElement(Row, null, /*#__PURE__*/React.createElement(DiscountPrice, null, discountPrice.displayValue), /*#__PURE__*/React.createElement(DiscountPercentageWrapper, null, /*#__PURE__*/React.createElement(DiscountPercentage, null, "-" + discountPercentage + "%")))) : /*#__PURE__*/React.createElement("p", null, price.displayValue)))), /*#__PURE__*/React.createElement(ButtonsContainer, null, modalState.type === 'basket' && /*#__PURE__*/React.createElement(OnAddToBagCTA, {
    isAuthenticated: isAuthenticated,
    handleClose: handleClose
  }), modalState.type === 'wishlist' && /*#__PURE__*/React.createElement(OnAddToWishlistCTA, {
    handleClose: handleClose
  }))))));
};
var Container = styled.div(_templateObject || (_templateObject = _taggedTemplateLiteralLoose(["\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 = styled.div(_templateObject2 || (_templateObject2 = _taggedTemplateLiteralLoose(["\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"])), (_ref2) => {
  var {
    theme
  } = _ref2;
  return theme.palette.primary;
});
var DiscountPrice = styled.span(_templateObject3 || (_templateObject3 = _taggedTemplateLiteralLoose(["\n  font-size: 1.6rem;\n  color: ", ";\n  margin-bottom: -0.3rem;\n"])), (_ref3) => {
  var {
    theme
  } = _ref3;
  return theme.palette.discount;
});
var PopupContainer = styled.div.attrs({
  className: 'mr-5'
})(_templateObject4 || (_templateObject4 = _taggedTemplateLiteralLoose(["\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"])), (_ref4) => {
  var {
    theme
  } = _ref4;
  return theme.palette.secondary;
}, (_ref5) => {
  var {
    theme
  } = _ref5;
  return theme.breakpoints.sm.max;
}, (_ref6) => {
  var {
    theme
  } = _ref6;
  return theme.breakpoints.sm.max;
}, (_ref7) => {
  var {
    theme
  } = _ref7;
  return theme.breakpoints.md.min;
});
var PopupInner = styled.div.attrs({
  className: 'p-4'
})(_templateObject5 || (_templateObject5 = _taggedTemplateLiteralLoose(["\n  width: 100%;\n  display: inline-block;\n"])));
var Header = styled.div(_templateObject6 || (_templateObject6 = _taggedTemplateLiteralLoose(["\n  font-weight: 400;\n  font-size: 16px;\n  line-height: 1.5;\n"])));
var ProductContainer = styled.div.attrs({
  className: 'd-flex py-4'
})(_templateObject7 || (_templateObject7 = _taggedTemplateLiteralLoose([""])));
var ImageWrapper = styled.div(_templateObject8 || (_templateObject8 = _taggedTemplateLiteralLoose(["\n  width: 100px;\n"])));
var ProductDetails = styled.div.attrs({
  className: 'd-flex flex-column'
})(_templateObject9 || (_templateObject9 = _taggedTemplateLiteralLoose(["\n  margin-left: 20px;\n  & span:nth-of-type(3) {\n    margin: 0 0 -0.6rem 0;\n  }\n"])));
var Label = styled.span(_templateObject10 || (_templateObject10 = _taggedTemplateLiteralLoose(["\n  color: ", ";\n"])), (_ref8) => {
  var {
    theme
  } = _ref8;
  return theme.palette.hint;
});
var Price = styled(Typography).attrs({
  className: 'd-flex flex-column mt-1',
  variant: 5
})(_templateObject11 || (_templateObject11 = _taggedTemplateLiteralLoose([""])));
var Row = styled.div.attrs({
  className: 'd-flex align-items-center'
})(_templateObject12 || (_templateObject12 = _taggedTemplateLiteralLoose(["\n  & > * {\n    margin-right: 0.6rem;\n  }\n"])));
var OldPrice = styled(Typography).attrs({
  variant: 5
})(_templateObject13 || (_templateObject13 = _taggedTemplateLiteralLoose(["\n  text-decoration: line-through;\n  opacity: 0.5;\n"])));
var DiscountPercentageWrapper = styled(Typography).attrs({
  className: 'px-2 d-flex align-items-center'
})(_templateObject14 || (_templateObject14 = _taggedTemplateLiteralLoose(["\n  border-radius: 0.3rem;\n  width: fit-content;\n  background-color: ", ";\n"])), (_ref9) => {
  var {
    theme
  } = _ref9;
  return theme.palette.discount;
});
var DiscountPercentage = styled(Typography).attrs({
  variant: 6,
  color: 'secondary'
})(_templateObject15 || (_templateObject15 = _taggedTemplateLiteralLoose(["\n  margin-top: 0.2rem;\n"])));
var ButtonsContainer = styled.div.attrs({
  className: 'd-flex justify-content-center'
})(_templateObject16 || (_templateObject16 = _taggedTemplateLiteralLoose(["\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"])), (_ref10) => {
  var {
    theme
  } = _ref10;
  return theme.breakpoints.xs.max;
});
//# sourceMappingURL=index.js.map