import ClassSelect from "../select2.js"
import { ChatDepartmentUserDatatable } from '../datatables/ChatDepartmentDatatable.js'
import Ajax from "../ajax.js"
import { alertConfirmAction, alertError, alertSuccess } from "../alerts/sweetAlert.js"

class ChatDepartmentForm {
    constructor(domItem) {
        this.item = domItem
        this.chatDepartmentId = this.item.data("id")
        this.btnAddUserToDepartment = this.item.find("#add-user-admin-chat-department")
        this.btnUpdate = this.item.find("#btn-chat-department-update")
        this.chatDepartmentUsersDatatable = new ChatDepartmentUserDatatable($("#tableChatDepartmentUsers"))
        this.seletChatDepartmentUserItem = this.item.find("#selectChatDepartmentUser")
        this.seletChatDepartmentUser = new ClassSelect(
            this.seletChatDepartmentUserItem,
            `/chat/department/users/select/add/${this.chatDepartmentId}`
        )
    }
    init() {
        this.seletChatDepartmentUser.init()
        this.chatDepartmentUsersDatatable.init()
        this.btnAddUserToDepartment.on('click', this._handleUserToDepartment.bind(this))
        this.btnUpdate.on("click", this._handleUpdateDepartment.bind(this))
    }
    getFormData() {
        return {
            display: this.item.find("#chat-department-display").val(),
            description: this.item.find("#chat-department-description").val()
        }
    }
    updateFormData(data) {
        this.item.find("#chat-department-display").val(data.display)
        this.item.find("#chat-department-description").val(data.description)
    }
    _handleUserToDepartment() {
        this.btnAddUserToDepartment.attr("disabled", "disabled")
        const ajax = new Ajax("/chat/department/subscribe/admin/user",
            {
                user_id: this.seletChatDepartmentUser.getVal(),
                chat_department_id: this.chatDepartmentId
            },
            null,
            this._handleUserToDepartmentSuccess.bind(this),
            this._handleUserToDepartmentError.bind(this)
        )
        if (this.seletChatDepartmentUser.getVal()) {
            ajax.post();
        } else {
            this.btnAddUserToDepartment.removeAttr("disabled")
        }
    }
    _handleUserToDepartmentSuccess(response) {
        this.btnAddUserToDepartment.removeAttr("disabled")
        this.chatDepartmentUsersDatatable.datatable.ajax.reload()
        popSuccessAlert(response.message);
        this.seletChatDepartmentUser.reset()
    }
    _handleUserToDepartmentError(response) {
        popErrorAlert(response.message);
        this.btnAddUserToDepartment.removeAttr("disabled")

    }
    _handleUpdateDepartment() {
        this.btnUpdate.attr("disabled")
        const ajax = new Ajax("/chat/department/update/" + this.chatDepartmentId,
            this.getFormData(),
            null,
            this._handleUserToDepartmentSuccess.bind(this),
            this._handleUserToDepartmentError.bind(this)
        )
        if (this.getFormData()) {
            ajax.post();
        } else {
            this.btnUpdate.removeAttr("disabled")
        }
    }
    __handleUpdateDepartmentSuccess(response) {
        this.btnUpdate.removeAttr("disabled")
        popSuccessAlert(response.message);
        this.updateFormData(response.data)
    }
    _handleUpdateDepartmentError(response) {
        this.btnUpdate.removeAttr("disabled")
        popErrorAlert(response.message);
    }



}

export default ChatDepartmentForm