class Navigation {
    constructor() {
        this.paginate_selector = '.pagination a';
        this.paginate_scripts = () => {};
        this.navigation_selector = '#custom_navigation a';
        this.content = '';
        this.hasAjax = true;
        this.container = null;
        this.filter_id = 'form_filter';
        this.btn_filter = 'btn_filter';
        this.onProgress = false;
        this.filter_inputs = [];
        this.navigationInit();
        this.linksInit();
        this.paginateInit();
    }

    miniPaginator(config) {
        return new MiniPaginator(config);
    }

    navigationInit() {
        if (!this.hasAjax) return false;
        $(document).on('click', this.navigation_selector, (event) => {
            event.preventDefault();
            if (this.onProgress) return;
            this.onProgress = true;

            const classSelector = $(this.navigation_selector).parent();
            classSelector.addClass('disabled').removeClass('active');
            //$(event.currentTarget).parent().addClass('active');
            this.onProgressTime(true);
            this.change_page(event.currentTarget.getAttribute('data-url'), $(event.currentTarget).parent());
        });
        $(window).on("popstate", () => {
            this.onProgressTime(true);
            this.change_page(window.location.href);
        });
    }

    paginateInit() {
        if (!this.hasAjax) return false;
        $(document).on('click', this.paginate_selector, (event) => {
            event.preventDefault();
            this.filter_inputs_state(true);
            this.onProgressTime(true);
            const params = window.location.search;
            const page = event.currentTarget.href.split('page=')[1];
            this.fetch_data(params, page);
            window.scrollTo({ top: 0, behavior: 'smooth' });

        });
    }

    linksInit() {
        $(document).on('click', '.ajax_navigation', (event) => {
            event.preventDefault();
            this.onProgressTime(true);
            const url = $(event.currentTarget).attr('href');
            this.change_page(url);
        });
    }

    filterInit() {
        if (!this.hasAjax) return false;
        $(`#${this.filter_id}`).on('submit', (event) => {
            event.preventDefault();
            this.filter_inputs_state(true);
            this.onProgressTime(true);
            this.filter();
        });
    }

    setContainer(container) {
        this.container = container;
    }

    setPaginateParams(fetch_url, content = 'table_data') {
        this.content = `#${content}`;
        this.fetch_url = fetch_url;
    }

    setPaginateScripts(scripts) {
        this.paginate_scripts = scripts;
    }

    setFilter(form_filter, btn_filter) {
        this.form_filter = form_filter;
        this.btn_filter = btn_filter;
    }

    setFilterInputs(filter_inputs) {
        this.add_filter_inputs(filter_inputs);
    }

    ajax(status) {
        console.log(`El ajax ha sido desactivado: ${status}`);
        this.hasAjax = status;
    }

    filter() {
        const query = this.filter_query($(`form#${this.filter_id} :input`));
        $.ajax({
            url: this.fetch_url,
            data: query,
            success: (data) => {
                $(this.content).html(data);
                history.pushState(null, '', this.params_string(query));
                this.onProgressTime(false);
                this.filter_inputs_state(false);
                this.paginate_scripts();
            }
        });
    }

    filter_query(form) {
        const query = {};
        form.each((index, value) => {
            const input = $(value);
            const key = input.attr('id');
            if (key !== this.btn_filter) {
                const inputValue = input.val();
                if (key !== undefined) {
                    if (Array.isArray(inputValue)) {
                        inputValue.forEach((val, index) => {
                            query[`${key}[${index}]`] = val;
                        });
                    } else {
                        query[key] = inputValue;
                    }
                }
            }
        });
        return query;
    }

    fetch_data(params, page) {
        const query = this.get_params(params, page);
        $.ajax({
            url: this.fetch_url,
            data: query,
            success: (data) => {
                $(this.content).html(data);
                history.pushState(null, '', this.params_string(query));
                this.onProgressTime(false);
                this.filter_inputs_state(false);
                this.paginate_scripts();
            }
        });
    }

