import * as React from "react";
import { WidgetMode } from "@talentsoft-opensource/integration-widget-component";
import { LanguageCode, LanguageName } from "./widget-com-server/languages";

export interface WidgetConfigProps {
    language: string;
    mode: WidgetMode;
    changeLanguage: (language: string) => void;
    changeMode: (mode: WidgetMode) => void;
}

export class SimulatorConfig extends React.Component<WidgetConfigProps, {}> {
    constructor(props: WidgetConfigProps) {
        super(props);
    }

    handleLanguageChange = (event: any) => {
        this.props.changeLanguage(event.target.value);
    };

    handleModeChange = (event: React.ChangeEvent<HTMLSelectElement>) => {
        const mode: WidgetMode = Number(event.target.value);
        this.props.changeMode(mode);
    };

    render() {
        const { language, mode } = this.props;

        return (
            <div className="tool__widget__config__content">
                <div>
                    <span>Language:</span>
                    <select
                        value={language}
                        onChange={this.handleLanguageChange}
                    >
                        <option value={LanguageCode.En_gb}>
                            {LanguageName.En_gb}
                        </option>
                        <option value={LanguageCode.Fr_fr}>
                            {LanguageName.Fr_fr}
                        </option>
                        <option value={LanguageCode.It_it}>
                            {LanguageName.It_it}
                        </option>
                        <option value={LanguageCode.Es_es}>
                            {LanguageName.Es_es}
                        </option>
                        <option value={LanguageCode.De_de}>
                            {LanguageName.De_de}
                        </option>
                    </select>
                </div>
                <div>
                    <span>Mode:</span>
                    <select value={mode} onChange={this.handleModeChange}>
                        <option value={WidgetMode.Normal}>Normal</option>
                        <option value={WidgetMode.Edition}>Edition</option>
                    </select>
                </div>
            </div>
        );
    }
}