import ATransitionEffect from '/js/libs/js-ATransitionEffect.js'

export default class ASlideDown extends window.AObject {
    constructor(el) {
        super();
        this._eleM = [];
        if (el instanceof NodeList) {
            Array.from(el).forEach((e) => {
                this._eleM.push(new ASlideDownEle(e))
            });
        } else {
            this._eleM.push(new ASlideDownEle(el));
        }
    }
    get(i) {
        return this._eleM[i];
    }
}

class ASlideDownEle extends window.AObject {
    constructor(ele) {
        super();
        this.transition = new ATransitionEffect();
        this._ele = ele;
        this._pCon = ele.closest('[data-dropdown]'); 
        this._subI = this._pCon.querySelector(".sub-item");
        var f = function (ev) {
            if (window.isValidPointerClick(ev)) return;
            this.onClick.call(this, ev);
        }.bind(this);
        this.addSystemEvent(this.eventName, this._ele, f);
    }
    enable() {
        this._ele.classList.remove("disabled");
    }
    disable() {
        this._ele.classList.add("disabled");
    }
    enable_Open() {
        this.enable();
        this.open();
    }
    disable_Close() {
        this.disable();
        this.close();
    }
    open() {
        if (this._ele.classList.contains("disabled")) {
            return;
        }
        this._pCon.classList.add("active");
        this.transition.expandEffect(this._subI, function () {
            this.trigger("opened");
        }.bind(this));
    }
    close() {
        this._pCon.classList.remove("active");
        this.transition.collapsedEffect(this._subI, function () {
            this.trigger("closed");
        }.bind(this));
    }
    onClick(e) {
        if (this._pCon.classList.contains("active")) {
            this.close();
        } else {
            this.open();
        }
    }
}