import React, { useState } from 'react';
import { withRouter } from 'react-router-dom';
import { Switch } from 'react-materialize';
import './Flow.css';
import CashFlow from "./CashFlow";
import WorkFlow from "./WorkFlow";

const Flow = (props) => {
  const [flowType, setFlowType] = useState('cash');

  return (
    <div className="container">
      <div className='switch-box'>
        <Switch
          offLabel="Cash"
          onChange={(e) => setFlowType(e.target.checked === true ? 'work' : 'cash')}
          onLabel="Work"
        />
  const [flow, setFlow] = useState([]);

  const og = props.og;

  useEffect( () => {
    (async () => {
      try {
        const response = await axios.get(`/api/money_moves?homie_id=${parseInt(homie_id)}`);
        if (response.status === 200 && response.data){
          setFlow(response.data);
        }
      } catch (e) {
        M.toast({ html: "Yo! It ain't workin'" });
      }
    })();
  }, [homie_id]);

  const dateBlock = (timestamp) => <span className="grey-text">{ timestampToDate(timestamp) }</span>


  const flowData = flow.map( (singleFlowData, index) => (
    <li key={index}>
      <div className="collapsible-header record">
        <div className="flex-row opposite-sides-content">
          <div className="flex-col">
            <div>{ singleFlowData.description }</div>
            <div>{ dateBlock(singleFlowData['created_at']) }</div>
          </div>

          <div className={`flex-center ${singleFlowData.amount > 0 ? 'amount-green' : ''}`}>{ formatMoney(singleFlowData.amount, og) }</div>
        </div>
      </div>

      { flowType === 'cash' && <CashFlow /> }
      { flowType === 'work' && <WorkFlow /> }
    return (
      <div>
        <br />
        <div className="row">
          <div className="col s6">
            <strong>{`${totalCount} Records`}</strong><span className="grey-text">{` • ${fromDate} - ${toDate}`}</span>
          </div>
          <div className="col s6 right-align">
            <span className="grey-text">Total flow:</span> <strong>{formatMoney(totalFlow, og)}</strong>
          </div>
        </div>
      </div>
    )
  }

    </div>
  );
}

export default withRouter(Flow);