hunt-blacklist-frontend/app/components/reportDialog.tsx

import {
    Button,
    Dialog,
    DialogContent,
    DialogTitle,
    Divider,
    TextField
} from "@mui/material";
import {useState} from "react";
import TitleHeader from "~/components/itemDialog/titleHeader";
import {BlacklistReport} from "~/classes/blacklistReport";
import {sendReport} from '~/api';
import QualityItem from "~/components/reportDialog/qualityItem";
import {
    afkLabels,
    cheaterLabels,
    grieferLabels,
    smurfLabels,
    toxicLabels,
    uselessLabels
} from "~/collections/qualityRatingLabelText";

export default function ReportDialog({ open, handleClose }: { open: boolean, handleClose: Function }){

    const [link, setLink] = useState('');
    const [nickname, setNickname] = useState('');
    const [comment, setComment] = useState('');
    const [afk, setAfk] = useState(0);
    const [cheater, setCheater] = useState(0);
    const [griefer, setGriefer] = useState(0);
    const [toxic, setToxic] = useState(0);
    const [useless, setUseless] = useState(0);
    const [smurf, setSmurf] = useState(0);
    const [loading, setLoading] = useState(false);

    const clearValues = () => {
        setLink('');
        setNickname('');
        setComment('');
        setAfk(0);
        setCheater(0);
        setGriefer(0);
        setToxic(0);
        setUseless(0);
        setSmurf(0);
    };

    const handleSend = async () => {
        setLoading(true);

        let cleanLink = link.trim().toLowerCase();

        if (cleanLink.endsWith('/')) {
            cleanLink = cleanLink.slice(0, -1);
        }

        setLink(cleanLink);
        let blacklistReport = new BlacklistReport(
            cleanLink,
            nickname,
            comment,
            afk * 2,
            cheater * 2,
            griefer * 2,
            toxic * 2,
            useless * 2,
            smurf * 2
        );

        await sendReport(blacklistReport).then((result: boolean) => {
            setLoading(false);
            clearValues();
            handleClose();
        });
    };

    return (
        <>
            <Dialog
                open={open}
                onClose={() => handleClose()}
            >
                <DialogTitle>
                    <TitleHeader name={'Creating Hunt: Showdown player report'} handleClose={handleClose} isLink={false}/>
                </DialogTitle>
                <Divider sx={{marginTop: '10px', marginBottom: '10px', alignSelf: 'center'}}/>
                <DialogContent>
                    <TextField
                        id="steam-link-field"
                        label="Steam profile link"
                        variant="outlined"
                        value={link}
                        onChange={(e) => setLink(e.target.value)}
                        fullWidth
                        sx={{marginBottom: '20px'}}
                    />
                    <TextField
                        id="steam-nickname-field"
                        label="Steam profile nickname"
                        variant="outlined"
                        value={nickname}
                        onChange={(e) => setNickname(e.target.value)}
                        fullWidth
                        sx={{marginBottom: '20px'}}
                    />
                    <TextField
                        id="steam-comment-field"
                        label="Your comment"
                        variant="outlined"
                        value={comment}
                        onChange={(e) => setComment(e.target.value)}
                        fullWidth
                        multiline
                        minRows={4}
                        sx={{marginBottom: '20px', color: '#E0E3E7'}}
                    />
                    <div style={{display: 'flex', flexDirection: 'column'}}>
                        <span className="qualities-header" style={{fontSize: "1.5rem", marginBottom: "10px"}}>Rate the player's negative qualities on a scale of 0 to 5</span>
                        <QualityItem name={"AFK"} value={afk} setValue={setAfk} labels={afkLabels}/>
                        <QualityItem name={"Cheater"} value={cheater} setValue={setCheater} labels={cheaterLabels}/>
                        <QualityItem name={"Griefer"} value={griefer} setValue={setGriefer} labels={grieferLabels}/>
                        <QualityItem name={"Toxic"} value={toxic} setValue={setToxic} labels={toxicLabels}/>
                        <QualityItem name={"Useless"} value={useless} setValue={setUseless} labels={uselessLabels}/>
                        <QualityItem name={"Smurf"} value={smurf} setValue={setSmurf} labels={smurfLabels}/>
                    </div>
                    <div className="report-dialog-actions" style={{}}>
                        <Button loading={loading} onClick={() => handleSend()} variant="contained">Send</Button>
                        <Button onClick={() => handleClose()} variant="outlined">Cancel</Button>
                    </div>
                </DialogContent>
            </Dialog>
        </>
    )
}