import { Paper, makeStyles, ListItem, ListItemAvatar, ListItemText, TableContainer, Table, TableHead, TableRow, TableCell, TableBody, Avatar, Typography, Grid } from "@material-ui/core";
import capitalize from "capitalize";
import { useCallback, useEffect, useState } from "react";
import { useTranslation } from "react-i18next";
import { useDispatch } from "react-redux";
import { toast } from "react-toastify";
import { ICompanyTotalJobCount } from "../../../../../Application/DTOs/CompanyDto/CompanyDto.type";
import { Company } from "../../../Api/Company/Company";
import { setLoader } from "../../../Redux/Loader/actions";
import { ICompanyRankingTableProps } from "./CompanyRankingTable.types";

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

const companyApi = new Company()

const createRow = (companyWithCount: ICompanyTotalJobCount) => {
    const { company, totalJobCount } = companyWithCount
    let name = capitalize.words(company.companyName)
    let initial = name[0]


    return (
        <TableRow>
            <TableCell>
                <ListItem>
                    <ListItemAvatar>
                        <Avatar>{initial}</Avatar>
                    </ListItemAvatar>
                    <ListItemText>
                        {name}
                    </ListItemText>
                </ListItem>
            </TableCell>
            <TableCell align="center">
                {totalJobCount}
            </TableCell>
        </TableRow>
    )
}

function CompanyRankingTable(props: ICompanyRankingTableProps) {
    const classes = useStyles(props)
    const dispatch = useDispatch()
    const [t] = useTranslation('CompanyRankingTable')
    const [companies, setCompanies] = useState<ICompanyTotalJobCount[]>([])

    const getCompanies = useCallback(() => {
        dispatch(setLoader(true))
        companyApi.getCompaniesWithJobCount()
            .then(response => {
                setCompanies(response.data)
                dispatch(setLoader(false))
            })
            .catch(err => {
                console.log(`err`, err)
                toast.error(t('error_getting_companies'))
                dispatch(setLoader(false))
            })
    }, [])

    useEffect(() => {
        getCompanies()
    }, [getCompanies])

    return (
        <Paper className={classes.paper} elevation={5}>
            <TableContainer className={classes.container}>
                <Table stickyHeader>
                    <TableHead>
                        <TableRow>
                            <TableCell style={{ minWidth: 100 }} align="left">
                                {t('company_ranking')}
                            </TableCell>
                            <TableCell align="center">
                                {t('job_count')}
                            </TableCell>
                        </TableRow>
                    </TableHead>
                    <TableBody>

                        {companies.map(createRow)}
                    </TableBody>
                </Table>
            </TableContainer>
        </Paper>
    )
}

export default CompanyRankingTable