<!DOCTYPE html>

<html lang="en" xmlns="http://www.w3.org/1999/xhtml">

<head>
    <style type="text/css">
        :root {
            --url: url("");
        }

        html, body {
            height: 100%;
            width: 100%;
            margin: 0;
            padding: 0;
            overflow: hidden;
            background-color: rgb(10, 10, 10);
        }

        #container {
            height: calc(100% - 30px);
            width: 100%;
            margin-top: 30px;
        }

        .delete-tab {
            margin-left: 5px;
            cursor: pointer;
            font-size: 16px;
            color: rgb(121, 121, 121);
            font-weight: bold;
        }

            .delete-tab:hover {
                color: darkred;
            }

        .button-row {
            position: absolute;
            top: 5px;
            left: 5px;
            display: flex;
            align-items: center;
            gap: 5px;
        }

        .add-button, .small-button {
            height: 24px;
            background-color: rgb(10, 10, 10);
            color: rgb(129, 129, 129);
            border: 1px solid #333;
            border-radius: 3px;
            font-size: 10px;
            font-weight: bold;
            display: flex;
            align-items: center;
            justify-content: center;
            cursor: pointer;
            box-shadow: 0 1px 3px rgba(0, 0, 0, 0.6);
            transition: all 0.2s ease-in-out;
        }


        .add-button {
            width: 24px;
        }

            .add-button:hover {
                background-color: #222;
                border-color: #555;
                transform: scale(1.1);
            }

        .small-button {
            width: 60px;
        }

            .small-button.active {
                background-color: #1a1a1a;
                color: #c7c7c7;
            }

            .small-button:hover {
                background-color: #333;
                border-color: #555;
            }

        .monaco-editor-background, .margin {
            background-color: rgb(10, 10, 10) !important; /* Set editor background to true black */
            background-image: none !important; /* Ensure no background image is applied */
        }

        .monaco-editor-background {
            background-color: rgb(10, 10, 10) !important; /* Set Monaco editor background to black */
        }

        .editor-container {
            background-color: rgb(10, 10, 10); /* Apply black background to any container holding the editor */
        }
    </style>
    <meta charset="utf-8" />
    <title></title>
</head>

