class banUserPopup{
    constructor(target, cb){
        this.target = target;
        this.cb = cb;
        this.popup = new canopyUXUtils.popup("userBan", true, this.asyncConstruction.bind(this));
    }

    asyncConstruction(){
        this.title = document.querySelector(".popup-title");
        //Setup title text real quick-like :P
        this.title.innerHTML = `Ban ${this.target}`;

        this.ipBan = document.querySelector("#ban-popup-ip");
        this.permBan = document.querySelector("#ban-popup-perm");
        this.expiration = document.querySelector("#ban-popup-expiration");
        this.expirationPrefix = document.querySelector("#ban-popup-expiration-prefix");
        this.banButton = document.querySelector("#ban-popup-ban-button");
        this.cancelButton = document.querySelector("#ban-popup-cancel-button");

        this.setupInput();
    }

    setupInput(){
        this.permBan.addEventListener("change", this.permaBanLabel.bind(this));
        this.cancelButton.addEventListener("click", this.popup.closePopup.bind(this.popup));
        this.banButton.addEventListener("click",this.ban.bind(this));
    }

    permaBanLabel(event){
        if(event.target.checked){
            this.expirationPrefix.innerHTML = "Account Deletion In: "
            this.expiration.value = 30;
        }else{
            this.expirationPrefix.innerHTML = "Ban Expires In: "
            this.expiration.value = 14;
        }
    }

    async ban(event){
        //Close out the popup
        this.popup.closePopup();

        //Submit the user ban based on input
        const data = await adminUtil.banUser(this.target, this.permBan.checked, this.ipBan.checked, this.expiration.value);

        //For some reason comparing this against undefined or null wasnt working in and of itself...
        if(data != null && this.cb != null){
            //Why add an extra get request when we already have the data? :P
            await this.cb(data);
        }
    }
}


class chanBanUserPopup{
    constructor(channel, target, cb){
        this.channel = channel;
        this.target = target;
        this.cb = cb;
        this.popup = new canopyUXUtils.popup("channelUserBan", true, this.asyncConstruction.bind(this));
    }

    asyncConstruction(){
        this.title = document.querySelector(".popup-title");
        //Setup title text real quick-like :P
        this.title.innerHTML = `Ban ${this.target}`;

        this.permBan = document.querySelector("#ban-popup-perm");
        this.expiration = document.querySelector("#ban-popup-expiration");
        this.expirationPrefix = document.querySelector("#ban-popup-expiration-prefix");
        this.banAlts = document.querySelector("#ban-popup-alts");
        this.banButton = document.querySelector("#ban-popup-ban-button");
        this.cancelButton = document.querySelector("#ban-popup-cancel-button");

        this.setupInput();
    }

    setupInput(){
        this.permBan.addEventListener("change", this.permaBanLabel.bind(this));
        this.cancelButton.addEventListener("click", this.popup.closePopup.bind(this.popup));
        this.banButton.addEventListener("click",this.ban.bind(this));
    }

    permaBanLabel(event){
        if(event.target.checked){
            this.expiration.disabled = true;
        }else{
            this.expiration.disabled = false;
        }
    }

    async ban(event){
        //Get expiration days
        const expirationDays = this.permBan.checked ? -1 : this.expiration.value;
        //Send ban request off to server and retrieve new ban list
        const data = await utils.ajax.chanBan(this.channel, this.target, expirationDays, this.banAlts.checked);

        //Close the popup
        this.popup.closePopup();

        //If we have data and a callback, run the callback with our data 
        if(data != null && this.cb != null){
            await this.cb(data);
        }
    }
}