import { RcsbFv3DCustomInterface} from "../RcsbFv3D/RcsbFv3DCustom";
import { DebugUtil } from "./tmdet-extension/debug-utils";
import { createFeatureViewerConfing } from "./FeatureViewConfig";
import { fetchDescriptor, registerRegionDescriptorData } from "./UniTmpHelper";
import { TmFv3DCustom } from "./tmdet-viewer/TmFv3DCustom";
import { updateSiteColors } from "./tmdet-extension/tmdet-color-theme";
import { createRcsbFeatureViewer, TmFv1DElement } from "./tmdet-viewer/TmFv1DComponent";

customElements.define("tm-saguaro-1d", TmFv1DElement);


function createRcsb3DViewer(configParams: any) {
    document.addEventListener("DOMContentLoaded", (event) => {
        (async function(event) {

            updateSiteColors(configParams.side1);
            DebugUtil.enableLog();

            const panel3dConfig = await createConfig(configParams);
            DebugUtil.log('Panel config', JSON.stringify(panel3dConfig));

            const panel3d = new TmFv3DCustom(panel3dConfig);
            panel3d.render();

        })();
    });
}

async function createConfig(configParams: any): Promise<RcsbFv3DCustomInterface> {
    const pdbEntry = configParams.pdbEntry;
    const labelAsymId = configParams.labelAsymId;
    const params: any = {
        title: configParams.title,
        subtitle: configParams.subtitle,
        side1: configParams.side1,
        htpEntry: configParams.htpEntry,
        pdbEntry: configParams.pdbEntry,
        structureUrl: configParams.structureUrl!,
        labelAsymId: labelAsymId,
        pdbtmEntry: `${pdbEntry}_${labelAsymId}`
    };

    if (pdbEntry) {
        console.log('annotation data:', configParams.annotationData);
        await registerRegionDescriptorData(configParams.annotationData, params.side1);
    }
    if (configParams.configData) {
        console.log('config data:', configParams.configData);
        params.fvConfigData = await fetchDescriptor(configParams.configData);
    }

    const { sequenceConfig, molstarConfig } = await createFeatureViewerConfing(params);
    const panel3dConfig: RcsbFv3DCustomInterface = {
        elementId: configParams.elementId,
        sequencePanelConfig: sequenceConfig,
        structurePanelConfig: molstarConfig
    };
    molstarConfig.structureViewerConfig.viewerProps.layoutShowSequence = true;
    (molstarConfig as any).loadConfig.loadParams.params = {
        preset: { modelIndex: 0 }
    }

    return panel3dConfig;
}

export {
    DebugUtil,
    createRcsb3DViewer,
    createRcsbFeatureViewer,
    TmFv1DElement
};