const input = document.getElementById('input');
const result = document.getElementById('result');
const convert = document.getElementById('convert');
const copy = document.getElementById('copy');

function convertJQueryToVanillaJS(jqueryCode) {
    const conversions = {
        // Document Ready
        '\\$\\(document\\)\\.ready\\(function\\(\\)': 'document.addEventListener("DOMContentLoaded", function() {',
        '\\$\\(function\\(\\)': 'document.addEventListener("DOMContentLoaded", function() {',

        // Window Events
        '\\$\\(window\\)\\.resize\\(function\\(\\)': 'window.addEventListener("resize", function() {',
        '\\$\\(window\\)\\.scroll\\(function\\(\\)': 'window.addEventListener("scroll", function() {',
        '\\$\\(window\\)\\.scrollTop\\(\\)': 'window.scrollY',

        // Basic Selectors
        '\\$\\((\'|")([^\'"]+)(\'|")\\)': 'document.querySelector("$2")',
        '\\$\\((\'|")([^\'"]+)(\'|"),\\s*(\'|")([^\'"]+)(\'|")\\)': 'document.querySelectorAll("$2, $5")',

        // Event Handlers
        '\\)\\.click\\(function\\(\\)': ').addEventListener("click", function() {',
        '\\)\\.dblclick\\(function\\(\\)': ').addEventListener("dblclick", function() {',
        '\\)\\.on\\("click", function\\(\\)': ').addEventListener("click", function() {',
        '\\)\\.on\\("dblclick", function\\(\\)': ').addEventListener("dblclick", function() {',
        '\\)\\.on\\("submit", function\\(\\)': ').addEventListener("submit", function() {',
        '\\)\\.on\\("change", function\\(\\)': ').addEventListener("change", function() {',
        '\\)\\.on\\("input", function\\(\\)': ').addEventListener("input", function() {',
        '\\)\\.on\\("focus", function\\(\\)': ').addEventListener("focus", function() {',
        '\\)\\.on\\("blur", function\\(\\)': ').addEventListener("blur", function() {',
        '\\)\\.on\\("keydown", function\\(\\)': ').addEventListener("keydown", function() {',
        '\\)\\.on\\("keyup", function\\(\\)': ').addEventListener("keyup", function() {',
        '\\)\\.on\\("mouseenter", function\\(\\)': ').addEventListener("mouseenter", function() {',
        '\\)\\.on\\("mouseleave", function\\(\\)': ').addEventListener("mouseleave", function() {',

        // Effects
        '\\)\\.hide\\(\\)': ').style.display = "none";',
        '\\)\\.show\\(\\)': ').style.display = "block";',
        '\\)\\.toggle\\(\\)': ').style.display = (getComputedStyle(el).display === "none" ? "block" : "none");',
        '\\)\\.fadeIn\\(([^)]*)\\)': ').style.transition = "opacity $1"; el.style.opacity = "1";',
        '\\)\\.fadeOut\\(([^)]*)\\)': ').style.transition = "opacity $1"; el.style.opacity = "0";',
        '\\)\\.slideDown\\(([^)]*)\\)': ').style.transition = "height $1"; el.style.height = "auto";',
        '\\)\\.slideUp\\(([^)]*)\\)': ').style.transition = "height $1"; el.style.height = "0";',
        '\\)\\.slideToggle\\(([^)]*)\\)': ').style.height = (getComputedStyle(el).height === "0px" ? "auto" : "0");',

        // CSS
        '\\)\\.css\\((\'|")([^,]+)(\'|"),\\s*(\'|")([^\'"]+)(\'|")\\)': ').style.$2 = "$5";',
        '\\)\\.css\\((\'|")([^\'"]+)(\'|")\\)': ').style.$2',

        // Attributes
        '\\)\\.attr\\((\'|")([^,]+)(\'|"),\\s*(\'|")([^\'"]+)(\'|")\\)': ').setAttribute("$2", "$5");',
        '\\)\\.attr\\((\'|")([^\'"]+)(\'|")\\)': ').getAttribute("$2")',
        '\\)\\.removeAttr\\((\'|")([^\'"]+)(\'|")\\)': ').removeAttribute("$2");',

        // HTML/DOM Manipulation
        '\\)\\.html\\((\'|")([^\'"]+)(\'|")\\)': ').innerHTML = "$2";',
        '\\)\\.text\\((\'|")([^\'"]+)(\'|")\\)': ').innerText = "$2";',
        '\\)\\.val\\((\'|")([^\'"]+)(\'|")\\)': ').value = "$2";',
        '\\)\\.append\\((\'|")([^\'"]+)(\'|")\\)': ').insertAdjacentHTML("beforeend", "$2");',
        '\\)\\.prepend\\((\'|")([^\'"]+)(\'|")\\)': ').insertAdjacentHTML("afterbegin", "$2");',
        '\\)\\.after\\((\'|")([^\'"]+)(\'|")\\)': ').insertAdjacentHTML("afterend", "$2");',
        '\\)\\.before\\((\'|")([^\'"]+)(\'|")\\)': ').insertAdjacentHTML("beforebegin", "$2");',
        '\\)\\.remove\\(\\)': ').remove();',
        '\\)\\.empty\\(\\)': ').innerHTML = "";',
        '\\)\\.clone\\(\\)': ').cloneNode(true);',

        // Traversing
        '\\)\\.find\\((\'|")([^\'"]+)(\'|")\\)': ').querySelector("$2");',
        '\\)\\.parent\\(\\)': ').parentElement;',
        '\\)\\.parents\\((\'|")([^\'"]+)(\'|")\\)': '.closest("$2");',
        '\\)\\.children\\(\\)': ').children;',
        '\\)\\.next\\(\\)': ').nextElementSibling;',
        '\\)\\.prev\\(\\)': ').previousElementSibling;',
        '\\)\\.siblings\\(\\)': ').parentNode.children;',
        '\\)\\.closest\\((\'|")([^\'"]+)(\'|")\\)': '.closest("$2");',

        // Classes
        '\\)\\.addClass\\((\'|")([^\'"]+)(\'|")\\)': ').classList.add("$2");',
        '\\)\\.removeClass\\((\'|")([^\'"]+)(\'|")\\)': ').classList.remove("$2");',
        '\\)\\.toggleClass\\((\'|")([^\'"]+)(\'|")\\)': ').classList.toggle("$2");',
        '\\)\\.hasClass\\((\'|")([^\'"]+)(\'|")\\)': ').classList.contains("$2");',
        
        // Dimensions
        '\\)\\.width\\(\\)': ').style.width;',
        '\\)\\.height\\(\\)': ').style.height;',
        '\\)\\.innerWidth\\(\\)': ').clientWidth;',
        '\\)\\.innerHeight\\(\\)': ').clientHeight;',
        '\\)\\.outerWidth\\(\\)': ').offsetWidth;',
        '\\)\\.outerHeight\\(\\)': ').offsetHeight;',
        
        // Utility
        '\\$\\.each\\(([^,]+),\\s*function\\(([^,]*),\\s*([^\\)]*)\\)\\s*{': '$1.forEach(function($2, $3) {',
        '\\$\\.ajax\\(\\{url:\\s*(\'|")([^\'"]+)(\'|"),\\s*type:\\s*(\'|")([^\'"]+)(\'|"),\\s*data:\\s*([^,]+),\\s*success:\\s*function\\(([^\\)]*)\\)\\s*{': 
            'fetch("$2", {method: "$5", body: $7}).then(response => response.json()).then($8 => {',
        '\\$\\.get\\((\'|")([^\'"]+)(\'|"),\\s*function\\(([^\\)]*)\\)': 'fetch($2).then(response => response.json()).then($4 => {',
        '\\$\\.post\\((\'|")([^\'"]+)(\'|"),\\s*([^,]+),\\s*function\\(([^\\)]*)\\)': 'fetch($2, {method: "POST", body: $4}).then(response => response.json()).then($5 => {',
        '\\$\\.getJSON\\((\'|")([^\'"]+)(\'|"),\\s*function\\(([^\\)]*)\\)': 'fetch($2).then(response => response.json()).then($4 => {'
    };

    let vanillaJSCode = jqueryCode;

    for (const [jqueryMethod, vanillaMethod] of Object.entries(conversions)) {
        const regex = new RegExp(jqueryMethod, 'g');
        vanillaJSCode = vanillaJSCode.replace(regex, vanillaMethod);
    }

    // Post-conversion checks to fix syntax issues
    vanillaJSCode = vanillaJSCode
        .replace(/;\s*else\s*\{/g, ' else {') // Remove semicolon before else statement
        .replace(/;;/g, ';') // Remove double semicolons
        .replace(/\}\);\s*;/g, '});'); // Remove unnecessary semicolon before closing parenthesis


    return vanillaJSCode;
}


convert.addEventListener('click', function() {
  
  // Get the value of the input textarea containing the jQuery code
  let vanillaJSCode = input.value;

  // Call a hypothetical function to convert jQuery code to vanilla JavaScript
  let jqueryCode = convertJQueryToVanillaJS(vanillaJSCode);

  // Set the value of the result textarea to the converted vanilla JavaScript code
  result.value = jqueryCode;
});


copy.addEventListener("click", function() {
    
    // Select the text in the result textarea
    result.select();
    result.setSelectionRange(0, 99999); // For mobile devices

    // Copy the selected text to the clipboard
    document.execCommand("copy");

    // Change button text to "Copied!"
    copy.textContent = "Copied!";

    // Change button text back to "Copy to clipboard" after 3 seconds
    setTimeout(function() {
        copy.textContent = "Copy";
    }, 2000);

    // Deselect the text
    resultTextArea.setSelectionRange(0, 0);
});