import React, { useState, useEffect, useReducer } 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';
import YesNoModal from "../common/YesNoModal";
import { errorToast } from "../common/errorHelpers";
import M from 'materialize-css';

const Cash = (props) => {
  const [homiesCash, setHomiesCash] = useState([]);
  const [, forceUpdate] = useReducer(x => x + 1, 0);
  //const [importance, setImportance] = useState(10);
  const og = props.og;

  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 settleFlowForHomie = async (id) => {
    try {
      const response = await axios.delete(`/api/homies/${id}/settle`);
      if (response.status === 200 && response.data) {
        M.toast({ html: 'Settled' });
      }else{
        errorToast();
      }
    } catch(e) {
      errorToast();
    }
    forceUpdate();
  }

  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, og) }
        </td>
        <td className="cash-cell-left">
          [
            <YesNoModal
              body={"Maan, y'a sure about this? Flow history goes bye bye!"}
              yesAction={() => settleFlowForHomie(homieLine.homie.id)}
              triggerNode={<a href='#'>Settle</a>}
            />
          ]
        </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);