import React, { useCallback } from "react";
import { Edition } from "@/data/edition";
import { Nullable } from "@/helpers";
import { useTranslation } from "react-i18next";
import { FieldProps, useFormikContext, Field } from "formik";
import { identityTransformer, Transformer } from "@/serialization";
import { Grid, TextField, Typography } from "@material-ui/core";
import { useSpacing } from "@/styles";
import { Moment } from "moment-timezone";
import { KeyboardDatePicker as DatePicker } from "@material-ui/pickers";
import { TextField as TextFieldFormik } from "formik-material-ui";
import { Course } from "@/data";
import { Autocomplete } from "@material-ui/lab";
import { useAsync } from "@/hooks";
import api from "@/management/api";

export type EditionFormValues = Nullable<Edition>;
export const initialEditionFormValues: EditionFormValues = {
    course: null,
    endDate: null,
    minimumInternshipHours: 80,
    proposalDeadline: null,
    reportingEnd: null,
    reportingStart: null,
    startDate: null
}

export const editionFormValuesTransformer: Transformer<Edition, EditionFormValues> = identityTransformer;

export const CoursePickerField = ({ field, form, meta, ...props}: FieldProps<Course>) => {
    const courses = useAsync(useCallback(() => api.course.all(), []));
    const { t } = useTranslation("management");

    return <Autocomplete
        options={ courses.isLoading ? [] : courses.value as Course[] }
        renderInput={ props => <TextField { ...props } label={ t("edition.field.course") } fullWidth/> }
        getOptionLabel={ course => course.name }
        value={ field.value }
        onChange={ field.onChange }
        onBlur={ field.onBlur }
    />
}

export const DatePickerField = ({ field, form, meta, ...props }: FieldProps<Moment>) => {
    const { value, onChange, onBlur } = field;

    return <DatePicker value={ value }
                       onChange={ onChange }
                       onBlur={ onBlur }
                       { ...props }
                       format="DD.MM.yyyy"
                       disableToolbar fullWidth
                       variant="inline"
    />
}

export const EditionForm = () => {
    const { t } = useTranslation("management");
    const spacing = useSpacing(2);

    return <div className={ spacing.vertical }>
        <Typography variant="subtitle1">{ t("edition.fields.basic") }</Typography>
        <Grid container>
            <Grid item xs={ 12 } md={ 6 }>
                <Field name="startDate" component={ DatePickerField } label={ t("edition.field.start") } />
            </Grid>
            <Grid item xs={ 12 } md={ 6 }>
                <Field name="endDate" component={ DatePickerField } label={ t("edition.field.end") } />
            </Grid>
            <Grid item xs={ 12 } md={ 6 }>
                <Field name="course" component={ CoursePickerField } label={ t("edition.field.course") } />
            </Grid>
            <Grid item xs={ 12 } md={ 6 }>
            </Grid>
            <Grid item xs={ 12 } md={ 6 }>
                <Field name="minimumInternshipHours" component={ TextFieldFormik } label={ t("edition.field.minimumInternshipHours") } />
            </Grid>
        </Grid>
        <Typography variant="subtitle1">{ t("edition.fields.deadlines") }</Typography>
        <Grid container>
            <Grid item xs={ 12 } md={ 6 }>
                <Field name="proposalDeadline" component={ DatePickerField } label={ t("edition.field.proposalDeadline") } />
            </Grid>
            <Grid item xs={ 12 } md={ 6 }>
            </Grid>
            <Grid item xs={ 12 } md={ 6 }>
                <Field name="reportingStart" component={ DatePickerField } label={ t("edition.field.reportingStart") } />
            </Grid>
            <Grid item xs={ 12 } md={ 6 }>
                <Field name="reportingEnd" component={ DatePickerField } label={ t("edition.field.reportingEnd") } />
            </Grid>
        </Grid>
    </div>
}
