import { Course, Student } 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";

type StudentFormProps = {
    student: Student
}

export const StudentForm = ({ student }: StudentFormProps) => {
    return (
        <>
            <Grid container>
                <Grid item md={4}>
                    <TextField label="Imię" value={ student.name } disabled fullWidth/>
                </Grid>
                <Grid item md={4}>
                    <TextField label="Nazwisko" value={ student.surname } disabled fullWidth/>
                </Grid>
                <Grid item md={4}>
                    <TextField label="Nr Indeksu" value={ student.albumNumber } disabled fullWidth/>
                </Grid>
                <Grid item md={9}>
                    <Autocomplete
                        getOptionLabel={ (course: Course) => course.name }
                        renderInput={ props => <TextField { ...props } label={ "Kierunek" } fullWidth/> }
                        options={[ sampleCourse ]}
                        value={ student.course }
                        disabled
                    />
                </Grid>
                <Grid item md={3}>
                    <TextField label="Semestr" 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>
        </>
    );
}