const Address = ({ provideApi }) => {
  const { address, setAddress, errAddress, seterrAddress, setAddressEv, isValid } = useAddress();

  provideApi( {
    isValid,
    getAddress: () => address
  } );

  return (
    <div>
      <label>
        Address:
        <input value={ address } onChange={ setAddressEv } type="text" />
        {
          errAddress ? <span className="invalid">invalid</span> : <span className="valid">valid</span>
        }
      </label>

      <button onClick={ isValid }>OK</button>

    </div>
  );
}

const App = () => {
  let isShippingAddressValid, getShippingAddress, isBillingAddressValid, getBillingAddress;

  const setShippingAddressApi = (api) => {
    ({ isValid: isShippingAddressValid, getAddress: getShippingAddress } = api);

  };
  const setBillingAddressApi = (api) => {
    ({ isValid: isBillingAddressValid, getAddress: getBillingAddress } = api);
  };


  const isShippingAddressValidAlert = () => {
    alert( `isvalid: ${isShippingAddressValid()}` );
  };

  const isBillingAddressValidAlert = () => {
    alert( `isvalid: ${isBillingAddressValid()}` );
  }

  return (
    <div className="demoApp">

      <h2>Shipping Address</h2>
      <Address provideApi={ setShippingAddressApi } />

      <hr />

      <h2>Billing Address</h2>
      <Address provideApi={ setBillingAddressApi } />

      <button onClick={ isShippingAddressValidAlert }> Validate shipping and tell me if it's valid </button>

      <button onClick={ isBillingAddressValidAlert }> Validate shipping and tell me if it's valid </button>



    </div>
  );
};