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';

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

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


  const formatMoney = (amount) => {
    const formatted = Number.parseFloat(amount).toFixed(2);
    return `${formatted} KM`;
  }

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

  return (
    <div>

       <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);