import ngModule from '../../module';
import Input from '../../lib/input';
import asignProps from '../../lib/asign-props';
import './style.scss';

export default class IconMenu extends Input {
    constructor($element, $scope, $transclude) {
        super($element, $scope);
        this.$transclude = $transclude;
        this.input = this.element.querySelector('.mdl-button');
        this.valueField = 'id';
        this.showField = 'name';
    }

    getFields() {
        let fields = [];
        fields.push(this.valueField);
        fields.push(this.showField);

        if (this.selectFields)
            for (let field of this.selectFields)
                fields.push(field);

        return fields;
    }

    onClick(event) {
        event.preventDefault();
        this.showDropDown();
    }

    onDropDownSelect(value) {
        this.field = value;

        if (this.onChange)
            this.onChange({value});
    }

    showDropDown() {
        Object.assign(this.$.dropDown.$.model, {
            url: this.url,
            staticData: this.data
        });

        asignProps(this, this.$.dropDown, [
            'valueField',
            'showField',
            'where',
            'order',
            'showFilter',
            'multiple',
            'limit',
            '$transclude'
        ]);

        this.$.dropDown.selectFields = this.getFields();
        this.$.dropDown.parent = this.input;
        this.$.dropDown.show();
    }
}
IconMenu.$inject = ['$element', '$scope', '$transclude'];

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