import React, { useContext } from 'react';

import { AppContext } from './ContextProvider';
import { useFormInput } from '../helpers/Hooks';
import {ToCoins, ToDate} from '../helpers/utils';


const Miner = () => {
  const { actions, state } = useContext(AppContext);
  const { addWallet } = actions;
  const { user } = state;
  const { wallets } = user;

  const { value: address, bind: bindAddress } = useFormInput('');

  return (
    <div className="miner">
      <form
        onSubmit={e => {
          e.preventDefault();
          addWallet(address);
        }}
      >
        <p>{!wallets ? 'you miner? your wow address miner pleas? ->' : 'add more address miner! ->'} <input {...bindAddress} /></p>
      </form>

      {wallets && Object.keys(wallets).map(wallet =>
        <div key={wallet}>
          <div>{wallet}</div>
          <div>last hashe: <ToDate timeStamp={wallets[wallet].lastHash} /></div>
          <div>all hashe: {wallets[wallet].totalHashes}</div>
          <div>all pay: <ToCoins coins={wallets[wallet].amtPaid} /></div>
          <div>still wait pay: <ToCoins coins={wallets[wallet].amtDue} /></div>
        </div>
      )}
    </div>
  )
};

export default Miner;