import * as React from "react";

import { WidgetArea } from "./widget-area";
import { WidgetHeader as Header } from "./header";
import { LanguageCode } from "./widget-com-server/languages";
import {
    WidgetMode,
    WidgetSize
} from "@talentsoft-opensource/integration-widget-component";
import { getHostMock, initHost, HostEventApi } from "./widget-com-server/service-host";
import { HostedWidgetCollection, WidgetCollectionController } from "./widget-com-server/widget-collection-controller";
import { getWidgetDefinition } from "../widget-host/widget-definition";
import { HostPeer } from "@talentsoft-opensource/integration-com-layer";

const initialLanguage = LanguageCode.Fr_fr;
const initialMode = WidgetMode.Normal;

function loadWidgetDefinitions(): HostedWidgetCollection {
    const widgetDefinition = getWidgetDefinition(window);
    const hostMock = getHostMock();
    
    let initialWidgets: HostedWidgetCollection = {
        [widgetDefinition.name]: {
            enlargeable: false,
            id: widgetDefinition.name,
            size: WidgetSize.Normal,
            title: "test title",
            url: "test-widget.html",
            params: hostMock.configuration || {}
        },
        mock: {
            enlargeable: false,
            id: "mock",
            size: WidgetSize.Normal,
            title: "mock title",
            url: "mock-widget.html",
            params: {}
        }
    };
    return initialWidgets;
}

let widgetController: WidgetCollectionController | null = null;
let hostPeer: HostPeer<HostEventApi> | null = null;

function useSimulatorConfig(): [
    { language: string; mode: WidgetMode; widgets: HostedWidgetCollection },
    { setLanguage: (l: string) => void; setMode: (m: WidgetMode) => void }
] {
    const [language, setLanguage] = React.useState(initialLanguage as string);
    const [mode, setMode] = React.useState(initialMode);
    const [widgets, setWidgets] = React.useState(loadWidgetDefinitions());

    if (widgetController == null) {
        ({ widgetController, hostPeer } = initHost(initialLanguage, initialMode));
    }

    widgetController.widgetGetter = () => widgets;
    widgetController.widgetSetter = setWidgets;

    function wrappedSetLanguage(newLanguage: string) {
        setLanguage(newLanguage);
        hostPeer!.events.onLanguageChanged.broadcast(newLanguage);
    }

    function wrappedSetMode(newMode: WidgetMode) {
        setMode(newMode);
        hostPeer!.events.onEditModeChanged.broadcast(
            newMode === WidgetMode.Edition
        );
    }

    return [
        { language, mode, widgets },
        {
            setLanguage: wrappedSetLanguage,
            setMode: wrappedSetMode
        }
    ];
}

export function WidgetSimulator() {
    const [
        { language, mode, widgets },
        { setLanguage, setMode }
    ] = useSimulatorConfig();

    return (
        <>
            <Header
                language={language}
                mode={mode}
                setLanguage={setLanguage}
                setMode={setMode}
            />
            <WidgetArea widgets={widgets} />
        </>
    );
}