// Add CSS style to HTML head 
const style = document.createElement('style');
style.textContent = `
    #research-plugin {
        padding: 0;
        background-color: #fffdf3;
        font-size: 17px;
        font-weight: 500;
        border-radius: 0px 5px 5px 0px;
        max-width: 360px;
        -webkit-box-shadow: 3px 3px 16px 0px rgba(0,0,0,0.2);
        -moz-box-shadow: 3px 3px 16px 0px rgba(0,0,0,0.2);
        box-shadow: 3px 3px 16px 0px rgba(0,0,0,0.2);
        display: flex;
        position: fixed; 
        left: 0; 
        top: 50%; 
    }
    #research-plugin-main {
        padding: 5px 5px 8px 8px;
    }
    #research-plugin form {
        font-size: 17px;
        margin-bottom: 0;
    }
    #research-plugin #research-plugin-sidebar {
        background-color: #1C2363;
        border-radius: 0px 5px 5px 0px;
        padding-left: 1px;
        padding-right: 2px;
    }
    #research-plugin #research-plugin-sidebar:hover {
        cursor: pointer;
        filter: brightness(1.4);
    }
    #research-plugin #research-plugin-sidebar #open-close-icon {
        font-size: 15px;
    }
    #research-plugin #research-plugin-sidebar #open-close-icon svg {
        margin-left: 2px;
        margin-right: 2px;
    }
`;
document.head.appendChild(style);


// create researchPlugin div 
const researchPlugin = document.createElement('div');
researchPlugin.id = 'research-plugin';


// Add content to research-plugin div 
const researchPluginContent = `
    <div id="research-plugin-main">
        Vota para definir el siguiente curso de Deztaca: 
        <form id="research-box">
            <input type="hidden" name="_token" value="28JjJHTTeBc9AkzaPzHW5AXDGFNCXxXksQzUIgig" autocomplete="off">            <input type="radio" class="selection-class" name="selection-name" id="macros-id" value="macros" onclick="handleResearchSelection()">
            <label for="macros-id">Macros en Excel</label>
            <br />
            <input type="radio" class="selection-class" name="selection-name" id="dax-id" value="dax" onclick="handleResearchSelection()">
            <label for="dax-id">DAX</label>
            <br />
            <input type="radio" class="selection-class" name="selection-name" id="powerquery-id" value="powerquery" onclick="handleResearchSelection()">
            <label for="powerquery-id">Power Query</label>
        </form>
    </div>
    <div id="research-plugin-sidebar" onclick="openCloseResearchPlugin()" style="display:flex; align-items:center;">
        <div id="open-close-icon">
        </div>
    </div>
`;
researchPlugin.innerHTML = researchPluginContent;


// Set svg icon 
const closeIcon = `
    <svg fill="#F2EFEA" height="10px" width="10px" version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 512.003 512.003" xml:space="preserve">
        <g>
            <g>
                <path d="M351.539,256.002l159.07-242.79c2.108-3.226,1.8-7.467-0.76-10.351c-2.568-2.867-6.741-3.686-10.197-1.963L4.719,248.364
                    C1.826,249.815,0,252.767,0,256.002s1.826,6.187,4.719,7.637l494.933,247.467c1.22,0.606,2.526,0.896,3.814,0.896
                    c2.381,0,4.719-0.998,6.383-2.859c2.56-2.884,2.867-7.125,0.76-10.351L351.539,256.002z"/>
            </g>
        </g>
    </svg>
`;
researchPlugin.querySelector('#open-close-icon').innerHTML = closeIcon;


// Define functions to handle form submission
function handleResearchSelection(e) {
    let dataValue = {
        selectedValue: $('.selection-class:checked').val()
    };
    $.ajax({
        type: 'POST',
        url: "https://www.researchplugins.com/researchjspost",
        data: dataValue,
        success: function(data) {
            researchPlugin.querySelector('#research-plugin-main').innerHTML = data;
        },
        error: function(data) {
            researchPlugin.querySelector('#research-plugin-main').innerHTML = 'Hubo un error al registrar tu respuesta. Por favor, intenta de nuevo.<br />Si el error continua, mándanos un correo a hola@deztaca.com';
        }
    });
}


// Add researchPlugin div to DOM
document.body.appendChild(researchPlugin);

// Set researchPlugin div height
let researchPluginDivHeight = researchPlugin.querySelector('#research-plugin-main').clientHeight;
researchPlugin.querySelector('#research-plugin-sidebar').style.height = researchPluginDivHeight + 'px';


// Handle open and close researchPlugin div
let isClosed = false;
function openCloseResearchPlugin() {
    if (isClosed) {
        researchPlugin.querySelector('#research-plugin-main').style.display = '';
        researchPlugin.querySelector('#open-close-icon').innerHTML = closeIcon;
        isClosed = false;
    } else {
        researchPlugin.querySelector('#research-plugin-main').style.display = 'none';
        researchPlugin.querySelector('#open-close-icon').innerHTML = '👋';
        isClosed = true;
    }
}