import { Course } from "@/data";
import { Button, Grid, TextField } from "@material-ui/core";
import { Alert, Autocomplete } from "@material-ui/lab";
import React from "react";
import { sampleCourse } from "@/provider/dummy/student";
import { useTranslation } from "react-i18next";
import { useFormikContext } from "formik";
import { InternshipFormValues } from "@/forms/internship";

export const StudentForm = () => {
    const { t } = useTranslation();
    const { values: { student } } = useFormikContext<InternshipFormValues>();

    return <>
        <Grid container>
            <Grid item md={4}>
                <TextField label={ t("forms.internship.fields.first-name") } value={ student.name } disabled fullWidth/>
            </Grid>
            <Grid item md={4}>
                <TextField label={ t("forms.internship.fields.last-name") } value={ student.surname } disabled fullWidth/>
            </Grid>
            <Grid item md={4}>
                <TextField label={ t("forms.internship.fields.album") } value={ student.albumNumber } disabled fullWidth/>
            </Grid>
            <Grid item md={9}>
                <Autocomplete
                    getOptionLabel={ (course: Course) => course.name }
                    renderInput={ props => <TextField { ...props } label={ t("forms.internship.fields.course") } fullWidth/> }
                    options={[ sampleCourse ]}
                    value={ student.course }
                    disabled
                />
            </Grid>
            <Grid item md={3}>
                <TextField label={ t("forms.internship.fields.semester") } value={ student.semester } disabled fullWidth/>
            </Grid>
            <Grid item>
                <Alert severity="warning" action={ <Button color="inherit" size="small">skontaktuj się z opiekunem</Button> }>
                    Powyższe dane nie są poprawne?
                </Alert>
            </Grid>
        </Grid>
    </>;
}