import { Paper, makeStyles, ListItem, ListItemAvatar, ListItemText, TableContainer, Table, TableHead, TableRow, TableCell, TableBody, Avatar} from "@material-ui/core";
import { Rating } from "@material-ui/lab";
import capitalize from "capitalize";
import { useCallback, useEffect, useState } from "react";
import { useTranslation } from "react-i18next";
import { useDispatch, useSelector } from "react-redux";
import { toast } from "react-toastify";
import { IUserRating } from "../../../../../Application/DTOs/UsersDto/UsersDto.type";
import { UsersApi } from "../../../Api/Users/Users";
import { AppState } from "../../../Redux";
import { setLoader } from "../../../Redux/Loader/actions";
import { USER_ROLES } from "../../../Types/Constants";
import { IDriverRatingTableProps } from "./DriverRatingTable.types";

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

const createRow = (userRating: IUserRating) => {
    const { averageRating, user } = userRating

    let name = capitalize.words(`${user.firstName} ${user.lastName}`)
    let initial = name[0]

    return (
        <TableRow>
            <TableCell>
                <ListItem>
                    <ListItemAvatar>
                        <Avatar>{initial}</Avatar>
                    </ListItemAvatar>
                    <ListItemText>
                        {name}
                 </ListItemText>
                </ListItem>
            </TableCell>
            <TableCell align="center">
                <Rating size="large" value={averageRating} precision={0.2} readOnly />
            </TableCell>
        </TableRow>
    )
}

const userApi = new UsersApi()

const {
    DRIVER,
    ADMIN_USER
} = USER_ROLES

function DriverRatingTable(props: IDriverRatingTableProps) {
    const classes = useStyles(props)
    const user = useSelector((state: AppState) => state.user)
    const isUserAdmin = user.response?.type === ADMIN_USER
    const userCountry = user.response?.country
    const dispatch = useDispatch()
    const [t] = useTranslation('DriverRatingTable')
    const [userRatings, setUserRatings] = useState<IUserRating[]>([])


    const getUsers = useCallback(() => {
        dispatch(setLoader(true))
        userApi.getUsersWithRating([DRIVER], isUserAdmin ? userCountry : undefined)
            .then((response) => {
                setUserRatings(response.data)
                dispatch(setLoader(false))
            })
            .catch(err => {
                console.log(`err`, err)
                dispatch(setLoader(false))
                toast.error(t('error_getting_users'))
            })
    }, [dispatch, t, isUserAdmin, userCountry])

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


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


export default DriverRatingTable