const routersApi = {
        'local': 'http://localhost:8002',
        'staging': 'https://bubba-staging.wibodev.com',
        'prod': 'https://bubba.wibodev.com'
    };

    const routersWidget = {
        'local': 'http://localhost:4200',
        'staging': 'https://staging.d2i9c1h0zs84ip.amplifyapp.com/',
        'prod': 'https://main.d2i9c1h0zs84ip.amplifyapp.com/'
    };

    const routerApi = routersApi['staging'];

    const routerWidget = routersWidget['staging'];

    const typesWidget = {
        normal: {
            message: '¡💌 Suscríbete y descubre beneficios exclusivos! No te lo pierdas. 🎉',
            urlAnimation: 'https://lottie.host/a32e0320-fc49-4a42-ad24-a8899115a8a2/dDjcoReUj1.json',
        },
        gift: {
            message: '¡Aquí hay un regalo para ti!',
            urlAnimation: 'https://lottie.host/911286da-910f-47d0-91c2-17a2df679a94/aTH8rAzGAj.json'
        }
    };

    (function (window, document) {
        window.DaryWidgetGiftClaim = {
            open: function (credential) {
                document.addEventListener('DOMContentLoaded', async function () {
                    DaryWidgetGiftClaim.openForm(credential);
                })
            },
            openForm: function (credential) {
                
                    // Crea el contenedor para la ventana modal
                    var modalContainer = document.createElement('div');
                    modalContainer.className = 'dary-container';

                    // Estilos CSS para la ventana modal (puedes personalizarlos según tus necesidades)
                    var modalStyles = `
                    position: fixed;
                    top: 0;
                    left: 0;
                    width: 100%;
                    height: 100%;
                    background-color: rgba(0, 0, 0, 0.5);
                    display: flex;
                    justify-content: center;
                    align-items: center;
                    opacity: 0;
                    z-index: 99;
                    animation: fadeIn 0.5s ease forwards; /* Agregamos la animación de fadeIn */
                `;

                    modalContainer.style = modalStyles;

                    // Definimos la animación fadeIn utilizando @keyframes
                    var fadeInKeyframes = `
                    @keyframes fadeIn {
                        from {
                        opacity: 0;
                        }
                        to {
                        opacity: 1;
                        }
                    }
                    `;

                    var styleElement = document.createElement('style');
                    styleElement.innerHTML = fadeInKeyframes;
                    document.head.appendChild(styleElement);

                    // Crea el iframe
                    var iframe = document.createElement('iframe');
                    iframe.setAttribute('scrolling', 'no');
                    iframe.src = `${routerWidget}/users/gift-claim/${credential}`; // Reemplaza 'ruta-a-tu-pagina/modal.html' con la ruta real de tu página modal
                    iframe.className = 'dary-widget-iframe';
                    iframe.style = 'width: 420px; border: none; max-width: 90%; height: 100vh';

                    modalContainer.appendChild(iframe);

                    // Agrega el contenedor al final del documento
                    document.body.appendChild(modalContainer);

                    // Abre la ventana modal
                    modalContainer.style.display = 'flex';

                    // Comunica con el iframe para pasar la credencial
                    iframe.addEventListener('load', function () {
                        iframe.contentWindow.postMessage({ credential: credential }, '*');
                    });

                    // Cierra la ventana modal
                    function closeModal() {
                        if (modalContainer) {
                            document.body.removeChild(modalContainer);
                        }
                    }

                    // Escucha el evento del mensaje del iframe para cerrar la ventana modal
                    window.addEventListener('message', function (event) {

                        if (event.data === 'widget-close-dialog') {
                            closeModal();
                        }

                    });
                
            },
            load: (credential) => {
                document.addEventListener('DOMContentLoaded', async function () {

                    const linkInformation = await requestInformationLink(credential);

                    console.log(linkInformation)

                    const lottiePlayerScript = document.createElement('script');
                    lottiePlayerScript.src = 'https://unpkg.com/@lottiefiles/lottie-player@latest/dist/lottie-player.js';
                    document.head.appendChild(lottiePlayerScript);

                    const type = linkInformation?.settings?.has_promo ? 'gift' : 'normal';

                    const typeWidget = typesWidget[type];

                    /* crear contenerdo del widget */
                    let container = document.createElement('div');
                    container.className = 'dary-gift-container';
                    let containerStyles = `
                        position: fixed;
                        bottom: 0px;
                        right: 0px;
                        width: 100px;
                        height: 100px;
                        display: flex;
                        justify-content: center;
                        align-items: center;
                        // overflow: hidden;
                        flex-direction: column;
                        
                    `;
                    container.style = containerStyles
                    document.body.appendChild(container);

                    /* crear contenerdo de la animación widget */
                    let containerMsg = document.createElement('div');
                    containerMsg.className = 'dary-gift-message';
                    let containerMsgtyles = `
                            width: 100%;
                            height: 65px;
                            display: flex;
                            justify-content: center;
                            align-items: center;
                            cursor: pointer;
                            background: #f7f7f7;
                            position: absolute;
                            top: -55%;
                            width: ${type == 'normal' ? '300px' : '200px'} ;
                            padding: 20px;
                            left: ${type == 'normal' ? '-250%' : '-150px'} ;
                            text-align: center;
                            z-index: 2;
                            border-radius: 32px;
                            font-weight: 500;
                            color: #082A41;
                            box-shadow: rgb(226 226 226) 1px 5px 8px 0px;
                            border-bottom-right-radius: 4px;
                            font-size: 12px;
                            //  1px 5px 8px 0px #b3b1b1;
                    `;
                    containerMsg.style = containerMsgtyles


                    // Crear un elemento de texto

                    let message = document.createElement('span');

                    let mensajeTexto = document.createTextNode(typeWidget.message);

                    message.appendChild(mensajeTexto);

                    // Agregar el texto como contenido del div contenedor
                    containerMsg.appendChild(message);

                    container.appendChild(containerMsg);

                    /* crear contenerdo de la animación widget */
                    let containerLottie = document.createElement('div');
                    containerLottie.className = 'dary-gift-animation';
                    let containerLottietyles = `
                        width: 100%;
                        height: 80px;
                        display: flex;
                        justify-content: center;
                        align-items: center;
                        cursor: pointer;
                        overflow: hidden;
                    `;
                    containerLottie.style = containerLottietyles
                    container.appendChild(containerLottie);

                    /* crear  animación widget */
                    const lottiePlayerElement = document.createElement('lottie-player');
                    lottiePlayerElement.setAttribute('src', typeWidget.urlAnimation);
                    lottiePlayerElement.setAttribute('background', 'none');
                    lottiePlayerElement.setAttribute('speed', '1');
                    lottiePlayerElement.setAttribute('style', 'width: 150px; height: 150px; transform: scale(1);');
                    lottiePlayerElement.setAttribute('loop', '1');
                    lottiePlayerElement.setAttribute('autoplay', '');
                    lottiePlayerElement.setAttribute('direction', '1');
                    lottiePlayerElement.setAttribute('mode', 'bounce');
                    containerLottie.appendChild(lottiePlayerElement);

                    /* crear contenerdo del boton de cerrar*/
                    let containerActions = document.createElement('div');
                    containerActions.className = 'dary-gift-actions';
                    let containerActionstyles = `
                        display: flex;
                        justify-content: center;
                        align-items: center;
                        padding: 5px
                    `;
                    containerActions.style = containerActionstyles
                    container.appendChild(containerActions);

                    var closeButton = document.createElement('button');
                    closeButton.textContent = 'X';
                    closeButton.style.width = '20px';
                    closeButton.style.height = '20px';
                    closeButton.style.fontSize = '0.8rem';
                    closeButton.style.padding = '0px';
                    closeButton.style.borderRadius = '50%';
                    closeButton.style.backgroundColor = 'transparent';
                    closeButton.style.color = '#82909B';
                    closeButton.style.border = '2px solid #82909B';
                    closeButton.style.cursor = 'pointer';
                    closeButton.style.lineHeight = '0px';
                    containerActions.appendChild(closeButton);

                    /** Eventos  */
                    containerLottie.addEventListener('click', function () {
                        DaryWidgetGiftClaim.openForm(credential);
                        document.body.removeChild(container);
                    });

                    closeButton.addEventListener('click', function () {
                        requestApi(credential, 'close')
                        document.body.removeChild(container);
                    });

                    requestApi(credential, 'load')
                })
            }
        };


    })(window, document);


    const requestApi = (link_id, action) => {

        const url = `${routerApi}/contacts/${link_id}/${action}`

        const requestOptions = {
            method: 'POST',
            headers: {
                'Content-Type': 'application/json'
            },
            body: JSON.stringify({})
        };

        return fetch(url, requestOptions)
            .then(response => {
                if (!response.ok) {
                    return Promise.reject('Error al realizar la solicitud. Código de estado: ' + response.status);
                }
                return response.json();
            })
            .then(data => {
                console.log(data);
            })
            .catch(error => {
                console.error(error);
            });
    }

    const requestInformationLink = (link_id) => {

        const url = `${routerApi}/links/${link_id}`

        const requestOptions = {
            method: 'GET',
            headers: {
                'Content-Type': 'application/json'
            }
        };

        return fetch(url, requestOptions)
            .then(response => {
                if (!response.ok) {
                    return Promise.reject('Error al realizar la solicitud. Código de estado: ' + response.status);
                }
                return response.json();
            })
            .catch(error => {
                console.error(error);
            });
    }