script.js

const runButton = document.getElementById('run-button');
const outputConsole = document.getElementById('output');
const runConsole = document.getElementById('run-console');
const customCons = document.getElementById('customConsole');
const clearAllButton = document.getElementById('clearAll');

//Editor Control Code
var editor = CodeMirror.fromTextArea(document.getElementById("my-textarea"), {
    mode: "javascript",
    theme: "dracula",
    lineNumbers: true,
    autoCloseBrackets: true,
    matchBrackets: true,
    extraKeys: {
        "Ctrl-Space": "autocomplete"
    },
    indentWithTabs: true, // Use tabs for indentation
    indentUnit: 4, // Set the number of spaces per tab
});



///////////////////////Resizing Editor
const resizingButton = document.getElementById("panelResize");
const body = document.getElementsByTagName("body");
const toolbar = document.querySelector(".toolbar");
const navbar = document.querySelector(".navbar");
const motherContainer = document.querySelector(".mainCointainer");
const icon = document.querySelector("#editorResizeing i");
const fullpanel = document.getElementById("editorPanel");
const subPannel = document.getElementById("subPanel");
const outputContainer = document.querySelector(".output-container");
const minimizeBtn = document.getElementById("miniDiv");

let isMaximized = false;

resizingButton.addEventListener("click", function() {
    // Toggle between maximizing and minimizing the container
    if (!isMaximized) {
        // Maximize the container
        motherContainer.style.width = "100vw";
        motherContainer.style.height = "100%";
        motherContainer.style.overflow = "hidden";
        minimizeBtn.style.display = "block";
        // body.style.margin = "0";
        outputContainer.style.height = "95vh";
        subPannel.style.height = "100%";
        fullpanel.style.height = "95vh";
        navbar.style.display = "none";
        toolbar.style.display = "none";
        resizingButton.textContent = "Min";
    } else {
        // Minimize the container to its original size
        motherContainer.style.width = "95%";
        motherContainer.style.height = "100%";
        minimizeBtn.style.display = "none";
    }
    isMaximized = !isMaximized;
});

//Minimize Button Script
let isMinimized = false;

minimizeBtn.addEventListener("click", function() {
    // Toggle between maximizing and minimizing the container
    if (!isMinimized) {
        // Minimize the container to its original size
        motherContainer.style.width = "100%";
        motherContainer.style.height = "100%";
        motherContainer.style.overflow = "visible";
        minimizeBtn.style.display = "none";
        fullpanel.style.height = "80vh";
        subPannel.style.height = "80vh";
        outputContainer.style.height = "80vh";
        navbar.style.display = "block";
        toolbar.style.display = "block";
        resizingButton.textContent = "Max";
    } else {
        minimizeBtn.style.display = "block";
    }
    isMinimized = !isMinimized;
});


//Reload buton script 
document.querySelector("#loadButton").addEventListener("click", () => {
    location.reload();
});

//Wrap Unwarp Script
document.getElementById("wrapUnwrap").addEventListener("click", function() {

});

// Tool Bar All Script Start
// Upload JS File Script
const uploadJS = document.querySelector("#uploadFile");

uploadJS.addEventListener("change", function() {
    const file = this.files[0];

    if (file) {
        // Read the contents of the uploaded file
        const reader = new FileReader();

        reader.onload = function(e) {
            // Set the contents of the CodeMirror editor to the file's content
            editor.setValue(e.target.result);
        };

        reader.readAsText(file);
    }
});

//Wrap Editor
const wrapUnwrapButton = document.getElementById("wrapUnwrap");
let isWrapped = false;

wrapUnwrapButton.addEventListener("click", function() {
    isWrapped = !isWrapped; // Toggle the state
    editor.setOption("lineWrapping", isWrapped);
    wrapUnwrapButton.textContent = isWrapped ? "Unwrap" : "Wrap";
});

//Download JS File Script

