import React, { useCallback } from "react";
import { useTranslation } from "react-i18next";
import { useRouteMatch } from "react-router-dom";
import { useAsync } from "@/hooks";
import api from "@/management/api";
import { Page } from "@/pages/base";
import { Container, Paper, Typography } from "@material-ui/core";
import { Management, ManagementLink } from "@/management/main";
import { Edition } from "@/data/edition";
import { Async } from "@/components/async";
import { AccountMultiple, BriefcaseAccount, CertificateOutline, CogOutline, FileChartOutline, FormatPageBreak } from "mdi-material-ui";
import { route } from "@/routing";
import { useSpacing } from "@/styles";
import { createStyles, makeStyles, Theme } from "@material-ui/core/styles";

const useSectionStyles = makeStyles((theme: Theme) => createStyles({
    header: {
        padding: theme.spacing(2),
        paddingBottom: 0,
        fontWeight: 'bold',
        color: theme.palette.grey["800"],
    },
}))

export function title(edition: Edition) {
    return `${edition.course.name} - ${edition.startDate.year()}`
}

export const ManageEditionPage = () => {
    const { t } = useTranslation("management");
    const { params } = useRouteMatch();

    const edition = useAsync<Edition>(useCallback(() => api.edition.details(params.edition), [params.edition]))
    const spacing = useSpacing(2);
    const classes = useSectionStyles();

    return <Page>
        <Async async={ edition }>{ edition =>
            <>
            <Page.Header>
                <Management.Breadcrumbs>
                    <Typography color="textPrimary">{ title(edition) }</Typography>
                </Management.Breadcrumbs>
                <Page.Title>{ title(edition) }</Page.Title>
            </Page.Header>
                <Container className={ spacing.vertical }>
                    <Paper elevation={ 2 }>
                        <Typography className={ classes.header }>{ t("edition.manage.internships") }</Typography>
                        <Management.Menu>
                            <ManagementLink icon={ <AccountMultiple/> } route={ route("management:edition_report_form", { edition: edition.id || "" }) }>
                                { t("management:edition.students.title") }
                            </ManagementLink>
                            <ManagementLink icon={ <BriefcaseAccount/> } route={ route("management:edition_report_form", { edition: edition.id || "" }) }>
                                { t("management:edition.internships.title") }
                            </ManagementLink>
                            <ManagementLink icon={ <FormatPageBreak/> } route={ route("management:edition_report_form", { edition: edition.id || "" }) }>
                                { t("management:edition.ipp.title") }
                            </ManagementLink>
                            <ManagementLink icon={ <FileChartOutline/> } route={ route("management:edition_report_form", { edition: edition.id || "" }) }>
                                { t("management:edition.reports.title") }
                            </ManagementLink>
                            <ManagementLink icon={ <CertificateOutline/> } route={ route("management:edition_report_form", { edition: edition.id || "" }) }>
                                { t("management:edition.dean-approvals.title") }
                            </ManagementLink>
                        </Management.Menu>
                    </Paper>
                    <Paper elevation={ 2 }>
                        <Typography className={ classes.header }>{ t("edition.manage.management") }</Typography>
                        <Management.Menu>
                            <ManagementLink icon={ <FormatPageBreak/> } route={ route("management:edition_report_form", { edition: edition.id || "" }) }>
                                { t("management:edition.report-fields.title") }
                            </ManagementLink>
                            <ManagementLink icon={ <CogOutline/> } route={ route("management:edition_settings", { edition: edition.id || "" }) }>
                                { t("management:edition.settings.title") }
                            </ManagementLink>
                        </Management.Menu>
                    </Paper>
                </Container>
            </>
        }</Async>
    </Page>
}