    get_params(params, page) {
        if (params === '') return { page };
        const obj_params = {};
        params.substr(1).split('&').forEach((value) => {
            const [key, val] = value.split('=');
            obj_params[key] = key === 'page' ? page : val;
        });
        if (obj_params.page === undefined) obj_params.page = page;
        return obj_params;
    }

    params_string(query) {
        return '?' + Object.entries(query).map(([key, val]) => `${key}=${val}`).join('&');
    }

    async confirmDelete(id, route, text = false) {
        const result = await Swal.fire({
            title: "¿Estás seguro?",
            text: text ? "Escribe la palabra BORRAR (en mayúsculas) para eliminar el registro permanentemente." : "Este registro se eliminará permanentemente.",
            icon: "warning",
            showCancelButton: true,
            cancelButtonText: "Cancelar",
            confirmButtonColor: "#DD6B55",
            confirmButtonText: "Sí. Eliminar.",
            input: text ? 'text' : null,
            showLoaderOnConfirm: true,
            preConfirm: (inputValue) => {
                if (text && inputValue !== 'BORRAR') {
                    Swal.showValidationMessage('Palabra incorrecta.');
                }
            }
        });
        if (result.value === 'BORRAR' || result.value === true) {
            this.deleteItem(id, route);
        } else if (text) {
            Swal.showValidationMessage('Palabra incorrecta.');
        }
    }

    deleteItem(id, route) {
        Swal.fire({
            title: "Enviado...",
            text: "Espere porfavor",
            showConfirmButton: false,
            allowOutsideClick: false
        });

        $.ajax({
            headers: {
                'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
            },
            method: "DELETE",
            url: route,
            success: (data) => {
                if (data.success === true) {
                    this.onProgressTime(true);
                    const params = window.location.search;
                    const page = params.split('page=')[1] || 1;
                    this.fetch_data(params, page);
                    Swal.fire({ title: "Eliminado", text: data.message, icon: "success" });
                } else {
                    Swal.fire({ title: "Error", text: data.message, icon: "error" });
                }
            },
            error: (data) => {
                $.each(data.responseJSON.errors, (key, value) => {
                    console.log(value);
                });
            }
        });
    }

    filter_inputs_state(status) {
        $(`#${this.btn_filter}`).attr('disabled', status);
        this.filter_inputs.forEach((input) => {
            input.attr('disabled', status);
        });
    }

    add_filter_inputs(inputs) {
        inputs.forEach((value) => {
            this.filter_inputs.push($(`#${value}`));
        });
    }


    /**
     * Cambia la pagina via ajax.
     * @param url
     */

    change_page(url, el = null)
    {
        $.get(url, {
            ajax: 1
        }, (response) => {
            if(el !== null)
                el.addClass('active');
            $('#main_content').html(response.content);
            $('#content_title').html(response.content_title);
            history.pushState(null, '', url);
            document.title = response.title;
            $('#custom_navigation a').parent().removeClass('disabled');
            this.onProgress = false;
            this.onProgressTime(false);
        })
            .fail((jqXHR, textStatus, errorThrown) => {
                if (jqXHR.status === 401) {
                    window.location.href = '/auth/login';
                } else {


                    if(el !== null)
                        el.removeClass('active');
                    this.onProgress = false;
                    this.onProgressTime(false);
                    $('#custom_navigation a').parent().removeClass('disabled');

                    var html = '<div class="h-alt-hf d-flex flex-column align-items-center justify-content-center text-center">' +
                        '<h1 class="page-error color-fusion-500">' +
                        'ERROR <span class="text-gradient">'+jqXHR.status+'</span>' +
                        '<small class="fw-500">' + errorThrown + '</small>' +
                        '</h1>' +
                        '<h3 class="fw-500 mb-5"><a href="/">Volver al inicio</a></h3>';

                    $('#main_content').html(html);
                    $('#content_title').html('');
                }
            });
    }

    onProgressTime(status) {
        if (this.container !== null) {
            this.container.onProgressTime(status);
        }
        console.log('Cargando...');
        console.log(status);
    }
}