import { Paper, makeStyles, TableContainer, Table, TableHead, TableRow, TableCell, TableBody, } from "@material-ui/core";
import { useCallback, useEffect, useState } from "react";
import { useTranslation } from "react-i18next";
import { useDispatch } from "react-redux";
import { toast } from "react-toastify";
import { Company } from "../../../Api/Company/Company";
import { setLoader } from "../../../Redux/Loader/actions";
import { IDailyJobsMovementProps } from "./DailyMovement.types";
import { formatShortDate } from "../../../Utilities/DateTime";


const useStyles = makeStyles(() => ({
    paper: {
        height: (props: IDailyJobsMovementProps) => props.paperHeight
    },
    container: {
        maxHeight: (props: IDailyJobsMovementProps) => props.paperHeight,
    },
}))

const companyApi = new Company()


function DailyMovementTable(props: IDailyJobsMovementProps) {
    const classes = useStyles(props)
    const dispatch = useDispatch()
    const [t] = useTranslation('CompanyRankingTable')
    const [jobData, setJobData] = useState<[]>([])
    const [movementTypes, setMovementTypes] = useState<[]>([])


    const getJobs = useCallback(() => {
        dispatch(setLoader(true))
        companyApi.getAggregatedJobs('completed')
            .then(response => {
                setJobData(response.data['dailyJobs'])
                setMovementTypes(response.data['movementTypes'])
                dispatch(setLoader(false))
            })
            .catch(err => {
                console.log(`err`, err)
                toast.error(t('error_getting_jobs'))
                dispatch(setLoader(false))
            })
    }, [])

    
    const createHeaders = (key : any)=>{
        return <TableCell style={{ minWidth: 100 }} align="left">
       {formatShortDate(key['date'])}

        </TableCell>
    }

   
    const createRows = (key : any)=>{
        return <TableRow key={key['code']}>
            <TableCell>{t(key['code'])}</TableCell>
            {jobData.map((element) => <TableCell>{element[key['code']] || 0}</TableCell>)}
        </TableRow>
    }
    useEffect(() => {
        getJobs()
    }, [getJobs])

    return (
        <Paper className={classes.paper} elevation={5}>
            <TableContainer className={classes.container}>
                <Table stickyHeader>
                    <TableHead>
                        <TableRow>
                             <TableCell style={{ minWidth: 200 }} align="left">
            
                            </TableCell>
                            {jobData.map(createHeaders)}
                        </TableRow>
                    </TableHead>
                    <TableBody>
                        {movementTypes.map(createRows)}
                    </TableBody>

                       
                </Table>
            </TableContainer>
        </Paper>
    )
}

export default DailyMovementTable