import { Paper, makeStyles,     Table, TableHead, TableRow, TableCell, TableBody,TableContainer  } 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 { IJobAggregatedJobs } from "../../../../../Application/DTOs/CompanyDto/CompanyDto.type";
import { Company } from "../../../Api/Company/Company";
import { setLoader } from "../../../Redux/Loader/actions";
import { IAggregatedJobTableProps } from "./AggregatedJobTable.types";

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

const companyApi = new Company()


function AggregatedJobTable(props: IAggregatedJobTableProps) {
    const classes = useStyles(props)
    const dispatch = useDispatch()
    const [t] = useTranslation('CompanyRankingTable')
    const [jobData, setJobData] = useState<IJobAggregatedJobs>({ completedJobToday: [],
        completedJobThisMonth: [],
        completedJobThisYear : []})
    const aggreRows = Object.keys(jobData)
    const getJobs = useCallback(() => {
        dispatch(setLoader(true))
        companyApi.getAggregatedJobs('completed')
            .then(response => {
                setJobData(response.data['aggregatedData'])
                dispatch(setLoader(false))
            })
            .catch(err => {
                console.log(`err`, err)
                toast.error(t('error_getting_jobs'))
                dispatch(setLoader(false))
            })
    }, [dispatch,t])

    const createRowGroup = (key: string) => {
    let title1 = ''
    let title2 = ''
    let title3 = ''

    switch (key) {
        case 'completedJobToday':
            title1 = t('completed_jobs_today_no')
            title2 = t('completed_jobs_today_fee')
            title3 = t('completed_jobs_today_comm')
            break;
        case 'completedJobThisMonth':
            title1 = t('completed_jobs_30_no')
            title2 = t('completed_jobs_30_fee')
            title3 = t('completed_jobs_30_comm')
            break;
        case 'completedJobThisYear':
            title1 = t('completed_jobs_year_no')
            title2 = t('completed_jobs_year_fee')
            title3 = t('completed_jobs_year_comm')
            break;        
    }
    
    let data = jobData[key as keyof IJobAggregatedJobs]

        return (
            <TableBody>
                <TableRow>
                    <TableCell>
                        {title1}
                    </TableCell>
                    <TableCell align="center">
                    {data.empty_park?.JobCount || 0}
                    </TableCell>
                    <TableCell align="center">
                    {data.full_truck_load?.JobCount || 0}
                    
                    </TableCell>
                    <TableCell align="center">
                    {data.loose_cargo?.JobCount || 0}
                    
                    </TableCell>
                    <TableCell align="center">
                    {data.other?.JobCount || 0}
                        
                    </TableCell>
                    <TableCell align="center">
                    {data.rail?.JobCount || 0}
                        
                    </TableCell>
                    <TableCell align="center">
                    {data.wharf?.JobCount || 0}
                        
                    </TableCell>
                </TableRow>
                <TableRow>
                    <TableCell>
                        {title2}
                    </TableCell>
                    <TableCell align="center">
                    {data.empty_park?.TotalFee || 0}
                    </TableCell>
                    <TableCell align="center">
                    {data.full_truck_load?.TotalFee || 0}
                    
                    </TableCell>
                    <TableCell align="center">
                    {data.loose_cargo?.TotalFee || 0}
                    
                    </TableCell>
                    <TableCell align="center">
                    {data.other?.TotalFee || 0}
                        
                    </TableCell>
                    <TableCell align="center">
                    {data.rail?.TotalFee || 0}
                        
                    </TableCell>
                    <TableCell align="center">
                    {data.wharf?.TotalFee || 0}
                        
                    </TableCell>
                </TableRow>
                <TableRow>
                    <TableCell>
                        {title3}
                    </TableCell>
                    <TableCell align="center">
                    {data.empty_park?.totalCommision || 0}
                    </TableCell>
                    <TableCell align="center">
                    {data.full_truck_load?.totalCommision || 0}
                    
                    </TableCell>
                    <TableCell align="center">
                    {data.loose_cargo?.totalCommision || 0}
                    
                    </TableCell>
                    <TableCell align="center">
                    {data.other?.totalCommision || 0}
                        
                    </TableCell>
                    <TableCell align="center">
                    {data.rail?.totalCommision || 0}
                        
                    </TableCell>
                    <TableCell align="center">
                    {data.wharf?.totalCommision || 0}
                        
                    </TableCell>
                </TableRow>
            </TableBody>
        )
    }
    
    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>
                            <TableCell style={{ minWidth: 100 }} align="left">
                              {t('empty_park')}

                            </TableCell>
                            <TableCell align="center">
                              {t('full_truck_load')}
                            </TableCell>
                            <TableCell align="center">
                              {t('loose_cargo')}
                            </TableCell>
                            <TableCell align="center">
                                Other

                            </TableCell>
                            <TableCell align="center">
                                {t('rail')}


                            </TableCell>
                            <TableCell align="center">
                              {t('wharf')}
                                

                            </TableCell>
                        </TableRow>
                    </TableHead>
                
                    {aggreRows.map(createRowGroup)}
                       
                </Table>
            </TableContainer>
        </Paper>
    )
}

export default AggregatedJobTable