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

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

import React, { useState } from 'react';
import styled from 'styled-components';
import { useRouter } from 'next/router';
import { Link, CheckoutFormContextProvider, CheckoutFormStepsEnum, useConfigState, useBoolean, useBulkSubscribe, useAllSubscriptions, LocalLabelsProvider } from '@sentecacommerce-theme/lib';
import { CheckoutSteps, OrderSummary, CheckoutHeader, BasketItemsWithErrorsModal } from './Components';
import { IconPhone, IconDistrictLogoNew } from '../Common/Icons';
export var Checkout = (_ref) => {
  var {
    labels,
    errors
  } = _ref;
  var [email, setEmail] = useState();
  var [gdprAgreed, setGdprAgreed] = useBoolean();
  var [subscribe] = useBulkSubscribe({});
  var {
    requiredSubs
  } = useAllSubscriptions({
    tag: 'checkout'
  });
  var router = useRouter();
  var [isRedirecting, setIsRedirecting] = useState(false);

  var onSuccess = (_ref2) => {
    var {
      _id
    } = _ref2;
    router.push("/order/" + _id + "?success=true");
  };

  var onError = error => {
    console.log('error');
    console.log(error);
  };

  var onSubmit = data => {
    var {
      isShippingValid,
      setIsShippingSubmitting,
      isBillingValid,
      setIsBillingSubmitting,
      isPaymentValid,
      setIsPaymentSubmitting,
      step,
      updateStep,
      saveOrder,
      scrollToFirstError
    } = data;
    scrollToFirstError();
    setIsShippingSubmitting(true);
    setIsBillingSubmitting(true); // exit if shipping or billing is not valid

    if (!isShippingValid || !isBillingValid) {
      setGdprAgreed.off();

      if (step !== CheckoutFormStepsEnum.Shipping) {
        updateStep(CheckoutFormStepsEnum.Shipping);
        return;
      }

      return;
    }
    /**
     * edge case:
     * user is not on 2nd step and the shipping or billing data is
     * not valid anymore
     */
    // Go to payment after shipping and billing data is valid


    if (step === CheckoutFormStepsEnum.Shipping) {
      updateStep(CheckoutFormStepsEnum.Payment);
      return;
    } // Set payment as submitting


    setIsPaymentSubmitting(true);

    if (!isPaymentValid) {
      /**
       * edge case:
       * user is not on 3nd step and the shipping or billing data is
       * not valid anymore
       */
      // if (
      //   step !== CheckoutFormStepsEnum.Shipping &&
      //   step !== CheckoutFormStepsEnum.Payment
      // ) {
      //   updateStep(CheckoutFormStepsEnum.Payment)
      // }
      return;
    }

    if (!gdprAgreed) {
      // If somehow click submit without checking the agreements
      return;
    } // send order if everything is valid


    subscribe({
      email: email,
      consentKeys: requiredSubs
    });
    saveOrder();
  };

  var {
    countryCode
  } = useConfigState();
  return /*#__PURE__*/React.createElement(LocalLabelsProvider, {
    labels: labels
  }, /*#__PURE__*/React.createElement(CheckoutFormContextProvider, {
    errorLabels: errors,
    defaultStep: CheckoutFormStepsEnum.Shipping,
    onSubmit: onSubmit,
    countryCode: countryCode,
    withPersistBeforePageLeave: true,
    enableSaveAddress: true,
    enableSavedAddressList: true,
    autofillShippingPersonalData: true,
    autoSelectDefaultShippingAddress: true,
    enableSaveBillingAddress: true,
    enableSavedBillingAddressList: true,
    autoSelectDefaultBillingAddress: true,
    shippingEnabledOnStep: CheckoutFormStepsEnum.Shipping,
    billingEnabledOnStep: CheckoutFormStepsEnum.Shipping,
    paymentEnabledOnStep: CheckoutFormStepsEnum.Payment,
    onSuccess: onSuccess,
    onError: onError,
    onBeforeRedirect: () => setIsRedirecting(true),
    withPixelMeta: true
  }, /*#__PURE__*/React.createElement(Background, null, /*#__PURE__*/React.createElement(Container, null, /*#__PURE__*/React.createElement("div", {
    className: "pb-4 d-flex align-items-center px-4 justify-content-between"
  }, /*#__PURE__*/React.createElement("div", {
    className: "d-flex align-items-center"
  }, /*#__PURE__*/React.createElement(Link, {
    href: "/",
    passHref: true
  }, /*#__PURE__*/React.createElement(IconContainer, null, /*#__PURE__*/React.createElement(IconDistrictLogoNew, null)))), /*#__PURE__*/React.createElement("div", {
    className: "pr-4 d-none d-lg-block"
  }, /*#__PURE__*/React.createElement(PhoneIconContainer, null, /*#__PURE__*/React.createElement(IconPhone, null)), /*#__PURE__*/React.createElement("span", null, labels.questionsLabel), /*#__PURE__*/React.createElement(PhoneNumber, null, labels.phoneNumberLabel), /*#__PURE__*/React.createElement("span", {
    className: "pl-3"
  }, labels.workTimeLabel)))), /*#__PURE__*/React.createElement(CheckoutHeader, null), /*#__PURE__*/React.createElement(Line, null), /*#__PURE__*/React.createElement(Container, null, !isRedirecting && /*#__PURE__*/React.createElement("div", {
    className: "row"
  }, /*#__PURE__*/React.createElement("div", {
    className: "col-12 col-lg-8"
  }, /*#__PURE__*/React.createElement(CheckoutSteps, null)), /*#__PURE__*/React.createElement("aside", {
    className: "col-12 col-lg-4"
  }, /*#__PURE__*/React.createElement(BoxContainer, {
    active: true
  }, /*#__PURE__*/React.createElement(OrderSummary, {
    title: labels.summaryTitle,
    setEmail: setEmail,
    gdprAgreed: gdprAgreed,
    checkGDPR: () => setGdprAgreed.on(),
    uncheckGDPR: () => setGdprAgreed.off()
  })))), isRedirecting && /*#__PURE__*/React.createElement("div", null, labels.redirecting)), /*#__PURE__*/React.createElement(BasketItemsWithErrorsModal, null))));
};
var Background = styled.div.attrs({
  className: 'pb-4 pt-3'
})(_templateObject || (_templateObject = _taggedTemplateLiteralLoose(["\n  @media (max-width: ", ") {\n    overflow: hidden;\n  }\n  max-width: 100vw;\n"])), (_ref3) => {
  var {
    theme
  } = _ref3;
  return theme.breakpoints.md.max;
});
var IconContainer = styled.a.attrs({
  className: 'd-flex '
})(_templateObject2 || (_templateObject2 = _taggedTemplateLiteralLoose(["\n  cursor: pointer;\n  margin-left: -2rem;\n  &:hover {\n    opacity: 0.7;\n  }\n"])));
var PhoneIconContainer = styled.a.attrs({
  className: 'mr-2'
})(_templateObject3 || (_templateObject3 = _taggedTemplateLiteralLoose(["\n  & > svg {\n    position: relative;\n    top: 0.5rem;\n  }\n"])));
var PhoneNumber = styled.span.attrs({
  className: 'pl-2'
})(_templateObject4 || (_templateObject4 = _taggedTemplateLiteralLoose(["\n  text-decoration: underline;\n"])));
var BoxContainer = styled.div.attrs({
  className: 'px-4'
})(_templateObject5 || (_templateObject5 = _taggedTemplateLiteralLoose(["\n  display: ", ";\n  @media (min-width: ", ") {\n    position: sticky;\n    top: 0;\n  }\n"])), props => props.active ? 'block' : 'none', (_ref4) => {
  var {
    theme
  } = _ref4;
  return theme.breakpoints.lg.min;
});
var Container = styled.div.attrs({
  className: 'mx-auto'
})(_templateObject6 || (_templateObject6 = _taggedTemplateLiteralLoose(["\n  max-width: 120rem;\n  width: 100%;\n"])));
var Line = styled.div(_templateObject7 || (_templateObject7 = _taggedTemplateLiteralLoose(["\n  height: 0.1rem;\n  width: 100%;\n  background-color: ", ";\n"])), (_ref5) => {
  var {
    theme
  } = _ref5;
  return theme.palette.light;
});
//# sourceMappingURL=checkout.component.js.map