<!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("dblclick", 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 deleteTab(tabId, tabButtonElement) {
    // Perform delete operation
    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;
    }
}






// 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\n-- Double Click On The - To Delete Tabs";  // Set default content to "Editor Made By Vulcanz"
    editor.setValue(content);
}

	</script>
</body>

</html>