import { Page } from "@/pages/base";
import { Button, Container, FormHelperText, Grid, Link, Typography } from "@material-ui/core";
import { Link as RouterLink } from "react-router-dom";
import { route } from "@/routing";
import React from "react";
import { useTranslation } from "react-i18next";
import { DropzoneArea } from "material-ui-dropzone";
import { Description as DescriptionIcon } from "@material-ui/icons";
import { Actions } from "@/components/actions";

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

    return <Page title={ t("steps.plan.submit") }>
        <Page.Header maxWidth="md">
            <Page.Breadcrumbs>
                <Link component={ RouterLink } to={ route("home") }>{ t('sections.my-internship.header') }</Link>
                <Typography color="textPrimary">{ t("steps.plan.submit") }</Typography>
            </Page.Breadcrumbs>
            <Page.Title>{ t("steps.plan.submit") }</Page.Title>
        </Page.Header>
        <Container maxWidth={ "md" }>
            <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/x-pdf"]} filesLimit={ 1 } dropzoneText={ t("dropzone") }/>
                    <FormHelperText>{ t('forms.plan.dropzone-help') }</FormHelperText>
                </Grid>
                <Grid item>
                    <Actions>
                        <Button variant="contained" color="primary">
                            { t('confirm') }
                        </Button>

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

export default SubmitPlanPage;