import Table from '../../components/table.js';
import TableEditor from '../../components/tableEditor.js';
import ConfirmDeleteModal from '../../components/ConfirmDeleteModal.js';
import ConvertToTemplate from './modalConvert2Template.js';
import ClassSelect from '../../components/select2.js';
import Ajax from '../../components/ajax.js';
import { getToken } from '../../common/common.js';


class tarifasClienteView {

    constructor(domItem) {

        this.domItem = domItem;

        this.csrf_token = getToken();
        this.csrf_hash = $('#mainContainer').find('input[name="' + this.csrf_token + '"]').val();

        this.clienteId = window.location.href.split("/").pop();
        this.actions = ['edit', 'delete', 'cancel'];

        this.headerSearcher();

        this.tableTarifas = null;
        this.editorTarifas = null;
        this.confirmDeleteModal = null;

        this.deleteModal = null;
        this.convertToTemplate = null;

        this.plantillas = $(this.domItem.find('#plantillas'));
        this.selectorPlantilla = new ClassSelect(this.plantillas, '/clienteplantillaprecios/menuitems', '');

        this.convertToTemplateBtn = $('#convert2template');
    }

    init() {

        const self = this;

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

        this.convertToTemplate = new ConvertToTemplate();
        this.convertToTemplate.init();

        this.#initEditor();

        this.#initTable();

        this.selectorPlantilla.init();
        
        this.#getPlantillaPrecios();

        this.convertToTemplateBtn.on('click', function () {
            self.convertToTemplate.show(self.#convertir2plantilla.bind(self));
        })


        // Editar en linea la fila
        this.tableTarifas.table.on('click', 'tbody span.edit', function (e) {

            const row = $(this).closest('tr');

            // Iniciar la edición en línea para todas las celdas de la fila
            self.editorTarifas.editor.inline(
                self.tableTarifas.table.cells(row, '*').nodes(),
                {
                    cancelHtml: '<a href="javascript:void(0);"><i class="ti ti-x"></i></a>',
                    submitHtml: '<a href="javascript:void(0);"><i class="ti ti-device-floppy"></i></a>',
                    cancelTrigger: row.find('span.cancel')[0],
                    submitTrigger: row.find('span.edit')[0],
                    submit: 'allIfChanged'
                }
            );
        });


        this.tableTarifas.table.on('click', '.btn-delete-' + this.tableTarifas.getAlias(), function (e) {
            const row = $(this).closest('tr')[0]._DT_RowIndex;
            self.deleteModal.setData($(this).attr('data-id'));
            self.deleteModal.show(() => {
                if ($.isNumeric(self.deleteModal.getData())) {
                    self.editorTarifas.editor
                        .create(false)
                        .edit(self.tableTarifas.table.rows(row), false)
                        .set('deleted_at', new Date().toISOString().slice(0, 19).replace('T', ' '))
                        .set('is_deleted', 1)
                        .submit();
                    self.deleteModal.hide();
                }
            });
        });

    }


    #initEditor() {

        const self = this;

        const tipo_linea = [
            { label: window.language.ClientePrecios.interior, value: 'interior' },
            { label: window.language.ClientePrecios.cubierta, value: 'cubierta' },
            { label: window.language.ClientePrecios.sobrecubierta, value: 'sobrecubierta' }
        ];

        const tipo_maquina = [
            { label: window.language.ClientePrecios.toner, value: 'toner' },
            { label: window.language.ClientePrecios.inkjet, value: 'inkjet' },
        ];

        const tipo_impresion = [
            { label: window.language.ClientePrecios.negro, value: 'negro' },
            { label: window.language.ClientePrecios.negrohq, value: 'negrohq' },
            { label: window.language.ClientePrecios.color, value: 'color' },
            { label: window.language.ClientePrecios.colorhq, value: 'colorhq' },
        ];

        const editorFields = [
            {
                name: "id",
                type: "readonly"
            }, {
                name: "tipo",
                type: "select",
                options: tipo_linea
            }, {
                name: "tipo_maquina",
                type: "select",
                options: tipo_maquina
            }, {
                name: "tipo_impresion",
                type: "select",
                options: tipo_impresion
            }, {
                name: "tiempo_min"
            }, {
                name: "tiempo_max"
            }, {
                name: "precio_hora"
            }, {
                name: "margen"
            }, {
                name: "total_precio_hora",
                type: 'hidden',
            }, {
                name: "user_updated_id",
                type: 'hidden',
            }, {
                name: "updated_at",
                type: 'hidden',

            }, {
                name: "plantilla_id",
                type: "hidden"
            }, {
                name: "cliente_id",
                type: "hidden"
            }, {
                name: "deleted_at",
                type: "hidden"
            }, {
                name: "is_deleted",
                type: "hidden"
            },
        ];
        this.editorTarifas = new TableEditor(
            $('#tableOfPrecios'),
            '/clienteprecios/datatable_editor',
            { [this.csrf_token]: this.csrf_hash },
            'id',
            editorFields);

        this.editorTarifas.init();

        this.editorTarifas.editor.on('preSubmit', function (e, d, type) {
            if (type === 'create') {
                d.data[0]['cliente_id'] = self.clienteId;
            }
        });

        this.editorTarifas.editor.on('submitSuccess', function (e, json, data, action) {

            self.tableTarifas.table.clearPipeline();
            self.tableTarifas.table.draw();
        });


        this.editorTarifas.editor.on('postEdit', function (e, json, data, action) {
            self.#borrarPlantillaTarifa(self.clienteId);
            self.selectorPlantilla.offChange();
            self.selectorPlantilla.empty();
            self.selectorPlantilla.setOption(0, 'Personalizado');
            self.selectorPlantilla.onChange(self.#changePlantilla.bind(self));
        })

        this.editorTarifas.editor.on('postCreate', function (e, json, data, action) {
            self.#borrarPlantillaTarifa(self.clienteId);
            self.selectorPlantilla.offChange();
            self.selectorPlantilla.empty();
            self.selectorPlantilla.setOption(0, 'Personalizado');
            self.selectorPlantilla.onChange(self.#changePlantilla.bind(self));
        })

        this.editorTarifas.editor.on('postCancel', function (e, json, data) {
            // Restaurar botones de acción por fila
            self.tableTarifas.table.rows().nodes().each(function (node) {
                $(node).find('span.edit').removeClass('d-none');
                $(node).find('span.cancel, span.submit').addClass('d-none');
            });
        });
    }

    #convertir2plantilla() {
        if (this.convertToTemplate.getNombrePlantilla().length == 0) {
            popErrorAlert(window.language.ClientePrecios.errors.error_nombre_template, 'error-nombre')
        }
        else {
            new Ajax('/clienteplantillaprecios/add',
                {
                    'from_client_data': 1,
                    'cliente_id': this.clienteId,
                    'nombre': this.convertToTemplate.getNombrePlantilla(),
                    [this.csrf_token]: this.csrf_hash
                },
                {},
                (response) => {
                    if (response.id) {

                        this.selectorPlantilla.offChange();
                        this.selectorPlantilla.setOption(response.id, this.convertToTemplate.getNombrePlantilla());
                        this.selectorPlantilla.onChange(this.#changePlantilla.bind(this));
                    }
                },
                (error) => {
                    console.log(error);
                }
            ).post();
        }
    }

    #getPlantillaPrecios() {

        new Ajax(
            '/clienteprecios/getplantilla',
            {
                'cliente_id': this.clienteId,
                [this.csrf_token]: this.csrf_hash
            },
            {},
            (data) => {
                this.selectorPlantilla.offChange();
                if (data !== null && typeof data === 'object') {
                    
                    if (data.hasOwnProperty('id') && data.id != null)
                        this.selectorPlantilla.setOption(data.id, data.nombre);
                    else {
                        this.selectorPlantilla.setOption(0, 'Personalizado');
                    }
                }
                else {

                    this.selectorPlantilla.setOption(0, 'Personalizado');
                }
                this.selectorPlantilla.onChange(this.#changePlantilla.bind(this));
            },
            (data) => {
                this.selectorPlantilla.onChange(this.#changePlantilla.bind(this));
                console.log(data);
            }
        ).get();
    }

    #changePlantilla() {

        const self = this;

        const data = $('#plantillas').select2('data');
        if (data.length > 0) {
            if (data[0].id == 0) {
                self.#borrarPlantillaTarifa(self.clienteId);
                self.tableTarifas.table.clearPipeline();
                self.tableTarifas.table.draw();

            }
            else {


                const id = data[0].id;
                if(id == 0) 
                    id = -1;
                new Ajax(
                    '/clienteprecios/changeplantilla',
                    {
                        'cliente_id': self.clienteId,
                        'plantilla_id': id,
                        [self.csrf_token]: self.csrf_hash
                    },
                    {},
                    () => {
                        self.tableTarifas.table.clearPipeline();
                        self.tableTarifas.table.draw();
                    },
                    (error) => {
                        console.log(error);
                    }
                ).post();
            }
        }


    }

    #borrarPlantillaTarifa(id) {

        new Ajax(
            '/clienteprecios/changeplantilla',
            {
                'cliente_id': id,
                [this.csrf_token]: this.csrf_hash
            },
            {},
            () => { },
            (data) => {
                console.log(data);
            }
        ).post();
    }

    #initTable() {

        const self = this;

        const columns = [
            { 'data': 'id' },
            {
                'data': 'tipo',
                'render': function (data, type, row, meta) {
                    if (data == 'interior')
                        return window.language.ClientePrecios.interior;
                    else if (data == 'cubierta')
                        return window.language.ClientePrecios.cubierta;
                    else if (data == 'sobrecubierta')
                        return window.language.ClientePrecios.sobrecubierta;
                }
            },
            {
                'data': 'tipo_maquina',
                'render': function (data, type, row, meta) {
                    if (data == 'toner')
                        return window.language.ClientePrecios.toner;
                    else if (data == 'inkjet')
                        return window.language.ClientePrecios.inkjet;
                }
            },
            {
                'data': 'tipo_impresion',
                'render': function (data, type, row, meta) {
                    if (data == 'negro')
                        return window.language.ClientePrecios.negro;
                    else if (data == 'negrohq')
                        return window.language.ClientePrecios.negrohq;
                    else if (data == 'color')
                        return window.language.ClientePrecios.color;
                    else if (data == 'colorhq')
                        return window.language.ClientePrecios.colorhq;
                }
            },
            { 'data': 'tiempo_min', render: (d) => `<span class="autonumeric">${d}</span>`},
            { 'data': 'tiempo_max', render: (d) => `<span class="autonumeric">${d}</span>`},
            { 'data': 'precio_hora', render: (d) => `<span class="autonumeric">${d}</span>`},
            { 'data': 'margen' },
            { 
                'data': 'total_precio_hora',
                'render': function (data, type, row, meta) {
                    const value = row.precio_hora*(1+row.margen/100.0);
                    return `<span class="autonumeric">${value}</span>`;
                }
            },
            { 'data': 'user_updated' },
            { 'data': 'updated_at' },
            {
                'data': 'plantilla_id',
                'searchable': false,
                'visible': false,
            },

        ];

        this.tableTarifas = new Table(
            $('#tableOfPrecios'),
            'tarifasCliente',
            '/clienteprecios/datatable',
            columns,
            [
                { name: 'cliente_id', value: window.location.href.split("/").pop() },
                { name: this.csrf_token, value: this.csrf_hash },
            ]
        );


        this.tableTarifas.init({
            actions: self.actions,
            buttonNewWithEditor: true,
            buttonsExport: true,
            editor: this.editorTarifas.editor,
        });


        this.tableTarifas.table.on('init.dt', function () {
            self.tableTarifas.table.page.len(50).draw();
        });

        $('button[data-bs-target="#tarifascliente"]').on('shown.bs.tab', function (event) {
            setTimeout(() => {
                self.tableTarifas.table.columns.adjust().draw();
            }, 1000); // Usamos setTimeout para asegurar que se dibuje después del renderizado
        });

    }



