import React from 'react'
import PropTypes from 'prop-types'
import CurrencyIcon from 'components/CurrencyIcon'
import styles from './RequestForm.scss'

const RequestForm = ({
  requestform: { amount, memo },
  currency,
  crypto,

  setRequestAmount,
  setRequestMemo,

  onRequestSubmit
}) => {
  return (
    <div className={styles.container}>
      <section className={styles.amountContainer}>
        <label htmlFor='amount'>
          <CurrencyIcon currency={currency} crypto={crypto} />
        </label>
        <input
          type='text'
          size=''
          style={{ width: `${amount.length > 1 ? (amount.length * 15) - 5 : 25}%`, fontSize: `${190 - (amount.length ** 2)}px` }}
          value={amount}
          onChange={event => setRequestAmount(event.target.value)}
          id='amount'
        />
      </section>
      <section className={styles.inputContainer}>
        <label htmlFor='memo'>Request:</label>
        <input
          type='text'
          placeholder='Dinner, Rent, etc'
          value={memo}
          onChange={event => setRequestMemo(event.target.value)}
          id='memo'
        />
      </section>
      <section className={styles.buttonGroup}>
        <div className={styles.button} onClick={onRequestSubmit}>
          Request
        </div>
      </section>
    </div>
  )
}

RequestForm.propTypes = {

}

export default RequestForm