import type {BlacklistItem} from "~/classes/blacklistItem";
import {List, Dialog, DialogContent, DialogTitle, ListItem, ListItemText, Divider} from "@mui/material";

function NicknameList({nicknames}: {nicknames: string[]|undefined}){
    if (!nicknames){
        return (<></>)
    }
    if (nicknames.length > 0){
        return (
            <>
                <p>Nicknames:</p>
                <List>
                    {nicknames.map((item) => {
                        return <ListItem className="report-nickname">{item}</ListItem>
                    })}
                </List>
            </>
        )
    } else {
        return (<></>)
    }
}

function CommentsList({comments}: {comments: string[]|undefined}){
    if (!comments){
        return (<></>)
    }
    if (comments.length > 0){
        return (
            <>
                <p>Comments:</p>
                <List>
                    {comments.map((item) => {
                        return <ListItem className="report-comment">{item}</ListItem>
                    })}
                </List>
            </>
        )
    } else {
        return (<></>)
    }
}

function Tag({tag, name}:{tag: number|undefined, name: string}){
    let classColor = "report-tag-count-good";
    if (tag){
        if (tag <= 10){
            classColor = "report-tag-count-good";
        } else if (tag > 10 && tag <= 25) {
            classColor = "report-tag-count-ok";
        } else if (tag > 25 && tag <= 50) {
            classColor = "report-tag-count-bad";
        } else {
            classColor = "report-tag-count-very-bad";
        }
    }

    return (
        <>
            <div className="report-tag">
                <span className={classColor}>{tag} </span>
                <span>{name}</span>
            </div>
        </>
    )
}

function TagList({afk, cheater, griefer, toxic, useless, smurf}:{afk: number|undefined, cheater: number|undefined, griefer: number|undefined, toxic: number|undefined, useless: number|undefined, smurf: number|undefined}){
    return (
        <>
            <div className="report-tag-list">
                <Tag tag={afk} name={'AFK'}/>
                <Tag tag={cheater} name={'Cheater'}/>
                <Tag tag={griefer} name={'Griefer'}/>
                <Tag tag={toxic} name={'Toxic'}/>
                <Tag tag={useless} name={'Useless'}/>
                <Tag tag={smurf} name={'Smurf'}/>
            </div>
        </>
    )
}

export default function ItemDialog({ blacklistItem, open, handleClose }: { blacklistItem: BlacklistItem|null, open: boolean, handleClose: Function }){
    return (
        <Dialog
            open={open}
            onClose={() => handleClose()}
        >
            <DialogTitle>
                <p>{blacklistItem?.link}</p>
                <TagList
                    afk={blacklistItem?.afk}
                    cheater={blacklistItem?.cheater}
                    griefer={blacklistItem?.griefer}
                    toxic={blacklistItem?.toxic}
                    useless={blacklistItem?.useless}
                    smurf={blacklistItem?.smurf}
                />
            </DialogTitle>
            <Divider sx={{marginTop: '10px', marginBottom: '10px', alignSelf: 'center'}}/>
            <DialogContent>
                <NicknameList nicknames={blacklistItem?.nicknames}/>
                <CommentsList comments={blacklistItem?.comments}/>
            </DialogContent>
        </Dialog>
    )
}