import { BreadcrumbsProps, Container, Link, List, ListItem, ListItemIcon, ListItemText, Paper } from "@material-ui/core";
import { Page } from "@/pages/base";
import React from "react";
import { Link as RouterLink } from "react-router-dom";
import { route } from "@/routing";
import { useTranslation } from "react-i18next";
import { CalendarClock, FileCertificateOutline, FileDocumentMultipleOutline, FormatPageBreak, TableOfContents } from "mdi-material-ui";

export const ManagementLink = ({ icon, route, children }: ManagementLinkProps) =>
    <ListItem button component={ RouterLink } to={ route }>
        <ListItemIcon>{ icon }</ListItemIcon>
        <ListItemText>{ children }</ListItemText>
    </ListItem>

export const Management = {
    Breadcrumbs: ({ children, ...props }: BreadcrumbsProps) => {
        const { t } = useTranslation();

        return <Page.Breadcrumbs { ...props }>
            <Link component={ RouterLink } to={ route("management:index") }>{ t("management:title") }</Link>
            { children }
        </Page.Breadcrumbs>;
    },
    Menu: List,
    MenuItem: ManagementLink,
}

type ManagementLinkProps = React.PropsWithChildren<{
    icon: JSX.Element,
    route: string,
}>;

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

    return <Page>
        <Page.Header>
            <Page.Title>{ t("management:title") }</Page.Title>
        </Page.Header>
        <Container>
            <Paper elevation={ 2 }>
                <Management.Menu>
                    <ManagementLink icon={ <TableOfContents /> } route={ route("management:courses") }>
                        { t("management:course.index.title") }
                    </ManagementLink>
                    <ManagementLink icon={ <CalendarClock /> } route={ route("management:editions") }>
                        { t("management:edition.index.title") }
                    </ManagementLink>
                    <ManagementLink icon={ <FileCertificateOutline /> } route={ route("management:types") }>
                        { t("management:type.index.title") }
                    </ManagementLink>
                    <ManagementLink icon={ <FormatPageBreak/> } route={ route("management:report_fields") }>
                        { t("management:report-fields.title") }
                    </ManagementLink>
                    <ManagementLink icon={ <FileDocumentMultipleOutline /> } route={ route("management:static_pages") }>
                        { t("management:page.index.title") }
                    </ManagementLink>
                </Management.Menu>
            </Paper>
        </Container>
    </Page>
}