document.getElementById('downloadCode').addEventListener('click', function() {
    // Get the content of the CodeMirror editor
    var codeContent = editor.getValue();

    if (codeContent.trim() === '') {
        alert('Textarea is empty. Please enter some code.');
        return;
    }

    // Create a Blob (Binary Large Object) from the code content
    var blob = new Blob([codeContent], { type: 'application/javascript' });

    // Create a download link
    var downloadLink = document.createElement('a');
    downloadLink.href = window.URL.createObjectURL(blob);

    // Prompt the user for the file name
    var fileName = prompt('Enter file name:', 'script.js');

    if (fileName) {
        // Set the download attribute and file name
        downloadLink.download = fileName;

        // Simulate a click on the download link to trigger the download
        downloadLink.click();
    }
});


// Run Code Script
// document.addEventListener("DOMContentLoaded", function() {

runButton.addEventListener('click', function() {
    var codeContent = editor.getValue();
    var outputIframe = document.getElementById('output');
    var iframeDoc = outputIframe.contentDocument || outputIframe.contentWindow.document;

    // Clear the iframe's document content
    iframeDoc.open();
    iframeDoc.write('');
    iframeDoc.close();

    try {
        iframeDoc.open();
        iframeDoc.write(`
            <html>
                <head>
                    <style>
                        body {
                            color: #ffffff;
                        }
                    </style>
                </head>
                <body>

                    <script>${codeContent}</script>
                </body>
            </html>
        `);
        iframeDoc.close();
        console.log('Code executed successfully.');
    } catch (error) {
        alert('Error: ' + error.message);
    }
});

const reloadIframe = function() {
    var codeContent = editor.getValue();
    var outputIframe = document.getElementById('output');

    // Generate a random query parameter to force iframe reload
    var timestamp = Date.now();

    // Set the iframe src with the timestamp as a query parameter
    outputIframe.src = 'about:blank?' + timestamp;

    outputIframe.onload = function() {
        // Execute the code within the iframe's JavaScript context
        var iframeWindow = outputIframe.contentWindow;
        iframeWindow.eval(codeContent);
    };
}
runButton.addEventListener('click', reloadIframe);
// });

// document.addEventListener("DOMContentLoaded", function() {
// Your code here

//Run console Script

runConsole.addEventListener('click', function() {
    // Clear the custom console before running code
    customCons.innerHTML = ' ';

    // Store the original console functions for later use
    const originalConsoleLog = console.log;
    const originalConsoleError = console.error;
    const originalConsoleWarn = console.warn;
    const originalDocumentWrite = document.write; // Store the original document.write

    // Override console functions to redirect output
    console.log = function() {
        const args = Array.from(arguments).join(' ');
        customCons.innerHTML += `<p class="log">${args}</p>`;
        originalConsoleLog.apply(console, arguments);
    };

    console.error = function() {
        const args = Array.from(arguments).join(' ');
        customCons.innerHTML += `<p class="error">${args}</p>`;
        originalConsoleError.apply(console, arguments);
    };

    console.warn = function() {
        const args = Array.from(arguments).join(' ');
        customCons.innerHTML += `<p class="warn">${args}</p>`;
        originalConsoleWarn.apply(console, arguments);
    };

    // Override document.write to prevent it from replacing the entire document
    document.write = function() {
        // Handle the write function as needed, or simply ignore it
        console.warn('document.write is disabled within the code.');
    };

    // Get the code from the editor and execute it
    const codeToExecute = editor.getValue();
    try {
        // Use eval or a safer alternative to execute the code here
        // Example with eval (not recommended for untrusted code)
        eval(codeToExecute);
    } catch (error) {
        console.error(`Error: ${error}`);
    }

    // Restore the original console functions and document.write
    console.log = originalConsoleLog;
    console.error = originalConsoleError;
    console.warn = originalConsoleWarn;
    document.write = originalDocumentWrite;
});
// });


//Copy Code Script
document.getElementById('copyit').addEventListener('click', function() {
    // Get the content of the CodeMirror editor
    var codeContent = editor.getValue();

    if (codeContent.trim() === '') {
        alert('Textarea is empty. Please enter some code.');
        return;
    }

    // Copy Editor Code
    var textarea = document.createElement('textarea');
    textarea.value = codeContent;
    document.body.appendChild(textarea);

    // Select the text in the textarea
    textarea.select();

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

    // Remove the temporary textarea
    document.body.removeChild(textarea);

    // Provide feedback to the user
    alert('Code copied to clipboard');
});




