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

var _templateObject;

import React from 'react';
import { useCheckoutFormBillingState, useLocalLabels } from '@sentecacommerce-theme/lib';
import { Button, IconPlus, Checkbox, CompanyPreview } from '../../../Common';
import styled from 'styled-components';
import { CheckoutCompanyForm } from './Components';
import { CheckoutTitle } from '../UI';
export var CheckoutInvoice = () => {
  var {
    billingAddressList,
    updateIsWithBillingAddress,
    isWithBillingAddress,
    canSaveBillingAddress,
    saveBillingAddress,
    isAddingNew,
    updateIsAddingNew
  } = useCheckoutFormBillingState();
  var {
    withInvoiceLabel,
    cancelLabel,
    addNewCompanyLabel,
    chooseCompany,
    saveCompany
  } = useLocalLabels();
  var showForm = Boolean(isAddingNew || !(billingAddressList != null && billingAddressList.length));
  return /*#__PURE__*/React.createElement(InputsWrapper, null, /*#__PURE__*/React.createElement("div", {
    className: "col-12",
    style: {}
  }, /*#__PURE__*/React.createElement(Checkbox, {
    size: "tiny",
    label: withInvoiceLabel,
    isChecked: Boolean(isWithBillingAddress),
    onChange: () => updateIsWithBillingAddress(!isWithBillingAddress)
  })), isWithBillingAddress && showForm && /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(CheckoutCompanyForm, null), canSaveBillingAddress && /*#__PURE__*/React.createElement("div", {
    className: "col-12"
  }, /*#__PURE__*/React.createElement("div", {
    className: "d-flex align-items-center"
  }, Boolean(billingAddressList == null ? void 0 : billingAddressList.length) && /*#__PURE__*/React.createElement("div", {
    className: "mr-2"
  }, /*#__PURE__*/React.createElement(Button, {
    variant: "light",
    bordered: true,
    small: true,
    type: "button",
    onClick: () => updateIsAddingNew(false)
  }, /*#__PURE__*/React.createElement("span", {
    className: "d-flex align-items-center"
  }, /*#__PURE__*/React.createElement("span", null, cancelLabel)))), /*#__PURE__*/React.createElement(Button, {
    small: true,
    type: "button",
    onClick: saveBillingAddress
  }, /*#__PURE__*/React.createElement("span", {
    className: "d-flex align-items-center"
  }, /*#__PURE__*/React.createElement("span", null, saveCompany)))))), isWithBillingAddress && !showForm && /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement("div", {
    className: "col-12"
  }, /*#__PURE__*/React.createElement(CheckoutTitle, {
    className: "mb-3",
    data: chooseCompany
  })), /*#__PURE__*/React.createElement("div", {
    className: "col-12"
  }, billingAddressList == null ? void 0 : billingAddressList.map(address => /*#__PURE__*/React.createElement(CompanyPreview, {
    data: address,
    isSelectable: true,
    onChange: address.select,
    isSelected: address.isSelected,
    key: address._id
  }))), /*#__PURE__*/React.createElement("div", {
    className: "col-12"
  }, /*#__PURE__*/React.createElement(Button, {
    variant: "primary",
    bordered: true,
    small: true,
    type: "button",
    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, addNewCompanyLabel))))));
};
var InputsWrapper = styled.div.attrs({
  className: 'row g-4'
})(_templateObject || (_templateObject = _taggedTemplateLiteralLoose([""])));
//# sourceMappingURL=index.js.map