import * as angular from "angular";
import "kendo.dropdownlist";

import { ILanguagePickerService } from "./service/languagePicker.service";
import {
    IKendoDropDownOptions,
    ILanguagePickerItem,
    ILanguagePickerConfig,
} from "./interfaces";

import "./languagePicker.scss";
const template = require<string>("./languagePicker.html");

export const languagePickerComponentModule = "seges.time.languagePicker";

export class LanguagePicker implements ng.IComponentController {
    options: IKendoDropDownOptions<ILanguagePickerItem>;
    optionsDataSource: kendo.data.DataSource;
    dropdown: kendo.ui.DropDownList;
    config: ILanguagePickerConfig;

    constructor(private languagePickerService: ILanguagePickerService, private $rootScope: ng.IRootScopeService) {/* */}

    $onInit(): void {
        this.optionsDataSource = new kendo.data.DataSource();

        this.options = {
            dataSource: this.optionsDataSource,
            dataTextField: this.config.dataTextField,
            dataValueField: this.config.dataValueField,
            change: this.selectionChanged,
            valueTemplate: this.dropdownSelectedValueTemplate,
            template: this.dropdownTemplate,
        };

        this.optionsDataSource.data(this.config.languages);
    }

    $postLink(): void {
        this.dropdown.list.width(150);

        this.$rootScope.$watch(() => this.languagePickerService.getLanguage(), (newVal: string, oldVal: string) => {
            if (newVal) {
                this.dropdown.value(this.languagePickerService.getLanguage());
            }
        });
    }

    private selectionChanged = (event: kendo.ui.DropDownListChangeEvent): void => {
        this.languagePickerService.setLanguage(event.sender.value());
    }

    private dropdownSelectedValueTemplate(language: ILanguagePickerItem): string {
        return `<span class="language-picker-template-selected">
                    <span class="globe-icon">
                        <span class="fa fa-globe"></span>
                    </span>
                    <span class="text">${language.shortKey}</span>
                </span>`;
    }

    private dropdownTemplate(language: ILanguagePickerItem): string {
        return `<span class="language-picker-template">
                    <img class="dropdown-flag"
                         ng-src="${require("../../flags/" + language.name + ".png")}"
                         align="middle"
                         alt="${language.shortKey}" >
                    <span class="text">${language.name}</span>
                </span>`;
    }
}

angular
    .module(languagePickerComponentModule, ["kendo.directives"])
    .component("languagePicker", {
        controller: LanguagePicker,
        controllerAs: "picker",
        template,
        bindings: {
            config: "<",
        },
    });