const tours = {"ozmap-create":[{"order":"0","element":"","noMask":"X","eventToStart":"onShow","title":"Aprenda a criar","message":"Assista o tutorial abaixo.\n</br>\n</br>\n\n<br>\n<iframe width=\"640\" height=\"360\" src=\"https://www.youtube.com/embed/FlxevM_T5j0\" title=\"Primeiro Projeto | OZmap\" frameborder=\"0\" allow=\"accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture; web-share\" allowfullscreen></iframe>\n</br>\n","nextButton":"Avançar","backButton":"","noFinilizeButton":"x","clickToNext":"x"},{"order":"1","element":"TOOLTIP_EXPAND_NETWORK","noMask":"X","eventToStart":"onClick","title":"Comece por aqui!","message":"Clique aqui para adicionar seus primeiros elementos","nextButton":"","backButton":"Voltar","noFinilizeButton":"","clickToNext":"x"}],"ozmap-import-wizard":[{"order":"0","element":"TOOLTIP_IMPORT_DATA ","noMask":"x","eventToStart":"","title":"Menu de importações","message":"Clique aqui para abrir o menu de importações","nextButton":"","backButton":"","noFinilizeButton":"","clickToNext":"X"},{"order":"1","element":"IMPORT_KML","noMask":"x","eventToStart":"","title":"Importe um KML","message":"Clique aqui e abra o wizard de importação de kml ","nextButton":"","backButton":"","noFinilizeButton":"","clickToNext":"X"}],"portal":[{},{},{},{},{},{},{},{},{},{},{},{},{},{},{},{},{},{},{},{},{},{},{},{},{},{},{},{},{"order":"","element":"","noMask":"","eventToStart":"","title":"","message":"☓ "}],"ozmap-welcome":[{"order":"0","element":"TOOLTIP_EXPAND_NETWORK","detachElement":"x","noMask":"x","eventToStart":"onShow","title":"Bem vindo ao OZmap!","message":"Vamos lhe guiar pelos primeiros passos dentro da plataforma.","nextButton":"Começar"},{"order":"1","element":"TOOLTIP_EXPAND_NETWORK","detachElement":"x","noMask":"x","eventToStart":"onShow","title":"Chat disponível","message":"Caso tenha dúvidas sobre a utilização do sistema fique à vontade para  </br>\nnos chamar no chat no canto inferior direito, clicando no ícone.\n</br>\n<div style=\"padding:25px;display:flex;justify-content:center;\">\n<img src=\"https://i.imgur.com/NunZSnh.png\" alt=\"freshchat\" width=\"81\" height=\"65\">\n</div>","nextButton":"Próximo"},{"order":"2","element":"TOOLTIP_EXPAND_NETWORK","detachElement":"x","noMask":"x","eventToStart":"onShow","title":"Por onde você quer começar?","message":"Você pode optar por fazer a importação dos seus elementos ou </br> aprender a criar manualmente.\n</br>\n</br>\n<button style=\"background:Green\" class=\"shepherd-button\" onClick=\"goToStep('ozmap-import-wizard',0,'ozmap-welcome');\" >Importar</button>\n<button style=\"background:Green\" class=\"shepherd-button\" onClick=\"goToStep('ozmap-create',0,'ozmap-welcome');\" >Manual</button>\n\n\n","nextButton":"","backButton":"Voltar","noFinilizeButton":"","clickToNext":"x"}]};
const tourObjects = {};
const wizardVariables = {
    "${LOGIN}": "Seu email",
    "${PASSWORD}": "Sua senha"
};

try {
    const cookieValue = decodeURIComponent(getCookieValue("OZDemoData"));
    const OZDemoData = JSON.parse(cookieValue);

    wizardVariables["${LOGIN}"] = OZDemoData.user || wizardVariables["${LOGIN}"];
    wizardVariables["${PASSWORD}"] = OZDemoData.pass || wizardVariables["${PASSWORD}"];
} catch (e) { }

function waitForVisibleCmpByLocalized(localized, timeout = 30000) {

    if (timeout == 'infinity') {
        timeout = Infinity;
    }

    return new Promise((resolve, reject) => {
        var interval = setInterval(async function () {
            const cmp = await getCmpByLocalized(localized);
            if (timeout <= 0) {
                clearInterval(interval);
            }
            if (cmp && cmp.isVisible()) {
                clearInterval(interval);
                resolve(cmp);
            }
        }, 100);
    });
}

function getCookieValue(name) {
    const value = `; ${document.cookie}`;
    const parts = value.split(`; ${name}=`);
    if (parts.length === 2) return parts.pop().split(';').shift();
}

