import Table from '../../components/table.js';
import ConfirmDeleteModal from '../../components/ConfirmDeleteModal.js';
import Ajax from '../../components/ajax.js';
import ClassSelect from '../../components/select2.js';

class ClienteUsuarios {

    constructor(domItem) {

        this.domItem = domItem;
        this.table = null;
        this.deleteModal = null;

        this.usersSelect = new ClassSelect($('#usuariosDisponibles'), '/clienteusuarios/getusers', "");
        this.userAdd = this.domItem.find('#addUserToClient');

        this.clienteId = window.location.href.split("/").pop();
    }

    init() {

        const self = this;

        this.#initTable();
        this.usersSelect.init();

        this.deleteModal = new ConfirmDeleteModal('clienteUsuarios');
        this.deleteModal.init();

        // Eliminar la fila
        this.table.table.on('click', '.btn-delete-' + this.table.getAlias(), function (e) {
            const row = $(this).closest('tr')[0]._DT_RowIndex;
            const dataId = $(this).attr('data-id');
            self.deleteModal.setData($(this).attr('data-id'));
            self.deleteModal.show(() => {

                if (!Number.isNaN(Number(self.deleteModal.getData()))) {

                    new Ajax(
                        '/clienteusuarios/delete/' + dataId,
                        {

                        },
                        {},
                        (data, textStatus, jqXHR) => {

                            self.table.table.clearPipeline();
                            self.table.table.row($(row)).invalidate().draw();

                            popSuccessAlert(data.msg ?? jqXHR.statusText);
                        },
                        (error) => {
                            console.log(error);
                        }

                    ).get();
                    self.deleteModal.hide();
                }
            });
        });

        this.userAdd.on('click', function (e) {
            e.preventDefault();
            const userId = self.usersSelect.getVal();
            if (userId != "") {
                new Ajax(
                    '/clienteusuarios/adduser',
                    {
                        cliente_id: self.clienteId,
                        user_id: userId,
                    },
                    {},
                    (data, textStatus, jqXHR) => {
                        self.table.table.clearPipeline();
                        self.table.table.draw();
                        popSuccessAlert(data.msg ?? jqXHR.statusText);
                    },
                    (error) => {
                        console.log(error);
                    }

                ).post();
            }
        });
    }

    #initTable() {

        const columns = [
            { 'data': 'id' },
            { 'data': 'nombre' },
            { 'data': 'apellidos' },
            { 'data': 'email' },
        ];

        const actions = ['delete'];

        this.table = new Table(
            $('#tableOfClienteUsuarios'),
            'clienteUsuarios',
            '/clienteusuarios/datatable',
            columns,
            [{ name: 'id_cliente', value: this.clienteId },]
        );


        this.table.init({
            actions: actions,
            colVisibility: false,
            buttonsExport: false,
        });
    }
}

export default ClienteUsuarios;