import Locator from '../../../services/Locator';
import { PaneExtended } from '../interfaces/PaneExtended';

export class LanguageControls
{
    static controlName = 'LanguageControls';
    pane: PaneExtended;

    /**
     * The constructor function initializes a PaneExtended object and a locator in TypeScript.
     * @param {PaneExtended} pane - The `pane` parameter is an instance of the `PaneExtended` class.
     * @param {any} locator - The `locator` parameter is typically used to identify and locate elements on
     * a web page. It can be a CSS selector, XPath expression, or any other method used by automation tools
     * to find elements on a webpage.
     */
    constructor(pane: PaneExtended)
    {
        this.pane = pane;
    }

    initialize()
    {
        const mainFolder: any = this.pane.addFolder({ title: 'Language Controls', expanded: false }) as any;
        let isInitialized = false;

        mainFolder.on('fold', async (ev: any) =>
        {
            if (ev.expanded === true && !isInitialized)
            {
                isInitialized = true;
                this.addLanguageControls(mainFolder);
            }
        });
    }

    addLanguageControls(mainFolder: any)
    {
        // @ts-expect-error method
        const languagesList = Locator.locales.languagesList;
        const options = (languagesList as any).map((lang: string) =>
            ({ text: lang, value: lang }));
        const currentLang = Locator.locales.currentLang;
        const langSelection = mainFolder.addBlade({
            view: 'list',
            label: 'language',
            options,
            value: currentLang,
        });

        langSelection.on('change', (e: { value: any; }) =>
        {
            // @ts-expect-error method
            Locator.locales.changeLanguage(e.value);
        });
    }
}
