import Ajax from "../ajax.js";
import { alertConfirmationDelete, alertSuccess, alertError, alertConfirmAction } from '../alerts/sweetAlert.js'
export class ChatDepartmentDatatable {
    constructor(domItem) {
        this.item = domItem
        this.chatDepartmentDisplay = $("#chat-department-display")
        this.btnStoreChatDepartment = $("#btn-add-new-chat-department")

        this.datatableColumns = [
            { data: 'id', searchable: false, sortable: true },
            { data: 'display', searchable: true, sortable: true },
            { data: 'description', searchable: true, sortable: true },
            {
                data: 'action', searchable: false, sortable: false,
                render: (d, t) => {
                    return `<div class="btn-group btn-group-sm">
                                <a href="/chat/department/edit/${d}" class="chat-department-edit" ><i class="ti ti-eye ti-sm mx-2"></i></a>
                                <a href="javascript:void(0);" class="chat-department-delete" data-id="${d}" ><i class="ti ti-trash ti-sm mx-2"></i></a>
                            </div>`
                }
            }
        ]
    }
    init() {
        this.btnStoreChatDepartment.on('click', this.storeNewChatDepartment.bind(this))
        this.item.on('click', '.chat-department-delete', this.deleteChatDepartment.bind(this))

        this.datatable = this.item.DataTable({
            processing: true,
            order: [[0, 'asc']],
            layout: {
                topStart: 'pageLength',
                topEnd: 'search',
                bottomStart: 'info',
                bottomEnd: 'paging'
            },
            serverSide: true,
            pageLength: 10,
            language: {
                url: "/themes/vuexy/vendor/libs/datatables-sk/plugins/i18n/es-ES.json"
            },
            columns: this.datatableColumns,
            ajax: '/chat/department/datatable'
        });
    }
    deleteChatDepartment(event) {
        const ajax = new Ajax(
            `/chat/department/${$(event.currentTarget).data("id")}`,
            null,
            null,
            this.deleteChatDepartmentSuccess.bind(this),
            this.deleteChatDepartmentError.bind(this)
        )
        alertConfirmationDelete().then(result => {
            if (result.isConfirmed) {
                ajax.delete()
            }
        })
    }
    deleteChatDepartmentSuccess(response) {
        this.datatable.ajax.reload()
        popSuccessAlert(response.message);

    }
    deleteChatDepartmentError(response) {
        popErrorAlert(response.message);

    }
    storeNewChatDepartment() {
        this.btnStoreChatDepartment.attr("disabled")
        const ajax = new Ajax("/chat/department", {
            display: this.chatDepartmentDisplay.val()
        },
            null,
            this.storeNewChatDepartmentSuccess.bind(this),
            this.storeNewChatDepartmentError.bind(this)
        )
        if (this.chatDepartmentDisplay.val()) {
            alertConfirmAction().then(result => {
                if (result.isConfirmed) {
                    ajax.post()
                }
            })
        } else {
            this.btnStoreChatDepartment.removeAttr("disabled")
        }
    }
    storeNewChatDepartmentSuccess(response) {
        this.datatable.ajax.reload()
        popSuccessAlert(response.message);
    }
    storeNewChatDepartmentError(response) {
        console.log(response)
        popErrorAlert(response.message);

    }

}
export class ChatDepartmentUserDatatable {
    constructor(domItem) {
        this.item = domItem
        this.datatableColumns = [
            { data: 'userFullName', searchable: true, sortable: true },
            { data: 'username', searchable: true, sortable: true },
            {
                data: 'action', searchable: false, sortable: false,
                render: (d, t) => {
                    return `<div class="btn-group btn-group-sm">
                                <a type="button" href="javascript:void(0);" data-id="${d}" class="chat-department-user-delete"><i class="ti ti-trash ti-sm mx-2"></i></a>
                            </div>`
                }
            }
        ]
    }
    init() {
        this.actions()
        this.datatable = this.item.DataTable({
            processing: true,
            order: [[0, 'desc']],
            layout: {
                topStart: 'pageLength',
                topEnd: 'search',
                bottomStart: 'info',
                bottomEnd: 'paging'
            },
            serverSide: true,
            pageLength: 10,
            language: {
                url: "/themes/vuexy/vendor/libs/datatables-sk/plugins/i18n/es-ES.json"
            },
            columns: this.datatableColumns,
            ajax: '/chat/department/users/datatable/' + this.item.data('id')
        });
    }
    actions() {
        this.item.on("click", ".chat-department-user-delete", this.deleteRow.bind(this))
    }
    deleteRow(event) {
        const ajax = new Ajax(`/chat/department/admin/user/${this.item.data('id')}/${$(event.currentTarget).data("id")}`,
            null,
            null,
            this.deleteRowSuccess.bind(this),
            this.deleteRowError.bind(this),
        )
        alertConfirmationDelete().then(result => {
            if (result.isConfirmed) {
                ajax.delete()
            }
        })
    }
    deleteRowSuccess(response) {
        this.datatable.ajax.reload();
        popSuccessAlert(response.message);

    }
    deleteRowError(response) {
        popErrorAlert(response.message);

    }


}



