import React, { useState } from "react";
import { InternshipSubmission } from "@/management/api/internship";
import { Button, Dialog, DialogActions, DialogContent, DialogProps, DialogTitle, FormControl, InputLabel, MenuItem, Select } from "@material-ui/core";
import { useTranslation } from "react-i18next";

export type GradeDialogProps = {
    internship: InternshipSubmission;
    onSubmit: (grade: number) => void;
} & Omit<DialogProps, "onSubmit">;

export const GradeDialog = ({ internship, onSubmit, ...props }: GradeDialogProps) => {
    const [grade, setGrade] = useState<number | null>(internship.grade || null);
    const { t } = useTranslation("management");

    const handleChange = (event: React.ChangeEvent<{ value: unknown }>) => {
        setGrade(event.target.value as number);
    };

    return <Dialog maxWidth="sm" fullWidth { ...props }>
        <DialogTitle>{ t("internship.grade") }</DialogTitle>
        <DialogContent>
            <FormControl fullWidth>
                <InputLabel id="demo-simple-select-label">{ t("internship.grade") }</InputLabel>
                <Select
                    labelId="demo-simple-select-label"
                    id="demo-simple-select"
                    value={ grade }
                    onChange={ handleChange }
                >
                    <MenuItem value={ 2.0 }>2 - Niedostateczny</MenuItem>
                    <MenuItem value={ 3.0 }>3 - Dostateczny</MenuItem>
                    <MenuItem value={ 3.5 }>3.5 - Dostateczny plus</MenuItem>
                    <MenuItem value={ 4.0 }>4 - Dobry</MenuItem>
                    <MenuItem value={ 4.5 }>4.5 - Dobry plus</MenuItem>
                    <MenuItem value={ 5.0 }>5 - Bardzo Dobry</MenuItem>
                </Select>
            </FormControl>
        </DialogContent>
        <DialogActions>
            <Button variant="contained" color="primary" onClick={ () => onSubmit(grade as number) } disabled={ grade === null }>{ t("save") }</Button>
        </DialogActions>
    </Dialog>
}