class BaseContainer {

    main_content_div = '#main_content';
    scripts = [];
    navigation;
    functions = [];

    constructor()
    {
        this.navigation = new Navigation();
        this.navigation.setContainer(this);
        this.initAjaxFormDefaultOptions();
        return this;
    }

    static init()
    {
        return new this();
    }

    async require(url)
    {
        if(!this.inArray(url, this.scripts)) {
            console.log('SE CARGA: '+ url);
            this.scripts.push(url);
            try {
                await $.getScript(url);
            } catch (error) {
                console.error(`Error al cargar el script: ${url}`, error);
            }
        }
    }

    bind(name, script)
    {
        this.functions[name] = script;
    }

    execute(name)
    {
        if (this.functions[name]) {
            this.functions[name]();
        } else {
            console.warn(`La función ${name} no está definida.`);
        }
    }

    initAjaxFormDefaultOptions() {
        this.ajaxform_default_options = {
            preSubmit: (c) => {
                $('.alerts').html('');
                c.disabled(true);
                $.each(c.event.currentTarget, (k, v) => {
                    $(v).removeClass('is-invalid');
                });
            },
            postSubmit: (r, c) => {
                if (r.success === true) {
                    $('.modal').modal('hide');
                    Swal.fire({
                        title: 'Hecho',
                        text: r.message,
                        icon: 'success'
                    }).then(() => {
                        if (r.redirect !== undefined) {
                            this.onProgressTime(true);
                            this.navigation.change_page(r.redirect);
                        }else{
                            this.onProgressTime(true);
                            const params = window.location.search;
                            let page = params.split('page=')[1];
                            page = page === undefined ? 1 : page;
                            this.navigation.fetch_data(params, page);
                            c.disabled(false);
                        }
                    });
                } else {
                    $('.modal').modal('hide');
                    Swal.fire({
                        title: 'Error',
                        text: r.message,
                        icon: 'error'
                    }).then(() => {
                        c.disabled(false);
                    });
                }
                return true;
            },
            isError: (r, c) => {
                $.each(r.errors, (k, v) => {
                    console.error('Error:', k, 'Mensaje:', v);
                    $(`#${k}`).addClass('is-invalid');
                    $(`#alert-${k}`).html(v);
                });
                c.disabled(false);
            }
        }
    }

    onProgressTime(status) {
        if(status === true) {
            $(this.main_content_div).LoadingOverlay('show');
            return;
        }
        $(this.main_content_div).LoadingOverlay('hide');
    }

    inArray(needle, haystack)
    {
        return haystack.includes(needle);
    }

    ajaxForm(tag_name, options = null)
    {
        if(options === null) {
            options = this.ajaxform_default_options;
        }

        return new FormAjax(tag_name, options);
    }

    base64_decode(str) {
        return decodeURIComponent(atob(str).split('').map(c =>
            '%' + ('00' + c.charCodeAt(0).toString(16)).slice(-2)).join(''));
    }

    load_modal(params)
    {
        params = this.base64_decode(params);
        params = JSON.parse(params);
        $('.alerts').html('');
        $.each(params, (key, value) => {
            const selector = $(`#${key}`);
            if(selector.length) {
                switch(selector[0].nodeName) {
                    case 'INPUT':
                        selector.removeClass('is-invalid');
                        if(selector.attr('type') === 'checkbox') {
                            value === 1 || value === 'on' ? selector.iCheck('check') : selector.iCheck('uncheck');
                        } else {
                            selector.val(value);
                        }
                        break;
                    case 'TEXTAREA':
                    case 'SELECT':
                        selector.val(value);
                        break;
                    case 'DIV':
                        selector.html(value);
                        break;
                }
            } else {
                const [prefix, id] = String(key).split('#');
                if(prefix === 'route') {
                    id !== undefined ? $(`#${id}`).attr('action', value) : $('#form').attr('action', value);
                }
                if(prefix === '__functions') {
                    console.log(value);
                    $.each(value, (index, fn) => {
                        eval(`${fn}`);
                    });
                }
            }
        });
    }
}