import * as React from "react";
import * as logopath from "./assets/logoTS-white.png";
import { SimulatorConfig as SimulatorSettings } from "./simulator-config";
import { WidgetMode } from "@talentsoft-opensource/integration-widget-component";

export interface WidgetHeaderProps {
    language: string;
    mode: WidgetMode;
    setMode: (newMode: WidgetMode) => void;
    setLanguage: (newLang: string) => void;
}

export function WidgetHeader(props: WidgetHeaderProps) {
    const { language, mode, setMode, setLanguage } = props;
    const [settingVisible, setSettingVisible] = React.useState(false);

    function toggleSettingVisibility() {
        setSettingVisible(!settingVisible);
    }

    return (
        <>
            <div className="tool__widget__header">
                <div>
                    <img src={logopath}></img>
                </div>
                <div
                    className="tool__widget__settings uxp-icons mov-icons"
                    onClick={toggleSettingVisibility}
                >
                    o
                </div>
            </div>
            <div
                className={`tool__widget__config ${
                    settingVisible ? "tool__widget__config--open" : ""
                }`}
            >
                <SimulatorSettings
                    language={language}
                    mode={mode}
                    changeLanguage={setLanguage}
                    changeMode={setMode}
                />
            </div>
        </>
    );
}