function loadAndInitShepherdJS() {
    return new Promise((resolve, reject) => {
        // Carregar o CSS
        const style = document.createElement('style');
        style.innerHTML = `
		.overAll {
			z-index: 999999 !important;
		}
		.panelwidth600 {
			max-width: 600px !important;
		}
		.shepherd-modal-is-visible {
			z-index: 99999 !important;
		}
        .shepherd-element {
            max-width: fit-content !important;
        }
			
	`;
        document.head.appendChild(style);

        const shepherdCSS = document.createElement('link');
        shepherdCSS.rel = 'stylesheet';
        shepherdCSS.type = 'text/css';
        shepherdCSS.href = 'https://cdn.jsdelivr.net/npm/shepherd.js@10.0.1/dist/css/shepherd.css';
        document.head.appendChild(shepherdCSS);

        const shepherdJS = document.createElement('script');
        shepherdJS.src = 'https://cdn.jsdelivr.net/npm/shepherd.js@10.0.1/dist/js/shepherd.min.js';

        shepherdJS.onload = async function () {
            await waitForExtAndComponentMgr();

            for (const tourName in tours) {
                tourObjects[tourName] = createTour(tours[tourName]);
            }
        };

        document.body.appendChild(shepherdJS);
    });
}

function createTour(tourData) {
    let initData = tourData[0];


    const tour = new Shepherd.Tour({
        useModalOverlay: true,
        defaultStepOptions: {
            classes: 'shadow-md bg-purple-dark',
            scrollTo: true,
            cancelIcon: {
                enabled: true
            }
        }
    });

    for (const row of tourData) {
        createStep(row, tour);
    }

    switch (initData.eventToStart) {
        case 'onShow':
            eventOnShow(initData, tour);
            break;
        case 'onClick':
            eventOnClick(initData, tour);
            break;
        case 'onTime':
            eventOnTime(initData, tour);
            break;
    }

    return tour;
}

function createStep(data, tour) {

    const buttons = [];

    if (data.backButton) {
        buttons.push({
            text: data.backButton,
            action: tour.back
        });
    }

    if (data.nextButton) {
        buttons.push({
            text: data.nextButton,
            action: tour.next
        });
    }

    for (const v in wizardVariables) {
        if (data.title) {
            data.title = data.title.replaceAll(v, wizardVariables[v]);
        }

        if (data.message) {
            data.message = data.message.replaceAll(v, wizardVariables[v]);
        }
    }

    const step = {
        id: data.order,
        title: data.title,
        text: data.message,
        classes: 'overAll',
        buttons
    };

    if (data.element && !data.detachElement) {
        step.attachTo = {
            element: function () {
                let cmp = getCmpByLocalized(data.element);

                if (data.clickToNext) {
                    cmp.mon(cmp, 'click', async () => {
                        tour.next();
                    }, null, { delay: 150, single: true });
                }

                return cmp.el.dom;
            },
            on: 'right-start'
        };
    }

    tour.addStep(step);
}

function goToStep(tourName, step, currentTourName) {

    if (currentTourName) {
        tourObjects[currentTourName].hide();
    }

    step = `${step}`;

    if (!tourObjects[tourName]) {
        return alert(`Tour não encontrado ${tourName}`);
    }

    if (!tourObjects[tourName].getById(step)) {
        return alert(`Step não encontrado ${tourName} - ${step}`);
    }

    tourObjects[tourName].show(step);
}

function eventOnShow(data, tour) {
    waitForVisibleCmpByLocalized(data.element, data.timeout).then(result => {
        tour.start();
    });
}

function eventOnClick(tourData) {

}

function eventOnTime(tourData) {

}

// Chame a função para carregar e inicializar a biblioteca
loadAndInitShepherdJS();

async function propagandas() {
    const cmpImport = await waitForCmpByLocalized('TOOLTIP_IMPORT_DATA', 10000, true);
    const propaganda = new Shepherd.Tour({
        useModalOverlay: true,
        defaultStepOptions: {
            classes: 'shadow-md bg-purple-dark',
            scrollTo: true
        }
    });



    propaganda.addSteps([
        {
            id: 'propaganda_import',
            title: "Vamos importar coisas ao mapa",
            text: `<div>
			  Para importar coisas no OZmap você precisa estar rodando em uma instancia propria. <br/>
			  <iframe width="580px" height="400px" style="border: none" src="https://nr-test.ozmap.com.br/trial/form"></iframe>
		  </div>`,
            classes: 'overAll panelwidth600',
            attachTo: {
                element: function () {
                    let cmp = getCmpByLocalized('TOOLTIP_IMPORT_DATA');
                    return cmp.el.dom;
                },
                on: 'right-start'
            },
            buttons: [
                {
                    text: 'Finalizar',
                    action: propaganda.cancel
                }
            ]
        }]);

    cmpImport.on('click', () => {
        propaganda.start();
    })
}