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>
        </>
    );
}