import React, { useState } from "react";
import { MTableToolbar } from "material-table";
import { useTheme } from "@material-ui/core/styles";
import { CommonTableDefaultProps as DefaultProps } from "@/components/CommonTable/models/defaultProps";
import CommonTable, { CommonTableHead } from "@/components/CommonTable";
import tableIcons from "@/components/CommonTable/models/tableIcons";
import { Columns } from "./columns";
import { Schema } from "./schema";
import { Data } from "./data";
import EvaIcon from "react-eva-icons";
import rxDb from "@/utils/database/rxConnect";
import IconButton from "@material-ui/core/IconButton";
import { fsDownload } from "@/utils/scripts/fs";
// @ts-ignore
import JSONInput from "react-json-editor-ajrm";
// @ts-ignore
import locale from "react-json-editor-ajrm/locale/en";
import MigrationDialogs from "./components/Dialog";
import { useTranslation } from "react-i18next";
export default function MigrationContainer() {
    const { t } = useTranslation("table");
    const theme = useTheme();
    const color = theme.bunadmin.iconColor;
    const [selData, setSelData] = useState({
        name: "schema",
        mode: "Export"
    });
    const [modalState, setModalState] = useState({
        open: 0,
        title: "",
        msg: ""
    });
    const [uploadModal, setUploadModal] = useState({
        open: 0,
        title: "",
        msg: ""
    });
    return (<>
      <>
        <CommonTableHead title={t(Schema.title)}/>
        <CommonTable title={t(Schema.title)} columns={Columns({ t })} data={Data({ t })} 
    // style
    style={DefaultProps.style} 
    // icons
    icons={tableIcons({ theme })} 
    // options
    options={{ ...DefaultProps.options, selection: false }} 
    // actions
    actions={[
        {
            tooltip: "Export",
            icon: () => (<EvaIcon name="download-outline" size="large" fill={color}/>),
            onClick: async (_evt, data) => {
                if (!("name" in data))
                    return;
                const db = await rxDb();
                const collection = data.name;
                db[collection]
                    .dump()
                    .then((json) => fsDownload(json, collection, "application/json"));
            }
        },
        {
            tooltip: "Import",
            icon: () => (<EvaIcon name="upload-outline" size="large" fill={color}/>),
            onClick: async (_evt, data) => {
                if (!("name" in data))
                    return;
                const msg = `Do you want to restore ${data.name}?`;
                setUploadModal({
                    title: "Import / Restore",
                    open: uploadModal.open + 1,
                    msg
                });
                setSelData({
                    name: data.name,
                    mode: "Export DB"
                });
            }
        }
    ]} components={{
        Toolbar: props => (<div>
                <MTableToolbar {...props}/>
                <div style={{ padding: "0px 10px" }}>
                  <IconButton aria-label="account of current user" aria-controls="menu-appbar" aria-haspopup="true" onClick={() => {
            const msg = "Do you want to backup Local Database?";
            setModalState({
                title: "Clone / Backup",
                open: modalState.open + 1,
                msg
            });
            setSelData({
                name: "Database",
                mode: "Export DB"
            });
        }} color="inherit">
                    <EvaIcon name="save-outline" size="large" fill={theme.bunadmin.iconColor}/>
                  </IconButton>
                  <IconButton aria-label="account of current user" aria-controls="menu-appbar" aria-haspopup="true" onClick={() => {
            const msg = "Do you want to overwrite Local Database?";
            setUploadModal({
                title: "Restore Local Database",
                open: uploadModal.open + 1,
                msg
            });
            setSelData({
                name: "ALL",
                mode: "Import DB"
            });
        }} color="inherit">
                    <EvaIcon name="edit-2-outline" size="large" fill={theme.bunadmin.iconColor}/>
                  </IconButton>
                </div>
              </div>)
    }} 
    // detailPanel
    detailPanel={[
        {
            icon: "code",
            render: rowData => {
                if (!rowData.columns) {
                    return (<div style={{
                        color: "white",
                        backgroundColor: theme.bunadmin.iconColor,
                        padding: "10px 30px"
                    }}>
                      {rowData.columns || "COLUMNS IS EMPTY"}
                    </div>);
                }
                else {
                    const json = rowData.columns || {};
                    return (<JSONInput viewOnly theme="light_mitsuketa_tribute" placeholder={json} locale={locale} style={{
                        outerBox: { width: "100%" },
                        container: { width: "100%", fontSize: 14 }
                    }} colors={{
                        background: theme.bunadmin.jsonViewBg,
                        default: theme.palette.primary.light
                    }}/>);
                } // check columns
            } // render
        } // item
    ]}/>
      </>
      <MigrationDialogs selData={selData} modalState={modalState} uploadModal={uploadModal}/>
    </>);
}