import React from 'react';
import Link from 'component/link';
import Modal from 'component/modal';
import {
  FormRow
} from 'component/form';

const WalletSend = (props) => {
  const {
    sendToAddress,
    closeModal,
    modal,
    setAmount,
    setAddress,
    amount,
    address,
  } = props

  return (
    <section className="card">
      <form onSubmit={sendToAddress}>
        <div className="card__title-primary">
          <h3>{__("Send Credits")}</h3>
        </div>
        <div className="card__content">
          <FormRow label={__("Amount")} postfix="LBC" step="0.01" type="number" placeholder="1.23" size="10" onChange={setAmount} value={amount} />
        </div>
        <div className="card__content">
          <FormRow label={__("Recipient Address")} placeholder="bbFxRyXXXXXXXXXXXZD8nE7XTLUxYnddTs" type="text" size="60" onChange={setAddress} value={address} />
        </div>
        <div className="card__actions card__actions--form-submit">
          <Link button="primary" label={_("Send")} onClick={sendToAddress} disabled={!(parseFloat(amount) > 0.0) || !address} />
          <input type='submit' className='hidden' />
        </div>
      </form>
      {modal == 'insufficientBalance' && <Modal isOpen={true} contentLabel={__("Insufficient balance")} onConfirmed={closeModal}>
        {__("Insufficient balance: after this transaction you would have less than 1 LBC in your wallet.")}
      </Modal>}
      {modal == 'transactionSuccessful' && <Modal isOpen={true} contentLabel={__("Transaction successful")} onConfirmed={closeModal}>
        {__("Your transaction was successfully placed in the queue.")}
      </Modal>}
      {modal == 'transactionFailed' && <Modal isOpen={true} contentLabel={__("Transaction failed")} onConfirmed={closeModal}>
        {__("Something went wrong")}:
      </Modal>}
    </section>
  )
}

export default WalletSend