import {BlacklistItem} from "~/classes/blacklistItem";
import {Button, CircularProgress} from "@mui/material";
import useWindowDimensions from "~/hooks/windowDimensions";
import trimLink from "~/functions/trimLink";

export default function ItemList({ isFetching, blacklistItems, showDialog }: { isFetching: boolean, blacklistItems: BlacklistItem[], showDialog: Function }) {
    if (isFetching){
        return(
            <div className="loader">
                <CircularProgress aria-label="Loading…" />
            </div>
        )
    } else {
        if (blacklistItems.length > 0){
            const { width } = useWindowDimensions();
            return (
                <div className="list-container">
                    <div className="item-list">
                        {blacklistItems.map((item) => {
                            let summary = item.afk + item.cheater + item.griefer + item.cheater + item.useless + item.smurf;
                            let color = 'rgb(255 255 255 / 17%)';
                            if (summary < 2){
                                color = 'rgba(48,255,0,0.1)';
                            } else if (summary >= 2 && summary <= 4) {
                                color = 'rgba(255,235,0,0.1)';
                            } else if (summary > 4 && summary <= 10) {
                                color = 'rgba(255,136,0,0.1)';
                            } else {
                                color = 'rgba(255,0,0,0.1)';
                            }
                            return <Button
                                onClick={() => showDialog(item)}
                                variant="text"
                                sx={{
                                    margin: '3px 5px',
                                    '&:hover': {
                                        backgroundColor: color
                                    }
                                }}
                            >
                                {width < 570 ? trimLink(item.link) : item.link} | {item.nicknames[item.nicknames.length - 1]}
                            </Button>
                        })}
                    </div>
                </div>
            )
        } else {
            return (
                <div className="list-container">
                    <p style={{color: '#E0E3E7'}}>List is empty</p>
                </div>
            )
        }
    }
}