/*=========================================================================================
    File Name: editor-codemirror.js
    Description: Code Mirror JS for code editor
    ----------------------------------------------------------------------------------------
    Item Name: Modern Admin - Clean Bootstrap 4 Dashboard HTML Template
    Version: 1.0
    Author: GeeksLabs
    Author URL: http://www.themeforest.net/user/geekslabs
==========================================================================================*/
(function(window, document, $) {
	'use strict';

	// Basic CodeMirror
	var code = document.getElementById("codemirror");
	var editor = CodeMirror.fromTextArea(code, {
		lineNumbers: true,
		mode: "javascript",
		theme: "monokai"
	});

	//Theme
	var input = document.getElementById("select");
	var theme = input.options[input.selectedIndex].textContent;
	code = document.getElementById("codemirror-theme");
	var editor1 = CodeMirror.fromTextArea(code, {
		lineNumbers: true,
		styleActiveLine: true,
		mode: "javascript",
		matchBrackets: true,
	});
	$('#select').change(function () {
		var selectedTheme = $(':selected').val();
		var stylesheet = $('[title="theme"]');
		stylesheet.attr('href','../../../app-assets/vendors/css/editors/theme/'+selectedTheme.toLowerCase()+'.css');
		editor1.setOption("theme", selectedTheme);

	});
	function selectTheme() {
		var theme = input.options[input.selectedIndex].textContent;
		editor1.setOption("theme", theme);
		location.hash = "#" + theme;
	}
	var choice = (location.hash && location.hash.slice(1)) ||
				(document.location.search &&
					decodeURIComponent(document.location.search.slice(1)));
	if (choice) {
		input.value = choice;
		editor1.setOption("theme", choice);
	}
	CodeMirror.on(window, "hashchange", function() {
		var theme = location.hash.slice(1);
		if (theme) { input.value = theme; selectTheme(); }
	});

	// LoadMode
	code = document.getElementById("codemirror-loadmode");
	CodeMirror.modeURL = "../../../app-assets/vendors/js/editors/codemirror/mode/*/*.js";
	var editorMode = CodeMirror.fromTextArea(code, {
		lineNumbers: true
	});
	var modeInput = document.getElementById("mode");
	CodeMirror.on(modeInput, "keypress", function(e) {
		if (e.keyCode == 13) change();
	});
	// function change() {
	$('#change').on('click', function(){
		var val = modeInput.value, m, mode, spec;
		if(m = /.+\.([^.]+)$/.exec(val)){
			var info = CodeMirror.findModeByExtension(m[1]);
			if (info) {
				mode = info.mode;
				spec = info.mime;
			}
		} else if (/\//.test(val)) {
			var info = CodeMirror.findModeByMIME(val);
			if (info) {
				mode = info.mode;
				spec = val;
			}
		} else {
			mode = spec = val;
		}
		if (mode) {
			editorMode.setOption("mode", spec);
			CodeMirror.autoLoadMode(editorMode, mode);
			document.getElementById("modeinfo").textContent = spec;
		} else {
			alert("Could not find a mode corresponding to " + val);
		}
	// }
	});

	// Sublime Text bindings
	var value = document.getElementById("codemirror-sublime").value;
	var map = CodeMirror.keyMap.sublime;
	for (var key in map) {
		var val = map[key];
		if (key != "fallthrough" && val != "..." && (!/find/.test(val) || /findUnder/.test(val)))
			value += "	\"" + key + "\": \"" + val + "\",\n";
	}
	value += "}\n\n// The implementation of joinLines\n";
	value += CodeMirror.commands.joinLines.toString().replace(/^function\s*\(/, "function joinLines(").replace(/\n	/g, "\n") + "\n";
	code = document.getElementById("codemirror-sublime");
	var editor = CodeMirror.fromTextArea(code, {
		value: value,
		lineNumbers: true,
		theme: "monokai",
		mode: "javascript",
		keyMap: "sublime",
		autoCloseBrackets: true,
		matchBrackets: true,
		showCursorWhenSelecting: true,
		theme: "monokai",
		tabSize: 2
	});

	// Code Folding Demo
	code = document.getElementById("codemirror-js");
	var code_html = document.getElementById("codemirror-html");
	var code_markdown = document.getElementById("codemirror-markdown");
	window.editor = CodeMirror.fromTextArea(code, {
		mode: "javascript",
		lineNumbers: true,
		lineWrapping: true,
		extraKeys: {"Ctrl-Q": function(cm){ cm.foldCode(cm.getCursor()); }},
		foldGutter: true,
		gutters: ["CodeMirror-linenumbers", "CodeMirror-foldgutter"]
	});
	editor.foldCode(CodeMirror.Pos(13, 0));

	window.editor_html = CodeMirror.fromTextArea(code_html, {
		mode: "text/html",
		lineNumbers: true,
		lineWrapping: true,
		extraKeys: {"Ctrl-Q": function(cm){ cm.foldCode(cm.getCursor()); }},
		foldGutter: true,
		gutters: ["CodeMirror-linenumbers", "CodeMirror-foldgutter"]
	});
	editor_html.foldCode(CodeMirror.Pos(0, 0));
	editor_html.foldCode(CodeMirror.Pos(21, 0));

	window.editor_markdown = CodeMirror.fromTextArea(code_markdown, {
		mode: "markdown",
		lineNumbers: true,
		lineWrapping: true,
		extraKeys: {"Ctrl-Q": function(cm){ cm.foldCode(cm.getCursor()); }},
		foldGutter: true,
		gutters: ["CodeMirror-linenumbers", "CodeMirror-foldgutter"]
	});

	// Marker
	code = document.getElementById("codemirror-marker");
	var editor = new CodeMirror.fromTextArea(code, {
		lineNumbers: true,
		styleSelectedText: true,
		highlightSelectionMatches: {showToken: /\w/, annotateScrollbar: true}
	});
	editor.markText({line: 6, ch: 26}, {line: 6, ch: 42}, {className: "styled-background"});

	// Initialize CodeMirror editor with a nice html5 canvas demo.
	var delay;
	var editor = new CodeMirror.fromTextArea(document.getElementById('codemirror-preview'), {
		mode: 'text/html'
	});
	editor.on("change", function() {
		clearTimeout(delay);
		delay = setTimeout(updatePreview, 300);
	});

	function updatePreview() {
		var previewFrame = document.getElementById('preview');
		var preview =	previewFrame.contentDocument ||	previewFrame.contentWindow.document;
		preview.open();
		preview.write(editor.getValue());
		preview.close();
	}
	setTimeout(updatePreview, 300);

	// Ruler
	var nums = "0123456789", space = "          ";
	var colors = ["#967ADC", "#37BC9B", "#F6BB42", "#3BAFDA", "#DA4453", "#3f51b5","#2196F3","#ff9800","#e91e63"];
	var rulers = [];
	value = "";
	for (var i = 1; i <= 9; i++) {
		rulers.push({color: colors[i], column: i * 10, lineStyle: "dashed"});
		for (var j = 1; j < i; j++) value += space;
		value += nums + "\n";
	}
	code = document.getElementById('codemirror-ruler');
	editor = new CodeMirror(code, {
		rulers: rulers,
		value: value + value + value,
		lineNumbers: true
	});

	// Visible Tabs
	code = document.getElementById('codemirror-tabs');
	editor = CodeMirror.fromTextArea(code, {
		lineNumbers: true,
		tabSize: 4,
		indentUnit: 4,
		indentWithTabs: true,
		mode: "text/html"
	});
})(window, document, jQuery);