import React, { useState } from "react";
import { Page } from "@/pages/base";
import { Management } from "@/management/main";
import { Box, Container, IconButton, Tooltip, Typography } from "@material-ui/core";
import { useTranslation } from "react-i18next";
import { sampleReportSchema } from "@/provider/dummy/report";
import MaterialTable, { Column } from "material-table";
import { actionsColumn, fieldComparator, multilingualStringComparator } from "@/management/common/helpers";
import { MultilingualCell } from "@/management/common/MultilangualCell";
import { ReportFieldDefinition } from "@/data/report";
import { Formik } from "formik";
import { CustomField } from "@/forms/report";
import { Edit } from "@material-ui/icons";
import { createPortal } from "react-dom";
import { createDeleteAction } from "@/management/common/DeleteResourceAction";
import { EditFieldDefinitionDialog } from "@/management/edition/report/fields/edit";
import { EditionManagement } from "../../manage";

const title = "edition.report-fields.title";

export const FieldPreview = ({ field }: { field: ReportFieldDefinition }) => {
    return <Formik initialValues={{}} onSubmit={() => {}}>
        <CustomField field={ field }/>
    </Formik>
}

export const EditionReportFields = () => {
    const { t } = useTranslation("management");
    const schema = sampleReportSchema;

    const handleFieldDeletion = () => {}

    const DeleteFieldAction  = createDeleteAction<ReportFieldDefinition>({ label: field => field.label.pl, onDelete: handleFieldDeletion })
    const EditFieldAction = ({ field }: { field: ReportFieldDefinition }) => {
        const [ open, setOpen ] = useState<boolean>(false);

        const handleFieldSave = async (field: ReportFieldDefinition) => {
        }

        return <>
            <Tooltip title={ t("actions.edit") as any }>
                <IconButton onClick={ () => setOpen(true) }><Edit /></IconButton>
            </Tooltip>
            { open && createPortal(
                <EditFieldDefinitionDialog open={ open } onSave={ handleFieldSave } field={ field } onClose={ () => setOpen(false) }/>,
                document.getElementById("modals") as Element
            ) }
        </>
    }

    const columns: Column<ReportFieldDefinition>[] = [
        {
            title: t("report-field.field.label"),
            customSort: fieldComparator('label', multilingualStringComparator),
            cellStyle: { whiteSpace: "nowrap" },
            render: field => <MultilingualCell value={ field.label }/>,
        },
        {
            title: t("report-field.field.type"),
            cellStyle: { whiteSpace: "nowrap" },
            render: field => t(`report-field.type.${field.type}`),
        },
        actionsColumn(field => <>
            <EditFieldAction field={ field }/>
            <DeleteFieldAction resource={ field }/>
        </>),
    ]

    return <Page>
        <Page.Header maxWidth="lg">
            <EditionManagement.Breadcrumbs>
                <Typography color="textPrimary">{ t(title) }</Typography>
            </EditionManagement.Breadcrumbs>
            <Page.Title>{ t(title) }</Page.Title>
        </Page.Header>
        <Container maxWidth="lg">
            <MaterialTable
                columns={ columns }
                data={ schema }
                title={ t(title) }
                detailPanel={ field => <Box p={3}><FieldPreview field={ field } /></Box> }
            />
        </Container>
    </Page>
}