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

var _templateObject, _templateObject2, _templateObject3, _templateObject4, _templateObject5;

import React from 'react';
import { useCheckoutFormShippingState, useCheckoutErrorFields, useLocalLabels, usePixel } from '@sentecacommerce-theme/lib';
import { CheckoutAddressForm } from './Components';
import { AddressPreview, Button, Spinner, IconPlus, FormError } from '../../../Common';
import styled, { keyframes } from 'styled-components';
import { CheckoutTitle } from '../UI';
import { CheckoutInvoice } from '../Invoice';
export var CheckoutShipping = () => {
  var {
    savedAddressList,
    isSavedAddressListEnabled,
    isAddingNew,
    updateIsAddingNew,
    hasAvailableSavedAddress,
    errors
  } = useCheckoutFormShippingState();
  var {
    pixelCheckoutStep
  } = usePixel();
  var {
    errorRef
  } = useCheckoutErrorFields();
  var {
    addNewAddress
  } = useLocalLabels();
  React.useEffect(() => {
    pixelCheckoutStep(1);
  }, []);
  React.useEffect(() => {
    window.scrollTo(0, 0);
  }, [isAddingNew]);

  if (isSavedAddressListEnabled && !savedAddressList) {
    return /*#__PURE__*/React.createElement(SpinnerContainer, null, /*#__PURE__*/React.createElement(Spinner, null));
  }

  if (isAddingNew || !isSavedAddressListEnabled || !hasAvailableSavedAddress) {
    return /*#__PURE__*/React.createElement(InputsWrapper, null, /*#__PURE__*/React.createElement(CheckoutAddressForm, null), /*#__PURE__*/React.createElement(InvoiceContainer, null, /*#__PURE__*/React.createElement(CheckoutInvoice, null)));
  }

  return /*#__PURE__*/React.createElement(InputsWrapper, null, /*#__PURE__*/React.createElement(AddressBook, null, /*#__PURE__*/React.createElement("div", {
    className: "col-12"
  }, /*#__PURE__*/React.createElement(CheckoutTitle, {
    className: "mb-4 mt-4 pt-2",
    data: "Choose address"
  })), /*#__PURE__*/React.createElement(FormError, {
    errors: errors,
    errorRef: errorRef,
    fieldName: "any"
  }), /*#__PURE__*/React.createElement("div", {
    className: "col-12"
  }, savedAddressList == null ? void 0 : savedAddressList.map(address => {
    if (!address.isSelectable) return null;
    return /*#__PURE__*/React.createElement(AddressPreview, {
      key: address._id,
      onSelect: address.select,
      isSelected: address.isSelected,
      data: address,
      isSelectable: true
    });
  })), /*#__PURE__*/React.createElement("div", {
    className: "col-12"
  }, /*#__PURE__*/React.createElement(Button, {
    bordered: true,
    small: true,
    onClick: () => updateIsAddingNew(true)
  }, /*#__PURE__*/React.createElement("span", {
    className: "d-flex align-items-center"
  }, /*#__PURE__*/React.createElement(IconPlus, {
    width: "1.5rem",
    className: "mr-2"
  }), /*#__PURE__*/React.createElement("span", null, addNewAddress)))), /*#__PURE__*/React.createElement("div", {
    className: "col-12"
  }, /*#__PURE__*/React.createElement(InvoiceContainer, null, /*#__PURE__*/React.createElement(CheckoutInvoice, null)))));
};
var InvoiceContainer = styled.div.attrs({
  className: 'mt-4'
})(_templateObject || (_templateObject = _taggedTemplateLiteralLoose([""])));
var SpinnerContainer = styled.div.attrs({
  className: 'd-flex align-items-center justify-content-center'
})(_templateObject2 || (_templateObject2 = _taggedTemplateLiteralLoose(["\n  min-height: 50rem;\n  position: relative;\n"])));
var FadeAnimation = keyframes(_templateObject3 || (_templateObject3 = _taggedTemplateLiteralLoose(["\n0% {\n  opacity: 0;\n  transform: translateX(2rem);\n}\n100% {\n  opacity: 1;\n  transform: translateX(0);\n\n}\n"])));
var AddressBook = styled.span(_templateObject4 || (_templateObject4 = _taggedTemplateLiteralLoose(["\n  opacity: 0;\n  animation: 0.6s cubic-bezier(0.4, 0, 0.2, 1) 0s 1 normal forwards running\n    ", ";\n"])), FadeAnimation);
var InputsWrapper = styled.div.attrs({
  className: 'row g-4'
})(_templateObject5 || (_templateObject5 = _taggedTemplateLiteralLoose(["\n  & input {\n    border-radius: 0;\n  }\n"])));
//# sourceMappingURL=index.js.map