<body>
    <!-- Add this inside <body> above the <div id="container"> -->
    <div class="button-row">
        <button class="add-button" id="add-button">+</button>
    </div>

    <div id="container" style="width:100%;height:100%;"></div>
    <script src="vs/loader.js"></script>
    <script type="text/javascript">
        require.config({
            paths: {
                'vs': 'vs',
            }
        });

        var GetText;
        var SetText;
        var SetTheme;
        var SetScroll;
        var ShowError;
        var Refresh;

        var SwitchMinimap;
        var SwitchReadonly;
        var SwitchRenderWhitespace;
        var SwitchLinks;
        var SwitchLineHeight;
        var SwitchFontSize;
        var SwitchFolding;
        var SwitchAutoIndent;
        var SwitchFontFamily;
        var SwitchFontLigatures;
        var AddIntellisense;

        var editor;
        var Proposals = [];

        require(['vs/editor/editor.main'], function () {
            function getDependencyProposals() {
                let newProposals = [];
                for (let index = 0; index < Proposals.length; index++) {
                    const element = Proposals[index];
                    let newElement = {}
                    for (const key in element) {
                        if (key == "__children__") {
                            continue;
                        };
                        newElement[key] = element[key];
                    }
                    newProposals.push(newElement)
                }
                return newProposals;
            }

            monaco.editor.defineTheme('Dark', {
                base: 'vs-dark',
                inherit: true,
                rules: [
                    { token: 'variable.language.self', foreground: 'c678dd' },
                    { token: 'variable.language.self', foreground: 'cccccc' },
                    { token: 'variable.parameter.variadic', foreground: 'cccccc' },
                    { token: 'variable.parameter.function', foreground: 'cccccc' },
                    { token: 'variable.other.constant', foreground: 'cccccc' },
                    { token: 'variable.property', foreground: 'cccccc' },
                    { token: 'variable.object.property', foreground: 'cccccc' },

                    { token: 'keyword', foreground: 'cccccc' },
                    { token: 'keyword.local', foreground: 'cccccc', fontStyle: 'bold' },
                    { token: 'keyword.operator', foreground: 'cccccc' },
                    { token: 'keyword.operator.type.annotation', foreground: 'cccccc' },
                    { token: 'keyword.operator.typedef.annotation', foreground: 'cccccc' },
                    { token: 'keyword.control.export', foreground: 'cccccc', fontStyle: 'bold' },

                    { token: 'operator', foreground: '529875' },
                    { token: 'operator.type', foreground: '529875' },
                    { token: 'operator.special', foreground: '529875' },

                    { token: 'entity.name.type.alias', foreground: 'ffffff' },
                    { token: 'entity.name.function', foreground: '61afef' },

                    { token: 'global', foreground: '61afef', fontStyle: 'bold' },

                    { token: 'storage.type', foreground: 'ffffff' },

                    { token: 'comment', foreground: '5c6370', fontStyle: 'italic' },
                    { token: 'comment.highlight.title', foreground: '5c6370', fontStyle: 'italic' },
                    { token: 'comment.highlight.name', foreground: '5c6370', fontStyle: 'italic' },
                    { token: 'comment.delimiter.modifier', foreground: '5c6370', fontStyle: 'italic' },
                    { token: 'comment.highlight.modifier', foreground: '5c6370', fontStyle: 'italic' },
                    { token: 'comment.highlight.descriptor', foreground: '5c6370', fontStyle: 'italic' },

                    { token: 'delimiter.longstring', foreground: 'f0f0f0' },
                    { token: 'delimiter.bracket', foreground: 'f0f0f0' },
                    { token: 'delimiter.array', foreground: 'f0f0f0' },
                    { token: 'delimiter.parenthesis', foreground: 'f0f0f0' },
                    { token: 'delimiter', foreground: 'f0f0f0' },

                    { token: 'string', foreground: 'CE9178' },
                    { token: 'longstring', foreground: 'CE9178' },
                    { token: 'string.delimeter', foreground: 'CE9178' },
                    { token: 'string.escape', foreground: 'eb8d00' },

                    { token: 'punctuation.separator.arguments', foreground: 'ffffff' },
                    { token: 'punctuation.separator.parameter', foreground: 'ffffff' },
                    { token: 'punctuation.separator.table', foreground: 'ffffff' },
                    { token: 'punctuation.definition.block', foreground: 'ffffff' },
                    { token: 'punctuation.definition.parameters', foreground: 'ffffff' },
                    { token: 'punctuation.definition.typeparameters', foreground: 'ffffff' },

                    { token: 'constant.language', foreground: 'd19a66' },
                    { token: 'number', foreground: 'd19a66' },
                    { token: 'constants', foreground: 'd19a66' },

                    { token: 'entity.name.function', foreground: 'cccccc' },
                    { token: 'global', foreground: 'cccccc', fontStyle: 'bold' },
                    { token: 'support.function', foreground: 'cccccc' },
                    { token: 'support.function.library', foreground: 'cccccc' },
                    { token: 'support.type', foreground: 'cccccc' },
                ],
                colors: {
                    'editor.background': '#101010',
                    'minimap.background': '#0F0F0F'
                }
            });


            require(['vs/basic-languages/monaco.contribution'], function () {
                monaco.languages.registerCompletionItemProvider('lua', {
                    provideCompletionItems: function (model, position) {
                        return {
                            suggestions: getDependencyProposals(),
                        };
                    },
                    triggerCharacters: ['.', ':', '"'],
                });

                editor = monaco.editor.create(document.getElementById('container'), {
                    value: '',
                    language: 'lua',
                    theme: "Dark",
                    folding: true,
                    dragAndDrop: true,
                    links: true,
                    minimap: {
                        enabled: false,
                    },
                    showFoldingControls: "always",
                    smoothScrolling: true,
                    stopRenderingLineAfter: 6500,
                    fontSize: 14,
                    cursorBlinking: "smooth",
                    cursorSmoothCaretAnimation: true,
                    foldingHighlight: false,
                    fontLigatures: true,
                    formatOnPaste: true,
                    showDeprecated: true,
                    suggest: {
                        snippetsPreventQuickSuggestions: false,
                    },
                });

                editor.getModel().updateOptions({ insertSpaces: false })
            });

            window.onresize = function () {
                editor.layout();
            }

            Cut = function () {
                editor.focus();
                document.execCommand('cut');
            }

            Copy = function () {
                editor.focus();
                document.execCommand('copy');
            }

            Paste = function () {
                editor.focus();
                document.execCommand('paste');
            }

            Undo = function () {
                editor.focus();
                document.execCommand('undo');
            }

            Redo = function () {
                editor.focus();
                document.execCommand('redo');
            }

            Delete = function () {
                editor.focus();
                document.execCommand('delete');
            }

            SelectAll = function () {
                editor.focus();
                document.execCommand('selectAll');
            }

            GetText = function () {
                return editor.getValue();
            }

            SetText = function (x) {
                editor.setValue(x);
            }

            GetProposals = function () {
                return Proposals;
            }


            OnDidChangeContent = function (callback) {
                return editor.onDidChangeModelContent((event) => {
                    callback(editor.getValue());
                });
            }

            OnDidChangeCursorPosition = function (callback) {
                return editor.onDidChangeCursorPosition((event) => {
                    callback(event.position);
                });
            }

            SetTheme = function (themeName) {
                if (themeName == 'Dark') {
                    monaco.editor.setTheme('Dark')
                }
            }

            SwitchMinimap = function (flag) {
                editor.updateOptions({
                    minimap: {
                        enabled: flag,
                    }
                });
            }

            SwitchReadonly = function (flag) {
                editor.updateOptions({
                    readOnly: flag,
                });
            }

            SwitchRenderWhitespace = function (op) {
                editor.updateOptions({
                    renderWhitespace: op,
                });
            }

            SwitchLinks = function (flag) {
                editor.updateOptions({
                    links: flag,
                });
            }

            SwitchLineHeight = function (num) {
                editor.updateOptions({
                    lineHeight: num,
                });
            }

            SwitchFontSize = function (num) {
                editor.updateOptions({
                    fontSize: num,
                });
            }

            SwitchFolding = function (flag) {
                editor.updateOptions({
                    folding: flag,
                });
            }

            SwitchAutoIndent = function (flag) {
                editor.updateOptions({
                    autoIndent: flag,
                });
            }

            SwitchFontFamily = function (name) {
                editor.updateOptions({
                    fontFamily: name,
                });
            }

            SwitchFontLigatures = function (flag) {
                editor.updateOptions({
                    fontLigatures: flag,
                });
            }

            ShowError = function (line, column, endline, endcolumn, errMessage) {
                editor.revealPositionInCenter({ lineNumber: line, column: column });
                editor.deltaDecorations([], [
                    {
                        range: new monaco.Range(line, column, endline, endcolumn),
                        options: {
                            inlineClassName: 'squiggly-error',
                            hoverMessage: {
                                value: errMessage,
                            }
                        },
                    },
                ]);
            }

            AddSnippet = function (kindName, snippetName, data) {
                let snippet = {
                    insertTextRules: monaco.languages.CompletionItemInsertTextRule.InsertAsSnippet,
                    kind: monaco.languages.CompletionItemKind[kindName],
                };
                for (const key in data) {
                    let value = data[key];
                    if (key == "insertText" && typeof value == "object") {
                        value = value.join("\n");
                    };
                    snippet[key] = value;
                }
                if (!snippet.label) {
                    snippet.label = snippetName
                }
                if (!snippet.insertText) {
                    snippet.insertText = snippetName
                }
                Proposals.push(snippet);
            }

            AddRawSnippet = function (data) {
                Proposals.push(data);
            }

            SetScroll = function (line) {
                editor.revealLineInCenter({ lineNumber: line });
            }

            Refresh = function () {
                var Text = GetText();
                SetText(Text);
                editor.trigger('keyboard', 'type', { text: Text });
            }

            AddIntellisense = function (l, k, d, i) {
                console.log(l);
                console.log(k);
                console.log(d);
                console.log(i);
                var t;
                switch (k) {
                    case "Class":
                        t = monaco.languages.CompletionItemKind.Class;
                        break;
                    case "Color":
                        t = monaco.languages.CompletionItemKind.Color;
                        break;
                    case "Constructor":
                        t = monaco.languages.CompletionItemKind.Constructor;
                        break;
                    case "Enum":
                        t = monaco.languages.CompletionItemKind.Enum;
                        break;
                    case "Field":
                        t = monaco.languages.CompletionItemKind.Field;
                        break;
                    case "File":
                        t = monaco.languages.CompletionItemKind.File;
                        break;
                    case "Folder":
                        t = monaco.languages.CompletionItemKind.Folder;
                        break;
                    case "Function":
                        t = monaco.languages.CompletionItemKind.Function;
                        break;
                    case "Interface":
                        t = monaco.languages.CompletionItemKind.Interface;
                        break;
                    case "Keyword":
                        t = monaco.languages.CompletionItemKind.Keyword;
                        break;
                    case "Method":
                        t = monaco.languages.CompletionItemKind.Method;
                        break;
                    case "Module":
                        t = monaco.languages.CompletionItemKind.Module;
                        break;
                    case "Property":
                        t = monaco.languages.CompletionItemKind.Property;
                        break;
                    case "Reference":
                        t = monaco.languages.CompletionItemKind.Reference;
                        break;
                    case "Snippet":
                        t = monaco.languages.CompletionItemKind.Snippet;
                        break;
                    case "Text":
                        t = monaco.languages.CompletionItemKind.Text;
                        break;
                    case "Unit":
                        t = monaco.languages.CompletionItemKind.Unit;
                        break;
                    case "Value":
                        t = monaco.languages.CompletionItemKind.Value;
                        break;
                    case "Variable":
                        t = monaco.languages.CompletionItemKind.Variable;
                        break;
                }
                document.getElementsByClassName("lines-content monaco-editor-background")[0].style.backgroundImage = "url(https://c.tenor.com/StDUfEak8SkAAAAC/tenor.gif)" //Your Gif/Picture link
                document.getElementsByClassName("margin")[0].style.backgroundImage = "url(https://c.tenor.com/StDUfEak8SkAAAAC/tenor.gif)" //Your Gif/Picture link
                Proposals.push({
                    label: l,
                    kind: t,
                    detail: d,
                    insertText: i
                });

                console.log(Proposals);
            }

        });




    </script>
    <script>
        // Tab system setup
        var editors = {}; // Store editors' content by tab ID
        var activeTab = null; // Track active tab
        var tabCount = 0; // Number of tabs

        // Function to add a new tab
        document.getElementById("add-button").addEventListener("click", function () {
            if (tabCount < 7) {
                addNewTab();
            }
        });
        addMainab()
        // Function to create a new tab

        function addMainab() {
            const buttonRow = document.querySelector(".button-row");
            const MainTabId = `tab${++tabCount}`;
            editors[MainTabId] = ""; // Initialize tab content

            const newButton = document.createElement("button");
            newButton.classList.add("small-button");
            newButton.textContent = `MainTab`;
            newButton.dataset.tabId = MainTabId;

            // Create the delete button for the tab
            const deleteButton = document.createElement("span");
            deleteButton.classList.add("delete-tab");
            deleteButton.dataset.tabId = MainTabId;

            // Delete button functionality
            deleteButton.addEventListener("click", function (event) {
                event.stopPropagation(); // Prevent triggering tab switch when deleting
                deleteTab(MainTabId, newButton);
            });

            // Add the delete button to the tab button
            newButton.appendChild(deleteButton);

            newButton.addEventListener("click", function () {
                switchTab(MainTabId, newButton);
            });

            buttonRow.insertBefore(newButton, document.getElementById("add-button"));
            switchTab(MainTabId, newButton);
        }


        function addNewTab() {
            const buttonRow = document.querySelector(".button-row");
            const newTabId = `tab${++tabCount}`;
            editors[newTabId] = ""; // Initialize tab content

            const newButton = document.createElement("button");
            newButton.classList.add("small-button");
            newButton.textContent = `Tab`;
            newButton.dataset.tabId = newTabId;

            // Create the delete button for the tab
            const deleteButton = document.createElement("span");
            deleteButton.classList.add("delete-tab");
            deleteButton.textContent = "−"; // Minus sign for delete button
            deleteButton.dataset.tabId = newTabId;

            // Delete button functionality
            deleteButton.addEventListener("click", function (event) {
                event.stopPropagation(); // Prevent triggering tab switch when deleting
                deleteTab(newTabId, newButton);
            });

            // Add the delete button to the tab button
            newButton.appendChild(deleteButton);

            newButton.addEventListener("click", function () {
                switchTab(newTabId, newButton);
            });

            buttonRow.insertBefore(newButton, document.getElementById("add-button"));
            switchTab(newTabId, newButton);
        }

        function showMessageBox(message, onConfirm, onCancel) {
            // Create overlay
            const overlay = document.createElement('div');
            overlay.style.position = 'fixed';
            overlay.style.top = '0';

            overlay.style.left = '0';
            overlay.style.width = '100%';
            overlay.style.height = '100%';
            overlay.style.backgroundColor = 'rgba(10, 10, 10, 10)';
            overlay.style.display = 'flex';
            overlay.style.justifyContent = 'center';
            overlay.style.alignItems = 'center';
            overlay.style.zIndex = '1000';

            // Create message box
            const box = document.createElement('div');
            box.style.backgroundColor = '#000';
            box.style.color = '#fff';
            box.style.padding = '20px';
            box.style.borderRadius = '8px';
            box.style.textAlign = 'center';
            box.style.boxShadow = '0 4px 8px rgba(0, 0, 0, 0.2)';

            // Add message text
            const messageText = document.createElement('p');
            messageText.style.fontFamily = "'Segoe UI', sans-serif"; // Change font family
            messageText.textContent = message;
            box.appendChild(messageText);

            // Add buttons
            const buttonContainer = document.createElement('div');
            buttonContainer.style.marginTop = '15px';

            const confirmButton = document.createElement('button');
            confirmButton.textContent = 'Yes';
            confirmButton.style.margin = '0 5px';
            confirmButton.style.padding = '10px 20px';
            confirmButton.style.backgroundColor = 'rgba(20, 20, 20, 20)';
            confirmButton.style.color = 'rgba(255, 255, 255, 255)';
            confirmButton.style.border = 'none';
            confirmButton.style.borderRadius = '4px';
            confirmButton.style.cursor = 'pointer';
            confirmButton.onclick = () => {
                document.body.removeChild(overlay);
                onConfirm();
            };

            const cancelButton = document.createElement('button');
            cancelButton.textContent = 'No';
            cancelButton.style.margin = '0 5px';
            cancelButton.style.padding = '10px 20px';
            cancelButton.style.backgroundColor = 'rgba(20, 20, 20, 20)';
            cancelButton.style.color = 'rgba(255, 255, 255, 255)';
            cancelButton.style.border = 'none';
            cancelButton.style.borderRadius = '4px';
            cancelButton.style.cursor = 'pointer';
            cancelButton.onclick = () => {
                document.body.removeChild(overlay);
                if (onCancel) onCancel();
            };

            buttonContainer.appendChild(confirmButton);
            buttonContainer.appendChild(cancelButton);
            box.appendChild(buttonContainer);

            overlay.appendChild(box);
            document.body.appendChild(overlay);
        }

        function deleteTab(tabId, tabButtonElement) {
            showMessageBox(
                'Are You Sure You Want To Delete This Tab?',
                () => {
                    if (tabId === activeTab) {
                        // If the active tab is deleted, switch to another tab (if possible)
                        const allTabs = Object.keys(editors);
                        const index = allTabs.indexOf(tabId);
                        const nextTabId = allTabs[index + 1] || allTabs[index - 1]; // Switch to the next or previous tab

                        if (nextTabId) {
                            const nextTabButton = document.querySelector(`[data-tab-id="${nextTabId}"]`);
                            switchTab(nextTabId, nextTabButton);
                        } else {
                            // If no tabs are left, clear the editor content
                            editor.setValue('');
                            activeTab = null;
                        }
                    }

                    // Remove the tab button from the DOM
                    tabButtonElement.remove();

                    // Delete the tab content from the editors object
                    delete editors[tabId];

                    // Decrement tab count
                    tabCount--;

                    // Adjust add button state if tab count drops below the maximum
                    if (tabCount < 7) {
                        document.getElementById('add-button').disabled = false;
                    }
                },
                () => {
                    console.log('Tab deletion canceled');
                }
            );
        }





        // Function to switch between tabs
        function switchTab(tabId, buttonElement) {
            if (activeTab === tabId) return; // Do nothing if already active

            // Save current editor content if there's an active tab
            if (activeTab) {
                editors[activeTab] = editor.getValue();
                document.querySelector(`[data-tab-id="${activeTab}"]`).classList.remove("active");
            }

            activeTab = tabId;
            buttonElement.classList.add("active");

            // Load the content for the new active tab
            const content = editors[tabId] || "-- Editor Made By Vulcanz";  // Set default content to "Editor Made By Vulcanz"
            editor.setValue(content);
        }

    </script>
</body>

</html>