import {module} from '../module';

export default class IconMenu {
    constructor($element, $http, $timeout) {
        this.$element = $element;
        this.$http = $http;
        this.$timeout = $timeout;
        this._showDropDown = false;
        this._pos = undefined;
    }
    get showDropDown() {
        return this._showDropDown;
    }
    set showDropDown(value) {
        this._showDropDown = value;
    }

    get pos() {
        return this._pos;
    }
    set pos(value) {
        this._pos = value;
    }

    getItems() {
        this.$http.get(this.url).then(
            json => {
                this.items = json.data;
            }
        );
    }
    $onInit() {
        if (!this.items && this.url) {
            this.getItems();
        }

        this.$element.bind('mouseover', e => {
            this.$timeout(() => {
                this.showDropDown = true;
                this.pos = e.target.getBoundingClientRect();
            });
        });

        this.$element.bind('mouseout', () => {
            this.$timeout(() => {
                this.showDropDown = false;
            });
        });
    }
    $onDestroy() {
        this.$element.unbind('mouseover');
        this.$element.unbind('mouseout');
    }
}
IconMenu.$inject = ['$element', '$http', '$timeout'];

module.component('vnIconMenu', {
    template: require('./icon-menu.html'),
    bindings: {
        url: '@?',
        items: '=?',
        icon: '@',
        selected: '='
    },
    controller: IconMenu,
    controllerAs: 'im'
});