    headerSearcher() {

        const self = this;

        $('#tableOfPrecios thead tr').clone(false).appendTo('#tableOfPrecios thead');
        $('#tableOfPrecios thead tr:eq(1) th').each(function (i) {

            if (!$(this).hasClass("noFilter")) {

                if (i == 1) {

                    // Agregar un selector en la segunda columna
                    $(this).html('<select class="form-control" style="min-width:100px;max-width:120px;font-size:0.8rem !important;"></select>');

                    // Agregar opciones al selector
                    var selector = $('select', this);
                    selector.append('<option value="">Todos</option>'); // Opción vacía
                    selector.append('<option value="interior">Interior</option>');
                    selector.append('<option value="cubierta">Cubierta</option>');
                    selector.append('<option value="sobrecubierta">Sobrecubierta</option>');

                    selector.on('change', function () {
                        var val = $.fn.dataTable.util.escapeRegex(
                            $(this).val()
                        );
                        self.tableTarifas.table.column(i).search(val).draw();
                    });

                }

                else if (i == 2) {
                    // Agregar un selector en la tercera columna
                    $(this).html('<select class="form-control" style="min-width:100px;max-width:120px;font-size:0.8rem !important;"></select>');

                    // Agregar opciones al selector
                    var selector = $('select', this);
                    selector.append('<option value="">Todos</option>'); // Opción vacía
                    selector.append('<option value="toner">Toner</option>');
                    selector.append('<option value="inkjet">Inkjet</option>');

                    selector.on('change', function () {
                        var val = $.fn.dataTable.util.escapeRegex(
                            $(this).val()
                        );
                        self.tableTarifas.table.column(i).search(val).draw();
                    });
                }

                else if (i == 3) {
                    // Agregar un selector en la cuarta columna
                    $(this).html('<select class="form-control" style="min-width:100px;max-width:120px;font-size:0.8rem !important;"></select>');

                    // Agregar opciones al selector
                    var selector = $('select', this);
                    selector.append('<option value="">Todos</option>'); // Opción vacía
                    selector.append('<option value="negro">' + window.language.ClientePrecios.negro + '</option>');
                    selector.append('<option value="color">' + window.language.ClientePrecios.color + '</option>');
                    selector.append('<option value="negrohq">' + window.language.ClientePrecios.negrohq + '</option>');
                    selector.append('<option value="colorhq">' + window.language.ClientePrecios.colorhq + '</option>');

                    selector.on('change', function () {
                        var val = $.fn.dataTable.util.escapeRegex(
                            $(this).val()
                        );
                        self.tableTarifas.table.column(i).search(val).draw();
                    });
                }
                else {
                    $(this).html('<input type="text" class="form-control " style="min-width:100px;max-width:120px;font-size:0.8rem !important;"  />');

                    $('input', this).on('change clear', function () {
                        if (self.tableTarifas.table.column(i).search() !== this.value) {
                            self.tableTarifas.table
                                .column(i)
                                .search(this.value)
                                .draw();
                        }
                    });
                }
            }
            else {
                $(this).html('<span></span>');
            }
        });


    }
}



export default tarifasClienteView;