import {UIElement} from "./UIElement";
import AvailableBaseLayers from "../Logic/AvailableBaseLayers";
import {DropDown} from "./Input/DropDown";
import Translations from "./i18n/Translations";
import {State} from "../State";
import {UIEventSource} from "../Logic/UIEventSource";
import {BaseLayer} from "../Logic/BaseLayer";

export default class BackgroundSelector extends UIElement {

    private _dropdown: UIElement;
    private readonly state: State;
    private readonly _availableLayers: UIEventSource<any>;

    constructor(state: State) {
        super();
        this.state = state;

        this._availableLayers = new AvailableBaseLayers(state).availableEditorLayers;
        const self = this;
        this._availableLayers.addCallbackAndRun(available => self.CreateDropDown(available));
    }

    private CreateDropDown(available) {
        if(available.length === 0){
            return;
        }
        
        const baseLayers: { value: BaseLayer, shown: string }[] = [];
        for (const i in available) {
            const layer: BaseLayer = available[i];
            baseLayers.push({value: layer.layer, shown: layer.name ?? "id:" + layer.id});
        }

        this._dropdown = new DropDown(Translations.t.general.backgroundMap, baseLayers, State.state.bm.CurrentLayer);
    }

    InnerRender(): string {
        return this._dropdown.Render();
    }

}