import React, { useState, useEffect } from 'react';
import { withRouter, useParams } from 'react-router-dom';
import axios from "axios";
import './Flow.css';
import { formatTime, timestampToDate } from "../common/formatting";
import {errorToast} from "../common/errorHelpers";

const WorkFlow = (props) => {
  const { homie_id } = useParams();

  const [work, setWork] = useState([]);

  useEffect( () => {
    (async () => {
      try {
        const response = await axios.get(`/api/work?homie_id=${parseInt(homie_id)}`);
        if (response.status === 200 && response.data){
          setWork(response.data);
        }
      } catch (e) {
        errorToast();
      }
    })();
  }, [homie_id]);

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

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

          <div className={`flex-center ${singleWorkData.amount > 0 ? 'amount-green' : ''}`}>{ formatTime(singleWorkData.amount) }</div>
        </div>
      </div>
    </li>
  ));

  const totalStats = () => {
    const totalCount = work.length;
    const firstFlowRow = totalCount > 0 ? work[0] : undefined;
    const lastFlowRow = totalCount > 0 ? work[work.length - 1] : undefined;
    const totalFlow = work.reduce((sum, record) => sum + parseInt(record.amount), 0);

    const fromDate = lastFlowRow ? timestampToDate(lastFlowRow['created_at']) : '';
    const toDate = firstFlowRow ? timestampToDate(firstFlowRow['created_at']) : '';

    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 work:</span> <strong>{formatTime(totalFlow)}</strong>
          </div>
        </div>
      </div>
    )
  }

  return (
    <div>
      { totalStats() }
      <ul className="collapsible">
        { flowData }
      </ul>
    </div>
  );
}

export default withRouter(WorkFlow);