import { Button, FormHelperText, Grid, Typography } from "@material-ui/core";
import { Description as DescriptionIcon } from "@material-ui/icons";
import { DropzoneArea } from "material-ui-dropzone";
import { Actions } from "@/components";
import { Link as RouterLink, useHistory } from "react-router-dom";
import { route } from "@/routing";
import React, { useState } from "react";
import { Plan } from "@/data";
import { useTranslation } from "react-i18next";
import { InternshipPlanActions, useDispatch } from "@/state/actions";

export const PlanForm = () => {
    const { t } = useTranslation();

    const [plan, setPlan] = useState<Plan>({});

    const dispatch = useDispatch();
    const history = useHistory();

    const handleSubmit = () => {
        dispatch({ type: InternshipPlanActions.Send, plan });
        history.push(route("home"))
    }

    return <Grid container>
        <Grid item>
            <Typography variant="body1" component="p">{ t('forms.plan.instructions') }</Typography>
        </Grid>
        <Grid item>
            <Button href="https://eti.pg.edu.pl/documents/611675/100028367/indywidualny%20program%20praktyk" startIcon={ <DescriptionIcon /> }>
                { t('steps.plan.template') }
            </Button>
        </Grid>
        <Grid item>
            <DropzoneArea acceptedFiles={["image/*", "application/pdf"]} filesLimit={ 1 } dropzoneText={ t("dropzone") }/>
            <FormHelperText>{ t('forms.plan.dropzone-help') }</FormHelperText>
        </Grid>
        <Grid item>
            <Actions>
                <Button variant="contained" color="primary" onClick={ handleSubmit }>
                    { t('confirm') }
                </Button>

                <Button component={ RouterLink } to={ route("home") }>
                    { t('go-back') }
                </Button>
            </Actions>
        </Grid>
    </Grid>
}