import { DebugUtil } from "../TmFv3DApp/tmdet-extension/debug-utils";
import { fetchDescriptor, registerRegionDescriptorData } from "../TmFv3DApp/UniTmpHelper";
import { updateSiteColors } from "../TmFv3DApp/tmdet-extension/tmdet-color-theme";
import * as React from "react";
import { TmViewer } from "./tmdet-viewer/TmViewer";
import { ViewerProps } from "@rcsb/rcsb-molstar/build/src/viewer";
import { TMDETMembraneOrientation } from "../TmFv3DApp/tmdet-extension/behavior";
import { PluginSpec } from "molstar/lib/mol-plugin/spec";
import { PluginLayoutControlsDisplay } from "molstar/lib/mol-plugin/layout";
import { PluginConfig } from "molstar/lib/mol-plugin/config";
import { ObjectKeys } from "molstar/lib/commonjs/mol-util/type-helpers";
import { PluginContext } from "molstar/lib/mol-plugin/context";

// customElements.define(TmFv1DElement.TagName, TmFv1DElement);

const Extensions = {
    'tmdet-membrane-orientation': PluginSpec.Behavior(TMDETMembraneOrientation)
};

const viewerParams: Partial<ViewerProps> = {
        layoutIsExpanded: true,
        layoutShowControls: true,
        layoutControlsDisplay: 'reactive' as PluginLayoutControlsDisplay,
        layoutShowSequence: true,
        layoutShowLog: true,

        viewportShowExpand: PluginConfig.Viewport.ShowExpand.defaultValue,
        viewportShowSelectionMode: PluginConfig.Viewport.ShowSelectionMode.defaultValue,
        volumeStreamingServer: PluginConfig.VolumeStreaming.DefaultServer.defaultValue,

};

function createTmdetViewer(elementId: string, configParams: any,
    callBack: (ctx:PluginContext) => {},
    deferred: boolean = true,
    viewerProps: Partial<ViewerProps> = viewerParams) {

    if (deferred) {
        document.addEventListener("DOMContentLoaded", (event) => {
            (async function(event) {

                updateSiteColors(configParams.side1);
                DebugUtil.enableLog();
                const viewer = new TmViewer(elementId, {
                    ...viewerProps,
                    layoutShowControls:false,
                    layoutShowSequence: true,
                    showWelcomeToast: false,
                    canvas3d: {
                        multiSample: {
                            mode: 'off'
                        }
                    }
                });
                callBack(viewer.plugin);
            })();
        });
    }
}

export {
    createTmdetViewer,
    DebugUtil
};