import ClassSelect from '../../components/select2.js';
import Ajax from '../../components/ajax.js';
import tarjetaDireccion from '../../components/tarjetaDireccionPresupuesto.js';
import SelectorTiradaEnvio from './selectorTiradaEnvio.js';
import DireccionForm from '../../components/modalDireccion.js';


class Direcciones {

    constructor(domItem, wizardForm, validatorStepper) {

        this.domItem = domItem;
        this.wizardStep = wizardForm.querySelector('#direcciones-libro');
        this.validatorStepper = validatorStepper;
        this.allowNext = true;

        this.recogidaTaller = this.domItem.find('#recogerEnTaller');

        this.unidadesAdd = this.domItem.find('#unidadesEnvio');
        this.btnAdd = this.domItem.find('#insertarDireccion');
        this.btnNew = this.domItem.find('#nuevaDireccion');
        this.entregaPieCallero = this.domItem.find('#entregaPieCalle');

        this.direccionesCliente = new ClassSelect($("#direcciones"), '/misdirecciones/getSelect2');

        this.divDirecciones = $(this.domItem.find('#divDirecciones'));
        this.divTiradas = this.domItem.find('#containerTiradasEnvios');

        this.checksTiradasEnvio = $('.check-tirada-envio');

        this.direcciones = [];

        this.tiradaSeleccionada = null;

        this.direcciones.calcularPresupuesto = false;

        this.initValidation();

    }


