import React, { useState, useEffect } from 'react'; 
import { Button, Table } from 'react-materialize';
import './Cash.css';
import axios from 'axios';
import { MAKE_MONEY_MOVE } from '../RouteNames';
import { withRouter } from 'react-router-dom';
import { formatMoney } from '../common/formatting';

const Cash = (props) => {
  const [homiesCash, setHomiesCash] = useState([]);
  //const [importance, setImportance] = useState(10);

  useEffect( () => { 
    const getCashForHomies = async () => {
      try { 
        const cash = await axios.get(`/api/homies/cash`);
        setHomiesCash(cash.data);
      } catch (e) {
        console.log("Error fetching", e); 
      }
    };
    getCashForHomies(); 
  }, []);

  const cashTableBody = homiesCash.map( (homieLine) => {
    return (
      <tr key={homieLine.homie.id}>
        <td className="cash-cell-left">
          <a href={`/homie/${homieLine.homie.id}/flow`}>{ homieLine.homie.name }</a>
        </td>
        <td className="cash-cell-right">
          { formatMoney(homieLine.amount) }
        </td>
        <td className="cash-cell-left">
           [ settle ]
        </td>
      </tr>
    );
  });

  return (
    <div className="container">
      <Table>
        <thead>
        <tr>
         <th>
           Homie
         </th>
         <th>
           Cash
         </th>
         <th>
           Actions
         </th>
        </tr>
        </thead>
        <tbody>
          { cashTableBody }
        </tbody>
      </Table>

      <Button
        floating
        large
        className="green"
        fab={{direction: 'bottom'}}
        waves="light"
        icon="add"
        onClick={
          () => {
            props.history.push(MAKE_MONEY_MOVE)
          }
        }
      />

    </div>
  );
}


export default withRouter(Cash);