import ngModule from '../../module';
import Input from '../../lib/input';
import assignProps from '../../lib/assign-props';
import './style.scss';

export default class ButtonMenu extends Input {
    constructor($element, $scope, $transclude) {
        super($element, $scope);
        this.$transclude = $transclude;
        this.input = this.element.querySelector('.mdl-button');
        $element.on('click', e => this.onClick(e));
    }

    get model() {
        return this._model;
    }

    set model(value) {
        this.dropDownAssign({model: value});
    }

    get data() {
        return this._data;
    }

    set data(value) {
        this.dropDownAssign({data: value});
    }

    get url() {
        return this._url;
    }

    set url(value) {
        this.dropDownAssign({url: value});
    }

    dropDownAssign(props) {
        for (let prop in props)
            this[`_${prop}`] = props[prop];
        if (this.$.dropDown)
            Object.assign(this.$.dropDown, props);
    }

    onClick(event) {
        if (event.defaultPrevented) return;
        event.preventDefault();
        this.emit('open');
        this.showDropDown();
    }

    onDropDownClick(event) {
        event.preventDefault();
    }

    onDropDownSelect(value) {
        this.field = value;
        this.emit('change', {value});
    }

    showDropDown() {
        assignProps(this, this.$.dropDown, [
            'valueField',
            'showField',
            'showFilter',
            'multiple',
            '$transclude',
            'translateFields',
            'model',
            'data',
            'url',
            'fields',
            'include',
            'where',
            'order',
            'limit',
            'searchFunction'
        ]);
        this.$.dropDown.show(this.element);
    }
}
ButtonMenu.$inject = ['$element', '$scope', '$transclude'];

ngModule.component('vnButtonMenu', {
    template: require('./button-menu.html'),
    bindings: {
        label: '@',
        showField: '@?',
        selection: '<?',
        valueField: '@?',
        selectFields: '<?',
        disabled: '<?',
        initialData: '<?',
        showFilter: '<?',
        field: '=?',
        url: '@?',
        data: '<?',
        where: '@?',
        order: '@?',
        limit: '<?',
        multiple: '<?',
        onChange: '&?',
        icon: '@?',
        translateFields: '<?',
        onOpen: '&?'
    },
    transclude: {
        tplItem: '?tplItem'
    },
    controller: ButtonMenu
});