import React from "react";
import { Page } from "@/pages/base";
import { Container, Typography, Button, Divider, Box, Stepper, Step, StepLabel, StepContent, Link } from "@material-ui/core";
import { InternshipForm } from "@/forms/Internship";
import { Link as RouterLink } from "react-router-dom";
import { route } from "@/routing";
import { useTranslation } from "react-i18next";

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

    return <Page my={6}>
        <Container>
            <Typography variant="h2">{ t("sections.my-internship.header") }</Typography>
            <Stepper orientation="vertical" nonLinear>
                <Step completed active={false}>
                    <StepLabel>
                        { t('steps.personal-data.header') }
                        <Box>
                            <Typography variant="subtitle2" color="textSecondary">{ t('until', { date: '05.07.2020' }) }</Typography>
                        </Box>
                    </StepLabel>
                </Step>
                <Step active>
                    <StepLabel>{ t('steps.internship-proposal.header')}</StepLabel>
                    <StepContent>
                        <Button to={ route("internship_proposal") } variant="contained" color="primary" component={ RouterLink }>
                            { t('steps.internship-proposal.form') }
                        </Button>
                    </StepContent>
                </Step>
            </Stepper>
        </Container>
    </Page>
}

export const InternshipFormPage = () => {
    return <Page title="Zgłoszenie praktyki">
        <Page.Header maxWidth="md">
            <Page.Breadcrumbs>
                <Link component={ RouterLink } to={ route("home") }>Moja praktyka</Link>
                <Typography color="textPrimary">Zgłoszenie praktyki</Typography>
            </Page.Breadcrumbs>
            <Page.Title>Zgłoszenie praktyki</Page.Title>
        </Page.Header>
        <Container maxWidth={"md"}>
            <InternshipForm />
        </Container>
    </Page>
}

export const NotFoundPage = () => {
    return <Page title="Strona nie została znaleziona">
        <Container>
            <Typography variant="h1">404</Typography>
            <Typography variant="h2">Strona nie została znaleziona</Typography>

            <Box my={ 4 }>
                <Divider variant="fullWidth" />
            </Box>

            <Button to={ route("home") } color="primary" component={ RouterLink }>strona główna</Button>
        </Container>
    </Page>
}