export default class AAnimation extends window.AObject {
    constructor(ele = null) {
        super();
        this.element = ele;
        this.onBefore = function () { };
        this.onAnimation = function () { };
        this.onAfter = null;
        this.status = 0;
    }
    setType(type, args = { "parent": null }) {
        args.parent.classList.add("animation" + type);
        this.params = args;
        switch (type) {
            case "Fade":         
                this.onBefore = (function () {
                    this.trigger("beforeAnimation", this.element);
                    if (this.element.classList.contains("show")) {
                        this.status = 0;
                        this.element.style.opacity = 0;
                    } else {
                        this.status = 1;
                        this.element.classList.add("show");
                    }
                });
                this.onAnimation = (function () {
                    if (this.status == 0) {
                        window.requestTimeout((() => {
                            this.element.classList.remove("show");
                            this.trigger("endAnimation", this.element);
                        }).bind(this), 100, window.registerCancel);
                    } else {
                        window.requestTimeout((() => {
                            var f = function (ev) {
                                if (ev.propertyName == "opacity") {
                                    this.trigger("endAnimation", this.element);
                                    ev.target.removeEventListener("transitionend", f, false);
                                }
                            }
                            this.element.addEventListener('transitionend', f.bind(this), false);
                            this.element.style.opacity = 1;
                          
                        }).bind(this), 50, window.registerCancel);
                    }
                });
                break;
            case "Slide":
                var slideC = document.createElement("div");
                slideC.classList.add("slideContent");
                while (this.params.parent.childNodes.length > 0) {
                    slideC.appendChild(this.params.parent.childNodes[0]);
                }
                this.params.parent.appendChild(slideC);

                slideC.querySelectorAll(".tabcontent").forEach((el) => {
                    let style = this.params.parent.currentStyle || window.getComputedStyle(this.params.parent);
                    let m = parseFloat(style.marginLeft) + parseFloat(style.marginRight);
                    let w = this.params.parent.offsetWidth;
                    if (m < 0) {
                       // w += Math.abs(m);
                    }
                    el.style.width = w  + "px";
                })
                this.slideC = slideC;
                this.onBefore = (function () {
                    this.trigger("beforeAnimation", this.element);
                    if (this.element.classList.contains("show")) {
                        this.status = 0;
                    } else {
                        this.status = 1;
                        this.element.classList.add("show");
                    }
                });
                this.onAnimation = (function () {
                   
                    if (this.status == 0) {
                        this.element.classList.remove("show");
                        this.trigger("endAnimation", this.element);
                    } else {
                      
                        var f = function (ev) {
                            if (ev.propertyName == "transform") {
                                this.trigger("endAnimation", this.element);
                                ev.target.removeEventListener("transitionend", f, false);
                            }
                        }
                        this.slideC.addEventListener('transitionend', f.bind(this), false);
                        this.slideC.style.transform = "translateX(-" + this.element.offsetLeft + "px)";
                        
                    }
                });
                break;
        }
    }
    animation() {
        if (this.onBefore != null) this.onBefore.call(this);
        this.onAnimation.call(this);
    }
    dispose() {
        
    }
}