    init() {

        $("#clienteId").on('change', this.handleChangeCliente.bind(this));

        this.recogidaTaller.on('change', () => {

            if (this.recogidaTaller.is(':checked')) {

                this.divDirecciones.empty();
                this.direcciones = [];
                $('.div-direcciones').addClass('d-none');
            }
            else {
                $('.div-direcciones').removeClass('d-none');
            }
        });


        this.direccionesCliente.init();
        this.btnAdd.on('click', this.#insertDireccion.bind(this));
        this.btnNew.on('click', this.#nuevaDireccion.bind(this));
    }


    cargarDatos(datos, datosGenerales) {

        self = this;

        try {

            let tiradas_envio = [datosGenerales.tirada];
            if (datosGenerales.tirada2) {
                tiradas_envio.push(datosGenerales.tirada2);
            }
            if (datosGenerales.tirada3) {
                tiradas_envio.push(datosGenerales.tirada3);
            }
            if (datosGenerales.tirada4) {
                tiradas_envio.push(datosGenerales.tirada4);
            }
            tiradas_envio.sort((a, b) => a - b);

            setTimeout(() => {

                tiradas_envio.forEach(tirada => {
                    self.insertTirada(tirada);
                });
            }, 0);

            if (datos.entrega_taller == 1) {
                this.recogidaTaller.prop('checked', true);
                this.recogidaTaller.trigger('change');
            }
            else {

                this.recogidaTaller.prop('checked', false);

                setTimeout(function () {
                    $(`#containerTiradasEnvios .tirada-envio input[tirada="${datosGenerales.tirada}"]`).trigger('click');
                }, 0);


                for (let i = 0; i < datos.length; i++) {

                    let id = datos[i].id;
                    let unidades = datos[i].unidades;
                    let entregaPalets = datos[i].palets;


                    if (id == null || id <= 0 || id == undefined)
                        return;
                    if (unidades == null || unidades <= 0 || unidades == undefined)
                        return;

                    let peticion = new Ajax('/misdirecciones/getDireccionPresupuesto/' + id, {}, {},
                        (response) => {
                            let divId = "dirEnvio-1";
                            let direccionesActuales = this.divDirecciones.find('.direccion-cliente');
                            if (direccionesActuales.length > 0) {
                                // the the lass item
                                let last = direccionesActuales[direccionesActuales.length - 1];
                                divId = "dirEnvio-" + (parseInt(last.id.split('-')[1]) + 1);
                            }
                            let tarjeta = new tarjetaDireccion(this.divDirecciones, divId, response.data[0]);
                            tarjeta.setUnidades(unidades);
                            tarjeta.setEntregaPalets(entregaPalets);
                            tarjeta.card.find('.direccion-editar').on('click', this.#editUnits.bind(self));
                            tarjeta.card.find('.direccion-eliminar').on('click', this.#deleteDireccion.bind(self));
                            this.divDirecciones.append(tarjeta.card);
                            this.direcciones.push(tarjeta);
                        },
                        () => {
                            console.error('Error getting address');
                        });

                    peticion.get();
                }
            }
        } catch (e) {
            console.error(e);
            $('#loader').modal('hide');
        }
    }

    initValidation() {

        const stepper = this.validatorStepper;

        this.formValidation = FormValidation.formValidation(this.wizardStep, {
            fields: {
                div_error_envios: {
                    validators: {
                        callback: {
                            callback: () => {
                                const div = $('#divErrorEnvios'); // Selecciona el div

                                div.find('.fv-plugins-message-container').remove();

                                if ($('.check-tirada-envio:checked').length > 0) {
                                    let unidades = parseInt($($('.check-tirada-envio:checked')[0]).attr('tirada'));
                                    let total_envio = 0;
                                    // se recorre el array this.direcciones
                                    this.direcciones.forEach(direccion => {
                                        total_envio += parseInt(direccion.getUnidades());
                                    });
                                    if (total_envio <= unidades) {
                                        return true;
                                    }
                                }

                                div.append(`
                                    <div class="fv-plugins-message-container invalid-feedback">
                                        <div data-field="div_tipo_cubierta" data-validator="callback">
                                            El total de unidades enviadas no puede ser mayor que la tirada seleccionada
                                        </div>
                                    </div>
                                `);
                                return false;
                            },
                        }

                    }
                }
            },
            plugins: {
                trigger: new FormValidation.plugins.Trigger(),
                bootstrap5: new FormValidation.plugins.Bootstrap5({
                    // Use this for enabling/changing valid/invalid class
                    // eleInvalidClass: '',
                    eleValidClass: '',
                    rowSelector: function (field, ele) {
                        // field is the field name
                        // ele is the field element
                        switch (field) {
                            case 'div_error_envios':
                                return '.col-sm-10';
                            default:
                                return '.col-sm-3';
                        }
                    }
                }),
                autoFocus: new FormValidation.plugins.AutoFocus(),
                submitButton: new FormValidation.plugins.SubmitButton()
            }
        }).on('core.form.valid', () => {
            if (this.allowNext)
                stepper.next();
        });
    }


    insertTirada(tirada) {

        const self = this;

        let tarjeta = new SelectorTiradaEnvio(this.divTiradas, 'tiradaEnvios-' + tirada, tirada);
        let customOption = tarjeta.card.find('.check-tirada-envio');

        customOption.on('click', function () {
            self.#handleTiradaEnvio(customOption, self);
        });
    }

    obtenerDireccionesCalculo() {
        let direcciones = [];
        this.direcciones.forEach(direccion => {
            let dir = {
                id: direccion.getId(),
                unidades: direccion.getUnidades(),
                entregaPalets: direccion.getEntregaPalets()
            };
            direcciones.push(dir);
        });
    }


    #nuevaDireccion() {

        let dialog = new DireccionForm($("#addressModal"), function () {
            try {
                let data = dialog.getData();
                data.cliente_id = $("#clienteId").select2('data')[0].id;

                new Ajax(
                    '/misdirecciones/add',
                    data,
                    {},
                    () => { dialog.modal.modal('hide') },
                    () => { dialog.modal.modal('hide') }
                ).post();
            }
            catch (e) {
                console.error(e);
                dialog.modal.modal('hide');
            }

        });
        dialog.init();
    }

    #handleTiradaEnvio(customOption, self) {

        const el = customOption[0];

        if (el.checked) {
            // If custom option element is radio, remove checked from the siblings (closest `.row`)
            if (el.type === 'radio') {
                const customRadioOptionList = [].slice.call(el.closest('.row').querySelectorAll('.custom-option'))
                customRadioOptionList.map(function (customRadioOptionEL) {
                    customRadioOptionEL.closest('.custom-option').classList.remove('checked')
                })
            }
            el.closest('.custom-option').classList.add('checked')
            self.tiradaSeleccionada = parseInt(el.getAttribute('tirada'));
        } else {
            el.closest('.custom-option').classList.remove('checked')
        }
    }


    #insertDireccion() {

        self = this;

        try {

            let id = this.direccionesCliente.getVal();
            let unidades = this.unidadesAdd.val();

            if (id == null || id <= 0 || id == undefined)
                return;
            if (unidades == null || unidades <= 0 || unidades == undefined)
                return;

            let entregaPalets = this.entregaPieCallero.is(':checked');
            let divId = "dirEnvio-1";
            let direccionesActuales = this.divDirecciones.find('.direccion-cliente');
            if (direccionesActuales.length > 0) {
                // the the lass item
                let last = direccionesActuales[direccionesActuales.length - 1];
                divId = "dirEnvio-" + (parseInt(last.id.split('-')[1]) + 1);

                let total_unidades = 0;
                for (let i = 0; i < this.direcciones.length; i++) {
                    total_unidades += parseInt(this.direcciones[i].getUnidades());
                }

                if (total_unidades + parseInt(unidades) > this.getSelectedTirada()) {
                    popErrorAlert("El total de unidades enviadas tiene que ser menor que " + this.getSelectedTirada());
                    return;
                }
            }
            else {
                if (unidades > this.getSelectedTirada()) {
                    popErrorAlert("El total de unidades enviadas tiene que ser menor que " + this.getSelectedTirada());
                    return;
                }
            }

            $('#loader').modal('show');
            let peticion = new Ajax('/misdirecciones/get/' + id, {}, {},
                (response) => {

                    if (this.direcciones.length == 0) {
                        $('#loader').modal('hide');
                        if (entregaPalets) {
                            this.calcularPresupuesto = true;
                        }
                    }
                    else {
                        this.calcularPresupuesto = true;
                    }
                    let tarjeta = new tarjetaDireccion(this.divDirecciones, divId, response.data[0]);
                    tarjeta.setUnidades(unidades);
                    tarjeta.setEntregaPalets(entregaPalets);
                    tarjeta.card.find('.direccion-editar').on('click', this.#editUnits.bind(self));
                    tarjeta.card.find('.direccion-eliminar').on('click', this.#deleteDireccion.bind(self));
                    this.divDirecciones.append(tarjeta.card);
                    this.direcciones.push(tarjeta);
                    self.divDirecciones.trigger('change');

                },
                () => {
                    console.error('Error getting address');
                    $('#loader').modal('hide');
                });

            peticion.get();
        } catch (e) {
            console.error(e);
            $('#loader').modal('hide');
        }
    }


    handleChangeCliente() {

        this.direccionesCliente.setParams({ 'cliente_id': $("#clienteId").select2('data')[0].id })
        this.direccionesCliente.empty();

        this.domItem.find('.direccion-cliente').remove();
        this.direcciones = [];
    }

    #editUnits(event) {

        let id = $(event.currentTarget.closest('.direccion-cliente'))[0].id;
        let tarjeta = this.direcciones.filter(direccion => direccion.id == id)[0].card;
        let unidades = tarjeta.find('.unidades').text().split(' ')[0];

        let modal = $('#modalInput');
        modal.find('.modal-title').text('Editar unidades');
        modal.find('.inputData').val(unidades);
        modal.modal('show');

        modal.find('.btn-primary').off('click');
        modal.find('.btn-primary').on('click', () => {
            try {

                let nuevo_valor = parseInt(modal.find('.modal-body input').val());
                if (nuevo_valor > 0) {
                    tarjeta.find('.unidades').text(nuevo_valor + ' unidades');
                    if (this.direcciones.length > 1) {
                        this.calcularPresupuesto = true;
                    }
                    this.divDirecciones.trigger('change');
                }
            } catch (error) {
                console.error('Units must be a number');
            }
            modal.modal('hide');
        });
    }

    #deleteDireccion(event) {

        let tarjeta = event.currentTarget.closest('.direccion-cliente');
        let id = tarjeta.id;

        const numTarjetasAntes = this.direcciones.length;
        if (numTarjetasAntes == 2) {
            this.calcularPresupuesto = true;
        }

        this.direcciones = this.direcciones.filter(direccion => direccion.getId() !== id);

        tarjeta.remove();
        this.divDirecciones.trigger('change');
    }

    getSelectedTirada() {
        if ($('.check-tirada-envio:checked').length > 0)
            return parseInt($($('.check-tirada-envio:checked')[0]).attr('tirada'));
        else
            return null;
    }
}


export default Direcciones;