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

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

import React from 'react';
import styled from 'styled-components';
import { Button } from '../../../Common';
import { useUIFunctions, useConfigState, useGoToCheckout, usePromoCode, useGlobalLabels, useBoolean } from '@sentecacommerce-theme/lib';
import { useRouter } from 'next/router';
import { ErrorModal } from '../ErrorModal';
import { NAV_ANIMATION, NAV_HEIGHT, NAV_HEIGHT_WITH_VOUCHER } from '../../../Navbar';
export var Summary = (_ref) => {
  var {
    displayValue,
    totalDiscount,
    isEmpty,
    labels,
    translateSummary,
    getFirstElementWithError
  } = _ref;
  var {
    enqueueView
  } = useUIFunctions();
  var [openErrorModal, setOpenErrorModal] = useBoolean(false);
  var [errorProducts, setErrorProducts] = React.useState();
  var {
    views
  } = useConfigState();
  var router = useRouter();

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

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

  var [handleClick, {
    isLoading
  }] = useGoToCheckout({
    authenticatedCallback: goToCheckout,
    guestCallback: openAuthModal,
    onErrorCallback: data => {
      setErrorProducts(data);
      setOpenErrorModal.on();
    }
  });
  var {
    hasActiveVoucher
  } = usePromoCode();
  var isButtonDisabled = isEmpty || isLoading;
  var {
    buttons
  } = useGlobalLabels();
  return /*#__PURE__*/React.createElement(Container, {
    translateSummary: translateSummary,
    withPromo: !hasActiveVoucher
  }, openErrorModal && /*#__PURE__*/React.createElement(ErrorModal, {
    onClose: () => setOpenErrorModal.off(),
    open: openErrorModal,
    products: errorProducts,
    setProducts: setErrorProducts
  }), /*#__PURE__*/React.createElement(Header, null, labels.title), /*#__PURE__*/React.createElement(Divider, null), totalDiscount && /*#__PURE__*/React.createElement(TotalDiscountContainer, null, /*#__PURE__*/React.createElement("span", null, labels.totalDiscount), /*#__PURE__*/React.createElement(TotalSaving, null, "-", totalDiscount)), /*#__PURE__*/React.createElement(TotalSumContainer, null, /*#__PURE__*/React.createElement("span", null, labels.total), /*#__PURE__*/React.createElement(Total, null, displayValue)), /*#__PURE__*/React.createElement(Divider, null), /*#__PURE__*/React.createElement(CheckoutButton, null, /*#__PURE__*/React.createElement(Button, {
    className: "mt-4",
    variant: isButtonDisabled ? 'disabled' : 'primary',
    fullWidth: true,
    onClick: handleClick,
    disabled: isButtonDisabled,
    borderRadius: "large"
  }, buttons.checkout)));
};
var CheckoutButton = styled.div.attrs({
  className: 'p-1'
})(_templateObject || (_templateObject = _taggedTemplateLiteralLoose(["\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"])), (_ref2) => {
  var {
    theme
  } = _ref2;
  return theme.breakpoints.md.max;
});
var Container = styled.div(_templateObject2 || (_templateObject2 = _taggedTemplateLiteralLoose(["\n  @media (min-width: ", ") {\n    position: sticky;\n    top: 0;\n\n    transition: transform ", ";\n    transform: translateY(\n      ", "\n    );\n"])), (_ref3) => {
  var {
    theme
  } = _ref3;
  return theme.breakpoints.lg.min;
}, NAV_ANIMATION, props => {
  if (props.translateSummary) {
    if (props.withPromo) return NAV_HEIGHT_WITH_VOUCHER;
    return NAV_HEIGHT;
  }

  return '0';
});
var Header = styled.h4(_templateObject3 || (_templateObject3 = _taggedTemplateLiteralLoose([""])));
var TotalSumContainer = styled.div.attrs({
  className: 'd-flex mt-2'
})(_templateObject4 || (_templateObject4 = _taggedTemplateLiteralLoose(["\n  font-weight: 700;\n  font-size: 1.7rem;\n"])));
var Total = styled.div.attrs({
  className: 'ml-auto'
})(_templateObject5 || (_templateObject5 = _taggedTemplateLiteralLoose([""])));
var Divider = styled.hr(_templateObject6 || (_templateObject6 = _taggedTemplateLiteralLoose(["\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 = styled.div.attrs({
  className: 'd-flex'
})(_templateObject7 || (_templateObject7 = _taggedTemplateLiteralLoose([""])));
var TotalSaving = styled.div.attrs({
  className: 'ml-auto'
})(_templateObject8 || (_templateObject8 = _taggedTemplateLiteralLoose(["\n  color: ", ";\n"])), (_ref4) => {
  var {
    theme
  } = _ref4;
  return theme.palette.danger;
});
//# sourceMappingURL=index.js.map