"use strict";

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

exports.__esModule = true;
exports.Summary = 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 _router = require("next/router");

var _ErrorModal = require("../ErrorModal");

var _Navbar = require("../../../Navbar");

var _templateObject, _templateObject2, _templateObject3, _templateObject4, _templateObject5, _templateObject6, _templateObject7, _templateObject8;

var Summary = function Summary(_ref) {
  var displayValue = _ref.displayValue,
      totalDiscount = _ref.totalDiscount,
      isEmpty = _ref.isEmpty,
      labels = _ref.labels,
      translateSummary = _ref.translateSummary,
      getFirstElementWithError = _ref.getFirstElementWithError;

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

  var _useBoolean = (0, _lib.useBoolean)(false),
      openErrorModal = _useBoolean[0],
      setOpenErrorModal = _useBoolean[1];

  var _React$useState = _react["default"].useState(),
      errorProducts = _React$useState[0],
      setErrorProducts = _React$useState[1];

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

  var router = (0, _router.useRouter)();

  var openAuthModal = function openAuthModal() {
    enqueueView(views.auth, {
      isCheckout: true
    });
  };

  var goToCheckout = function goToCheckout() {
    router.push('/checkout', undefined, {
      shallow: true
    });
  };

  var _useGoToCheckout = (0, _lib.useGoToCheckout)({
    authenticatedCallback: goToCheckout,
    guestCallback: openAuthModal,
    onErrorCallback: function onErrorCallback(data) {
      setErrorProducts(data);
      setOpenErrorModal.on();
    }
  }),
      handleClick = _useGoToCheckout[0],
      isLoading = _useGoToCheckout[1].isLoading;

  var _usePromoCode = (0, _lib.usePromoCode)(),
      hasActiveVoucher = _usePromoCode.hasActiveVoucher;

  var isButtonDisabled = isEmpty || isLoading;

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

  return /*#__PURE__*/_react["default"].createElement(Container, {
    translateSummary: translateSummary,
    withPromo: !hasActiveVoucher
  }, openErrorModal && /*#__PURE__*/_react["default"].createElement(_ErrorModal.ErrorModal, {
    onClose: function onClose() {
      return setOpenErrorModal.off();
    },
    open: openErrorModal,
    products: errorProducts,
    setProducts: setErrorProducts
  }), /*#__PURE__*/_react["default"].createElement(Header, null, labels.title), /*#__PURE__*/_react["default"].createElement(Divider, null), totalDiscount && /*#__PURE__*/_react["default"].createElement(TotalDiscountContainer, null, /*#__PURE__*/_react["default"].createElement("span", null, labels.totalDiscount), /*#__PURE__*/_react["default"].createElement(TotalSaving, null, "-", totalDiscount)), /*#__PURE__*/_react["default"].createElement(TotalSumContainer, null, /*#__PURE__*/_react["default"].createElement("span", null, labels.total), /*#__PURE__*/_react["default"].createElement(Total, null, displayValue)), /*#__PURE__*/_react["default"].createElement(Divider, null), /*#__PURE__*/_react["default"].createElement(CheckoutButton, null, /*#__PURE__*/_react["default"].createElement(_Common.Button, {
    className: "mt-4",
    variant: isButtonDisabled ? 'disabled' : 'primary',
    fullWidth: true,
    onClick: handleClick,
    disabled: isButtonDisabled,
    borderRadius: "large"
  }, buttons.checkout)));
};

exports.Summary = Summary;

var CheckoutButton = _styledComponents["default"].div.attrs({
  className: 'p-1'
})(_templateObject || (_templateObject = (0, _taggedTemplateLiteralLoose2["default"])(["\n  & button:hover {\n    background: #555 !important;\n  }\n  @media (max-width: ", ") {\n    position: fixed;\n    height: fit-content;\n    width: 100%;\n    bottom: 0;\n    left: 0;\n    z-index: 20;\n    padding-bottom: 1.2rem !important;\n    background: #fff;\n    & button {\n      margin: 0.5rem 0 !important;\n    }\n  }\n"])), function (_ref2) {
  var theme = _ref2.theme;
  return theme.breakpoints.md.max;
});

var Container = _styledComponents["default"].div(_templateObject2 || (_templateObject2 = (0, _taggedTemplateLiteralLoose2["default"])(["\n  @media (min-width: ", ") {\n    position: sticky;\n    top: 0;\n\n    transition: transform ", ";\n    transform: translateY(\n      ", "\n    );\n"])), function (_ref3) {
  var theme = _ref3.theme;
  return theme.breakpoints.lg.min;
}, _Navbar.NAV_ANIMATION, function (props) {
  if (props.translateSummary) {
    if (props.withPromo) return _Navbar.NAV_HEIGHT_WITH_VOUCHER;
    return _Navbar.NAV_HEIGHT;
  }

  return '0';
});

var Header = _styledComponents["default"].h4(_templateObject3 || (_templateObject3 = (0, _taggedTemplateLiteralLoose2["default"])([""])));

var TotalSumContainer = _styledComponents["default"].div.attrs({
  className: 'd-flex mt-2'
})(_templateObject4 || (_templateObject4 = (0, _taggedTemplateLiteralLoose2["default"])(["\n  font-weight: 700;\n  font-size: 1.7rem;\n"])));

var Total = _styledComponents["default"].div.attrs({
  className: 'ml-auto'
})(_templateObject5 || (_templateObject5 = (0, _taggedTemplateLiteralLoose2["default"])([""])));

var Divider = _styledComponents["default"].hr(_templateObject6 || (_templateObject6 = (0, _taggedTemplateLiteralLoose2["default"])(["\n  height: 0.1rem;\n  border: none;\n  border-width: 0 0 0.1rem;\n  border-bottom-style: solid;\n  border-bottom-color: rgb(229, 229, 229);\n  margin: 1.2rem 0;\n"])));

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

var TotalSaving = _styledComponents["default"].div.attrs({
  className: 'ml-auto'
})(_templateObject8 || (_templateObject8 = (0, _taggedTemplateLiteralLoose2["default"])(["\n  color: ", ";\n"])), function (_ref4) {
  var theme = _ref4.theme;
  return theme.palette.danger;
});
//# sourceMappingURL=index.js.map