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

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

import React from 'react';
import { PromoCode, Price, Button, IconArrowRight, FormError, Typography } from '../../../Common';
import { CheckoutTitle } from '../UI';
import { AddressPreview, BasketPreview } from './Components';
import { useLocalLabels, useCheckoutDiscountCode, useCheckoutFormPaymentState, useCheckoutFormStep, useCheckoutFormShippingState, CheckoutFormStepsEnum, useOrderPrice, useOrderShippingPrice, usePrice, useAllSubscriptions, Html, useBasketCompact } from '@sentecacommerce-theme/lib';
import { DiscountCode, Checkbox } from './Components';
import styled, { css } from 'styled-components';
export var OrderSummary = (_ref) => {
  var _products$data$lineIt, _products$data;

  var {
    title,
    setEmail,
    gdprAgreed,
    uncheckGDPR,
    checkGDPR
  } = _ref;
  var products = useBasketCompact();
  var productCount = (_products$data$lineIt = (_products$data = products.data) == null ? void 0 : _products$data.lineItemsCount) != null ? _products$data$lineIt : 0;
  var {
    subtotal: subtotalRaw,
    taxedPrice: totalWithShippingRaw,
    discountCodesSum
  } = useOrderPrice();
  var {
    originalPrice: shippingPriceRaw,
    discountedPrice: shippingDiscountedPriceRaw
  } = useOrderShippingPrice();
  var {
    price: subtotal
  } = usePrice({
    price: subtotalRaw,
    discountedPrice: undefined
  });
  var {
    price: totalWithShipping
  } = usePrice({
    price: totalWithShippingRaw,
    discountedPrice: undefined
  });
  var {
    price: shipping
  } = usePrice({
    price: shippingDiscountedPriceRaw || shippingPriceRaw,
    discountedPrice: undefined
  });
  var {
    price: discountAmount
  } = usePrice({
    price: discountCodesSum,
    discountedPrice: undefined
  });
  var {
    appliedCodes
  } = useCheckoutDiscountCode();
  var {
    totalWithoutShippingPrice: withoutShippingLabel,
    totalShippingPrice: shippingLabel,
    shippingPriceNotAvailable,
    chooseShippingMethod,
    totalPrice: totalLabel,
    goToPayment,
    submitButtonLabel,
    placeOrder,
    fixErrorsMessage,
    GDPRErrorMessage,
    securityNotice
  } = useLocalLabels();
  var {
    requiredSubs,
    checkedSubs,
    clickSub,
    allSubscriptions,
    checkRequiredSubs
  } = useAllSubscriptions({
    tag: 'checkout'
  });
  var {
    currentStep
  } = useCheckoutFormStep();
  var showAddressPreview = currentStep !== CheckoutFormStepsEnum.Shipping;
  var {
    currency
  } = subtotal;

  var getButtonLabel = () => {
    if (currentStep === CheckoutFormStepsEnum.Shipping) {
      return goToPayment;
    }

    if (currentStep === CheckoutFormStepsEnum.Payment) {
      return placeOrder;
    }

    return submitButtonLabel;
  };

  var {
    errors: paymentErrors
  } = useCheckoutFormPaymentState();
  var {
    data: shippingData,
    errors: shippingErrors,
    isAddingNew
  } = useCheckoutFormShippingState();

  var renderError = () => {
    if (isAddingNew && currentStep === CheckoutFormStepsEnum.Shipping && shippingErrors) {
      return /*#__PURE__*/React.createElement(FormError, {
        text: fixErrorsMessage
      });
    }

    if (currentStep === CheckoutFormStepsEnum.Payment && paymentErrors) {
      return /*#__PURE__*/React.createElement(FormError, {
        text: fixErrorsMessage
      });
    }

    return null;
  };

  React.useEffect(() => {
    setEmail(shippingData == null ? void 0 : shippingData.email);
  }, [shippingData == null ? void 0 : shippingData.email, setEmail]);

  var handleClick = sub => {
    clickSub(sub);
    var allChecked = checkRequiredSubs();

    if (!allChecked) {
      uncheckGDPR();
    } else {
      checkGDPR();
    }
  };

  return /*#__PURE__*/React.createElement(Container, null, /*#__PURE__*/React.createElement(Box, null, /*#__PURE__*/React.createElement(CheckoutTitle, {
    small: true,
    data: title
  }), /*#__PURE__*/React.createElement(Row, null, /*#__PURE__*/React.createElement(Name, null, withoutShippingLabel), /*#__PURE__*/React.createElement(Value, null, /*#__PURE__*/React.createElement(Price, {
    size: "tiny",
    price: (subtotal.value + discountAmount.value).toFixed(2),
    currency: subtotal.currency
  }))), /*#__PURE__*/React.createElement(Row, null, /*#__PURE__*/React.createElement(Name, null, shippingLabel), /*#__PURE__*/React.createElement(Value, null, !shipping ? shippingPriceNotAvailable : !shippingPriceRaw && !shippingDiscountedPriceRaw ? chooseShippingMethod : "" + shipping.displayValue)), appliedCodes == null ? void 0 : appliedCodes.map(data => /*#__PURE__*/React.createElement(Row, {
    key: "Code__" + data.discountCode.resourceId + "--" + data.discountCode.resource.code
  }, /*#__PURE__*/React.createElement(DiscountCode, {
    data: data
  }))), /*#__PURE__*/React.createElement(Row, {
    big: true
  }, /*#__PURE__*/React.createElement(Name, {
    big: true
  }, totalLabel), /*#__PURE__*/React.createElement(Value, {
    big: true
  }, /*#__PURE__*/React.createElement(Price, {
    size: "tiny",
    price: totalWithShipping.value,
    currency: subtotal.currency
  })))), /*#__PURE__*/React.createElement(PromoCodeContainer, null, /*#__PURE__*/React.createElement(PromoCode, {
    stringsDomain: "checkout"
  })), /*#__PURE__*/React.createElement(SubmitButtonContainer, null, requiredSubs.map(sub => /*#__PURE__*/React.createElement(Checkbox, {
    key: sub,
    onChange: () => handleClick(sub),
    isChecked: checkedSubs == null ? void 0 : checkedSubs[sub],
    size: "tiny"
  }, /*#__PURE__*/React.createElement(GDPRLabel, null, /*#__PURE__*/React.createElement(Html, null, allSubscriptions == null ? void 0 : allSubscriptions[sub].description)))), !checkRequiredSubs() && /*#__PURE__*/React.createElement(FormError, {
    text: GDPRErrorMessage
  }), /*#__PURE__*/React.createElement(Button, {
    type: "submit",
    variant: !gdprAgreed ? 'disabled' : 'primary',
    disabled: !gdprAgreed,
    icon: /*#__PURE__*/React.createElement(IconArrowRight, null)
  }, getButtonLabel()), /*#__PURE__*/React.createElement(Typography, {
    variant: "6",
    color: "primary",
    className: "d-none d-lg-block mt-2"
  }, securityNotice), renderError()), /*#__PURE__*/React.createElement(Box, null, /*#__PURE__*/React.createElement(BasketPreview, null), showAddressPreview && /*#__PURE__*/React.createElement(AddressPreview, null)), productCount >= 5 && /*#__PURE__*/React.createElement(SubmitButtonContainer, {
    mobile: true
  }, requiredSubs.map(sub => /*#__PURE__*/React.createElement(Checkbox, {
    key: sub,
    onChange: () => handleClick(sub),
    isChecked: checkedSubs == null ? void 0 : checkedSubs[sub],
    size: "tiny"
  }, /*#__PURE__*/React.createElement(GDPRLabel, null, /*#__PURE__*/React.createElement(Html, null, allSubscriptions == null ? void 0 : allSubscriptions[sub].description)))), !checkRequiredSubs() && /*#__PURE__*/React.createElement(FormError, {
    text: GDPRErrorMessage
  }), /*#__PURE__*/React.createElement(Button, {
    type: "submit",
    variant: !gdprAgreed ? 'disabled' : 'primary',
    disabled: !gdprAgreed,
    icon: /*#__PURE__*/React.createElement(IconArrowRight, null)
  }, getButtonLabel()), /*#__PURE__*/React.createElement(Typography, {
    variant: "6",
    color: "primary",
    className: "mt-2"
  }, securityNotice), renderError()));
};
var PromoCodeContainer = styled.div.attrs({
  className: 'my-4'
})(_templateObject || (_templateObject = _taggedTemplateLiteralLoose([""])));
var Container = styled.div.attrs({
  className: 'pt-5 pt-lg-4 mt-lg-2'
})(_templateObject2 || (_templateObject2 = _taggedTemplateLiteralLoose([""])));
var Row = styled.div.attrs({
  className: 'd-flex justify-content-between'
})(_templateObject3 || (_templateObject3 = _taggedTemplateLiteralLoose(["\n  width: 100%;\n  padding-top: ", ";\n  margin-bottom: 1.2rem;\n  color: ", ";\n\n  &:last-of-type {\n    margin-bottom: 0;\n  }\n"])), props => props.big ? '1rem' : 0, props => props.big ? props.theme.palette.primary : 'inherit');
var SubmitButtonContainer = styled.div.attrs(props => ({
  className: "mb-4 " + (props.mobile ? ' d-lg-none mt-4' : 'd-block')
}))(_templateObject4 || (_templateObject4 = _taggedTemplateLiteralLoose(["\n  @media (max-width: ", ") {\n    display: ", ";\n    & button:hover {\n      background: ", " !important;\n    }\n  }\n  & button {\n    width: 100%;\n    margin-top: 1rem;\n  }\n"])), (_ref2) => {
  var {
    theme
  } = _ref2;
  return theme.breakpoints.md.max;
}, props => props.mobile ? 'block' : 'none', (_ref3) => {
  var {
    theme
  } = _ref3;
  return theme.palette.primary;
});
var Box = styled.div.attrs({
  className: 'px-lg-3 pb-lg-3 pt-lg-2'
})(_templateObject5 || (_templateObject5 = _taggedTemplateLiteralLoose(["\n  @media (min-width: ", ") {\n    border: 0.1rem solid ", ";\n  }\n"])), (_ref4) => {
  var {
    theme
  } = _ref4;
  return theme.breakpoints.lg.min;
}, (_ref5) => {
  var {
    theme
  } = _ref5;
  return theme.palette.light;
});
var Name = styled.span(_templateObject6 || (_templateObject6 = _taggedTemplateLiteralLoose(["\n  font-weight: ", ";\n  line-height: 1;\n  font-size: ", ";\n"])), props => props.big ? '600' : '300', props => props.big ? '1.8rem' : 'inherit');
var Value = styled.span(_templateObject7 || (_templateObject7 = _taggedTemplateLiteralLoose(["\n  font-weight: ", ";\n  line-height: 1;\n  font-size: ", ";\n\n  ", "\n"])), props => props.big ? '600' : '400', props => props.big ? '1.8rem' : 'inherit', props => !props.big ? css(_templateObject8 || (_templateObject8 = _taggedTemplateLiteralLoose(["\n          * {\n            font-size: inherit !important;\n          }\n        "]))) : '');
var GDPRLabel = styled.span(_templateObject9 || (_templateObject9 = _taggedTemplateLiteralLoose(["\n  & > div {\n    & > a {\n      text-decoration: underline;\n    }\n  }\n  font-size: 1.18rem;\n"])));
//# sourceMappingURL=index.js.map