import MessagesDatatable from "../../../components/datatables/MessagesDatatable.js";
import Modal from "../../../components/modal.js";
import Ajax from "../../../components/ajax.js";
import ClassSelect from "../../../components/select2.js";
import Alert from "../../../components/alerts/alert.js";
class MessagePage {
    constructor() {
        this.messageDatatable = new MessagesDatatable($("#message-datatables-container")) // mensajesView.php
        this.modalNewMessage = new Modal($("#modalNewDirectMessage"))
        this.btnNewMessage = $("#btn-new-message")
        this.btnSubmitNewDirectMessage = this.modalNewMessage.item.find("#submit-new-direct-message")
        this.btnSubmitNewDirectMessageCliente = this.modalNewMessage.item.find("#submit-new-direct-message-client")

        this.formNewDirectMessage = this.modalNewMessage.item.find("#formNewDirectMessage")
        this.alert = new Alert($("#alertDirectMessage"))
        this.selectUsers = $("#select-users")
        this.selectDepartments = $("#select-departments")

        this.selectPlaceholder = {
            id: '0',
            text: "Seleccione un usuario"
        }
        this.selectDepartmentPlaceholder = {
            id: '0',
            text: "Seleccione un departamento"
        }
        this.selectMessageUsers = new ClassSelect(this.selectUsers, '/chat/users/all', this.selectPlaceholder, true)
        this.selectChatDepartment = new ClassSelect(this.selectDepartments, '/chat/department/select', this.selectDepartmentPlaceholder, true)

    }
    init() {
        this.events()
        this.messageDatatable.init()
    }
    events() {
        // Open new message when click in btn-new-message
        this.btnNewMessage.on("click", this.openNewMessageModal.bind(this))
        this.btnSubmitNewDirectMessage.on("click", this.handleSubmitNewMessage.bind(this))
        this.btnSubmitNewDirectMessageCliente.on("click", this.handleSubmitNewMessageClient.bind(this))

        $("#navs-top-align-all-tab").on("click",()=>{
            this.messageDatatable.datatable.ajax.reload()
            this.messageDatatable.focusTable = this.messageDatatable.datatableItem
        })
        $("#navs-top-align-presupuestos-tab").on("click",()=>{
            this.messageDatatable.datatablePresupuestoMessage.ajax.reload()
            this.messageDatatable.focusTable = this.messageDatatable.datatablePresupuestoMessageItem
        })
        $("#navs-top-align-pedidos-tab").on("click",()=>{
            this.messageDatatable.datatablePedidoMessage.ajax.reload()
            this.messageDatatable.focusTable = this.messageDatatable.datatablePedidoMessageItem
        })
        $("#navs-top-align-facturas-tab").on("click",()=>{
            this.messageDatatable.datatableFacturaMessage.ajax.reload()
            this.messageDatatable.focusTable = this.messageDatatable.datatableFacturaMessageItem
        })

    }
    openNewMessageModal() {
        this.formNewDirectMessage.trigger("reset")
        this.selectMessageUsers.init()
        this.alert.hide()
        this.showForm()
        this.modalNewMessage.toggle()
    }

     handleSubmitNewMessage() {
        this.btnNewMessage.addClass("loading")
        const ajax = new Ajax("/messages/direct",
            this.getNewMessageDataForm(),
            null,
            this.handleSubmitNewMessageSuccess.bind(this),
            this.handleSubmitNewMessageError.bind(this))
        ajax.post()
    }
    handleSubmitNewMessageSuccess(response) {
        this.btnNewMessage.removeClass("loading")
        this.alert.setAsSuccess()
        this.alert.setHeadingTitle(response.message)
        this.alert.show()
        this.hideForm()
        this.messageDatatable.datatable.ajax.reload()
    }
    handleSubmitNewMessageError(response) {
        const error = response.responseJSON
        this.btnNewMessage.removeClass("loading")
        this.alert.show()
        this.alert.setAsError()
        this.alert.setHeadingTitle(error.message)
    }
    handleSubmitNewMessageClient(){
        this.btnNewMessage.addClass("loading")
        const ajax = new Ajax("/messages/direct/client",
            this.getNewMessageDataFormClient(),
            null,
            this.handleSubmitNewMessageSuccess.bind(this),
            this.handleSubmitNewMessageError.bind(this))
        ajax.post()
    }
    handleSubmitNewMessageClientSuccess(){
        
    }
    handleSubmitNewMessageClientError(){
        
    }
    getNewMessageDataForm() {
        return {
            "title": this.formNewDirectMessage.find("#new-direct-message-title").val(),
            "message": this.formNewDirectMessage.find("#new-direct-message-text").val(),
            "users": this.selectMessageUsers.getVal()
        }
    }
    getNewMessageDataFormClient() {
        return {
            "title": this.formNewDirectMessage.find("#new-direct-message-title").val(),
            "message": this.formNewDirectMessage.find("#new-direct-message-text").val(),
            "chat_department_id": this.selectChatDepartment.getVal()
        }
    }
    hideForm() {
        this.formNewDirectMessage.addClass("d-none")
        this.btnSubmitNewDirectMessage.addClass("d-none")
        this.btnSubmitNewDirectMessageCliente.addClass("d-none")

    }
    showForm() {
        this.formNewDirectMessage.removeClass("d-none")
        this.btnSubmitNewDirectMessage.removeClass("d-none")
        this.btnSubmitNewDirectMessageCliente.addClass("d-none")


    }
}


export default MessagePage;