//Clear All Button Script
clearAllButton.addEventListener('click', function() {
    editor.setValue('');
    customCons.innerHTML = '';
    // Clear the output iframe by reloading it with an empty source
    setTimeout(reloadIframe, 500)
});

///////////Insart the Object Boiler plate
const objectBoilerButton = document.getElementById('objectBoiler');

objectBoilerButton.addEventListener('click', function() {
    const codeToInsert = `
// Please input the object variable in ()
// This is not allowed to execute objects directly
// Thanks for compromising with us
let jsonString = JSON.stringify();
document.write(jsonString);
console.log(jsonString);`;

    // Get the current cursor position
    const cursor = editor.getCursor();

    // Insert the code at the cursor position
    editor.replaceRange(codeToInsert, cursor);

    // Move the cursor to the end of the inserted code
    cursor.ch += codeToInsert.length;
    editor.setCursor(cursor);
});

///////Font size changenger
const fontSizeSelect = document.getElementById('fontSizeSelect');

fontSizeSelect.addEventListener('change', function() {
    const selectedFontSize = fontSizeSelect.value;
    editor.getWrapperElement().style.fontSize = selectedFontSize + 'px';

    // Save the selected font size to localStorage or a cookie for persistence
    localStorage.setItem('selectedFontSize', selectedFontSize);
});

// Load the selected font size from localStorage if available
const savedFontSize = localStorage.getItem('selectedFontSize');

if (savedFontSize) {
    fontSizeSelect.value = savedFontSize;
    // Trigger the change event to apply the saved font size
    fontSizeSelect.dispatchEvent(new Event('change'));
}

///////////////Change Fonts 
const fontFamilySelect = document.getElementById('fontFamilySelect');

// Assuming you already have an initialized CodeMirror editor
// The 'editor' variable should be defined and initialized before this code.
fontFamilySelect.addEventListener('change', function() {
    const selectedFontFamily = fontFamilySelect.value;
    editor.getWrapperElement().style.fontFamily = selectedFontFamily;

    // Save the selected font family to localStorage or a cookie for persistence
    localStorage.setItem('selectedFontFamily', selectedFontFamily);
});

// Load the selected font family from localStorage if available
const savedFontFamily = localStorage.getItem('selectedFontFamily');

if (savedFontFamily) {
    fontFamilySelect.value = savedFontFamily;
    // Trigger the change event to apply the saved font family
    fontFamilySelect.dispatchEvent(new Event('change'));
}

////////////////////////////////////////////////////////////////////////////////////////////////
//Advance Option JS Script
const toggleButton = document.getElementById('radyCode');
const hiddenDiv = document.getElementById('hiddenDiv');
toggleButton.addEventListener('click', function() {
    // Toggle the visibility of the hiddenDiv
    if (hiddenDiv.style.display === 'none') {
        hiddenDiv.style.display = 'block';
    } else {
        hiddenDiv.style.display = 'none';
    }
});

// Select all <li> elements within elements with class 'codeTemplates'
const codeTemplates = document.querySelectorAll('.codeTemplates li');

codeTemplates.forEach(function(li) {
    li.addEventListener('click', function(e) {
        const selectedCode = e.target.getAttribute('data-code');
        if (selectedCode) {
            // Remove unnecessary whitespace from the selected code
            const trimmedCode = selectedCode.trim();

            // Get the current cursor position
            const cursor = editor.getCursor();

            // Insert the trimmed code at the cursor position
            editor.replaceRange(trimmedCode, cursor);

            // Hide the #hiddenDiv
            hiddenDiv.style.display = 'none';
        }
    });
});


//Shortcut Script

const shortcutBrowser = document.getElementById("browserShortcut");
const shortcutWizard = document.getElementsByClassName("hiddenWizard")[0]; // Use [0] to get the first element with the class
const shortcutWizardClose = document.getElementById("closeShortcut");

shortcutBrowser.addEventListener("click", function() {
    shortcutWizard.style.display = "block";
});

shortcutWizardClose.addEventListener("click", function() {
    shortcutWizard.style.display = "none";
});