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, IconButton, Tooltip, Typography } from "@material-ui/core";
import MaterialTable, { Column } from "material-table";
import { Edition } from "@/data/edition";
import { FileFind } from "mdi-material-ui";
import { Management } from "../main";
import { useHistory } from "react-router-dom";
import { route } from "@/routing";
import { actionsColumn } from "@/management/common/helpers";

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 ManageEditionAction = ({ edition }: { edition: Edition }) => {
        const history = useHistory();
        const handlePagePreview = async () => history.push(route('management:edition_manage', { edition: edition.id || "" }));

        return <Tooltip title={ t("actions.manage") as string }>
            <IconButton onClick={ handlePagePreview }><FileFind/></IconButton>
        </Tooltip>;
    }

    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,
        },
        actionsColumn(edition => <>
            <ManageEditionAction edition={ edition }/>
        </>),
    ]

    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 }
                        detailPanel={ edition => <EditionDetails edition={ edition.id as string }/> }
                        title={ t("edition.index.title") }
                        options={ { search: false } }
                    />
                }
            </Async>
        </Container>
    </Page>;
}
