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

var _templateObject;

import React from 'react';
import { useLocalLabels, useCheckoutFormShippingState, useCheckoutErrorFields, useGlobalLabels } from '@sentecacommerce-theme/lib';
import { Button, TextInput as Input } from '../../../../../Common';
import { CheckoutTitle } from '../../../UI';
import { CheckoutSelectDeliveryOption } from '../CheckoutDeliveryOptions';
import styled from 'styled-components';
export var CheckoutAddressForm = () => {
  var {
    errors,
    onInputChange,
    data: address,
    isSavedAddressListEnabled,
    saveShippingAddress,
    updateIsAddingNew,
    savedAddressList
  } = useCheckoutFormShippingState();
  var {
    errorRef
  } = useCheckoutErrorFields();
  var {
    buttons
  } = useGlobalLabels();
  var labels = useLocalLabels();

  var onChange = e => {
    onInputChange == null ? void 0 : onInputChange(e.target.name, e.target.value);
  };

  return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement("div", {
    className: "col-12"
  }, /*#__PURE__*/React.createElement("div", {
    className: "d-flex mt-4 pt-2 justify-content-between align-items-center"
  }, /*#__PURE__*/React.createElement(CheckoutTitle, {
    className: "m-0 p-0",
    data: labels.chooseCourier
  }), Boolean(savedAddressList == null ? void 0 : savedAddressList.length) && isSavedAddressListEnabled && /*#__PURE__*/React.createElement(Button, {
    bordered: true,
    small: true,
    onClick: () => updateIsAddingNew(false)
  }, buttons.cancel))), /*#__PURE__*/React.createElement(CheckoutSelectDeliveryOption, null), /*#__PURE__*/React.createElement("div", {
    className: "col-12"
  }, /*#__PURE__*/React.createElement(CheckoutTitle, {
    className: "mb-0 mt-4 pt-2",
    data: labels.personalInfo
  })), /*#__PURE__*/React.createElement(DesktopHalf, null, /*#__PURE__*/React.createElement(Input, {
    value: (address == null ? void 0 : address.firstName) || '',
    onChange: onChange,
    id: "adbook-firstName",
    label: labels.firstNameLabel,
    name: "firstName",
    isRequired: true,
    errors: errors,
    inputSize: "normal",
    errorRef: errorRef
  })), /*#__PURE__*/React.createElement(DesktopHalf, null, /*#__PURE__*/React.createElement(Input, {
    value: (address == null ? void 0 : address.lastName) || '',
    onChange: onChange,
    id: "adbook-lastName",
    isRequired: true,
    label: labels.lastNameLabel,
    errors: errors,
    name: "lastName",
    inputSize: "normal",
    errorRef: errorRef
  })), /*#__PURE__*/React.createElement(DesktopHalf, null, /*#__PURE__*/React.createElement(Input, {
    value: (address == null ? void 0 : address.phoneNumber) || '',
    onChange: onChange,
    id: "adbook-phoneNumber",
    type: "number",
    isRequired: true,
    label: labels.phoneLabel,
    errors: errors,
    name: "phoneNumber",
    inputSize: "normal",
    errorRef: errorRef
  })), /*#__PURE__*/React.createElement(DesktopHalf, null, /*#__PURE__*/React.createElement(Input, {
    value: (address == null ? void 0 : address.email) || '',
    onChange: onChange,
    type: "email",
    id: "adbook-email",
    isRequired: true,
    label: labels.emailLabel,
    errors: errors,
    name: "email",
    inputSize: "normal",
    errorRef: errorRef
  })), isSavedAddressListEnabled && /*#__PURE__*/React.createElement("div", {
    className: "col-12"
  }, /*#__PURE__*/React.createElement(Button, {
    type: "button",
    bordered: true,
    onClick: saveShippingAddress
  }, labels.saveAddress)));
};
var DesktopHalf = styled.div.attrs({
  className: 'col-12'
})(_templateObject || (_templateObject = _taggedTemplateLiteralLoose([""])));
//# sourceMappingURL=index.js.map