import React from "react";
import { Page } from "@/pages/base";
import { useTranslation } from "react-i18next";
import { useCurrentStudent } from "@/hooks";
import { Box, Button, Container, Link, Paper, Typography } from "@material-ui/core";
import { Student } from "@/data";
import { Link as RouterLink } from "react-router-dom";
import { route } from "@/routing";
import { Actions } from "@/components";
import { useVerticalSpacing } from "@/styles";

type StudentPreviewProps = {
    student: Student;
}

export const StudentPreview = ({ student }: StudentPreviewProps) => {
    const { t } = useTranslation();

    return <>
        <Typography className="proposal__primary">{ student.name } { student.surname }</Typography>
        <Typography className="proposal__secondary">
            { t('internship.intern.semester', { semester: student.semester }) }
            { ", " }
            { t('internship.intern.album', { album: student.albumNumber }) }
        </Typography>
    </>;
}

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

    const student = useCurrentStudent() as Student;
    const spacing = useVerticalSpacing(3);

    return <Page>
        <Page.Header>
            <Page.Breadcrumbs>
                <Link component={ RouterLink } to={ route("home") }>{ t("pages.my-internship.header") }</Link>
                <Typography color="textPrimary">{ t("pages.user-profile.title") }</Typography>
            </Page.Breadcrumbs>
            <Page.Title>{ t('pages.user-profile.title') }</Page.Title>
        </Page.Header>
        <Container className={ spacing.root }>
            <Paper>
                <Box p={2}>
                    <StudentPreview student={ student } />
                </Box>
            </Paper>
            <Actions>
                <Button component={ RouterLink } to={ route("home") }>
                    { t('go-back') }
                </Button>
            </Actions>
        </Container>
    </Page>
}

export default UserProfilePage;