import ngModule from '../../module';
import './multi-check.scss';

/**
 * Draw checkbox with a drop-down and multi options
 * @param {SmallInt} checkAll Primary input-check state: 0 -> uncheck, 1 -> checked, 2 -> indeterminate checked
 * @param {Array} options List of options shown in drop-down
 * @param {Array} models Elements to check / unCheck
 * @param {String} className Optional css class name
 */
export default class MultiCheck {
    constructor($timeout) {
        this.$timeout = $timeout;
        this._checkAll = 0;
        this._models = [];
        this._type = {};
        this.showDropDown = false;
    }

    get type() {
        return this._type;
    }

    set type(value) {
        if (value && value.id) {
            this._type = value;
            switch (value.id) {
            case 'all':
                this.checkAll = 1;
                break;
            case 'any':
                this.checkAll = 0;
                break;
            default:
                this.checkAll = 2;
                break;
            }
        }
        this._type = {};
        this.showDropDown = false;
    }

    get models() {
        return this._models;
    }

    set models(value) {
        this._models = value;
    }

    get checkAll() {
        return this._checkAll;
    }

    set checkAll(value) {
        this._checkAll = value;
        this.switchChecks();
    }

    switchChecks() {
        if (this.models)
            this.models.forEach(
                el => {
                    let checked;
                    if (this.type.id && this.type.id !== 'all' && this.type.id !== 'any') {
                        if (this.type.id.length > 3 && this.type.id.substr(0, 3) === 'no-') {
                            let label = this.type.id.replace('no-', '');
                            checked = Boolean(el[label]) === false;
                        } else if (this.type.id.length > 6 && this.type.id.substr(0, 6) === 'equal-') {
                            let label = this.type.id.replace('equal-', '');
                            checked = (el[label] && el[label] === this.type.name);
                        } else {
                            checked = Boolean(el[this.type.id]) === true;
                        }
                    } else {
                        checked = this.checkAll === 1;
                    }
                    el.checked = checked;
                }
            );
    }

    $onChanges() {
        this.type = {};
        this.checkAll = 0;
    }

    onBlur() {
        this.$timeout(() => {
            this.showDropDown = false;
        }, 200);
    }
}
MultiCheck.$inject = ['$timeout'];

ngModule.component('vnMultiCheck', {
    template: require('./multi-check.html'),
    controller: MultiCheck,
    bindings: {
        checkAll: '=',
        options: '<',
        models: '<',
        className: '@?'
    }
});