import React, { useCallback } from "react";
import { Page } from "@/pages/base";
import { useTranslation } from "react-i18next";
import { useAsync } from "@/hooks";
import api from "@/management/api";
import { Async } from "@/components/async";
import { Container, Typography } from "@material-ui/core";
import MaterialTable, { Action, Column } from "material-table";
import { Edition } from "@/data/edition";
import { Pencil } from "mdi-material-ui";
import { Management } from "../main";

export type EditionDetailsProps = {
    edition: string;
}

export function EditionDetails({ edition, ...props }: EditionDetailsProps) {
    const result = useAsync(useCallback(() => api.edition.details(edition), [ edition ]));

    return <Async async={ result }>{ edition => <pre>{ JSON.stringify(edition, null, 2) }</pre> }</Async>
}

export function EditionsManagement() {
    const { t } = useTranslation("management");
    const editions = useAsync(useCallback(api.edition.all, []));

    const columns: Column<Edition>[] = [
        {
            title: t("edition.field.id"),
            field: "id",
            cellStyle: { whiteSpace: "nowrap" }
        },
        {
            title: t("edition.field.start"),
            render: edition => edition.startDate.format("DD.MM.yyyy"),
            customSort: (a, b) => b.startDate.unix() - a.startDate.unix(),
        },
        {
            title: t("edition.field.end"),
            render: edition => edition.endDate.format("DD.MM.yyyy"),
            customSort: (a, b) => b.endDate.unix() - a.endDate.unix(),
        },
        {
            title: t("edition.field.course"),
            customSort: (a, b) => a.course.name.localeCompare(b.course.name),
            render: edition => edition.course.name,
        },
    ]

    const actions: Action<Edition>[] = [
        {
            icon: () => <Pencil />,
            onClick: () => {},
        }
    ]

    return <Page>
        <Page.Header maxWidth="lg">
            <Management.Breadcrumbs>
                <Typography color="textPrimary">{ t("edition.index.title") }</Typography>
            </Management.Breadcrumbs>
            <Page.Title>{ t("edition.index.title") }</Page.Title>
        </Page.Header>
        <Container maxWidth="lg">
            <Async async={ editions }>
                { editions =>
                    <MaterialTable
                        columns={ columns }
                        data={ editions }
                        actions={ actions }
                        detailPanel={ edition => <EditionDetails edition={ edition.id as string } /> }
                        title={ t("edition.index.title") }
                        options={{ search: false, actionsColumnIndex: -1 }}
                    />
                }
            </Async>
        </Container>
    </Page>;
}