/*eslint max-lines: ["warn", {"max": 500, "skipBlankLines": true, "skipComments": true}]*/
import "./editor.less";
import React from "react";
import createReactClass from "create-react-class";
import _ from "lodash";
import dedent from "dedent";
import Markdown from "@shared/markdown.js";

import CodeEditor from "../../components/codeEditor/codeEditor.jsx";
import SnippetBar from "./snippetbar/snippetbar.jsx";
import MetadataEditor from "./metadataEditor/metadataEditor.jsx";

const EDITOR_THEME_KEY = "HB_editor_theme";

const PAGEBREAK_REGEX_V3 = /^(?=\\page(?:break)?(?: *{[^\n{}]*})?$)/m;
const SNIPPETBREAK_REGEX_V3 = /^\\snippet\ .*$/;
const DEFAULT_STYLE_TEXT = dedent`
				/*=======---  Example CSS styling  ---=======*/
				/* Any CSS here will apply to your document! */

				.myExampleClass {
					color: black;
				}`;

const DEFAULT_SNIPPET_TEXT = dedent`
				\snippet example snippet
				
				The text between \`\snippet title\` lines will become a snippet of name \`title\` as this example provides.
				
				This snippet is accessible in the brew tab, and will be inherited if the brew is used as a theme.
`;
let isJumping = false;

const Editor = createReactClass({
	displayName: "Editor",
	getDefaultProps: function () {
		return {
			brew: {
				text: "",
				style: "",
			},

			onBrewChange: () => {},
			reportError: () => {},

			onCursorPageChange: () => {},
			onViewPageChange: () => {},

			editorTheme: "default",
			renderer: "legacy",

			currentEditorCursorPageNum: 1,
			currentEditorViewPageNum: 1,
			currentBrewRendererPageNum: 1,
		};
	},
	getInitialState: function () {
		return {
			editorTheme: this.props.editorTheme,
			view: "text", //'text', 'style', 'meta', 'snippet'
			snippetBarHeight: 26,
		};
	},

	editor: React.createRef(null),
	codeEditor: React.createRef(null),

	isText: function () {
		return this.state.view == "text";
	},
	isStyle: function () {
		return this.state.view == "style";
	},
	isMeta: function () {
		return this.state.view == "meta";
	},
	isSnip: function () {
		return this.state.view == "snippet";
	},

	componentDidMount: function () {
		this.highlightCustomMarkdown();
		document.getElementById("BrewRenderer").addEventListener("keydown", this.handleControlKeys);
		document.addEventListener("keydown", this.handleControlKeys);

		this.codeEditor.current.codeMirror?.on("cursorActivity", (cm) => {
			this.updateCurrentCursorPage(cm.getCursor());
		});
		this.codeEditor.current.codeMirror?.on(
			"scroll",
			_.throttle(() => {
				this.updateCurrentViewPage(this.codeEditor.current.getTopVisibleLine());
			}, 200),
		);

		const editorTheme = window.localStorage.getItem(EDITOR_THEME_KEY);
		if (editorTheme) {
			this.setState({
				editorTheme: editorTheme,
			});
		}
		const snippetBar = document.querySelector(".editor > .snippetBar");
		if (!snippetBar) return;

		this.resizeObserver = new ResizeObserver((entries) => {
			const height = document.querySelector(".editor > .snippetBar").offsetHeight;
			this.setState({ snippetBarHeight: height });
		});

		this.resizeObserver.observe(snippetBar);
	},

	componentDidUpdate: function (prevProps, prevState, snapshot) {
		this.highlightCustomMarkdown();
		if (prevProps.moveBrew !== this.props.moveBrew) this.brewJump();

		if (prevProps.moveSource !== this.props.moveSource) this.sourceJump();

		if (this.props.liveScroll) {
			if (prevProps.currentBrewRendererPageNum !== this.props.currentBrewRendererPageNum) {
				this.sourceJump(this.props.currentBrewRendererPageNum, false);
			} else if (prevProps.currentEditorViewPageNum !== this.props.currentEditorViewPageNum) {
				this.brewJump(this.props.currentEditorViewPageNum, false);
			} else if (prevProps.currentEditorCursorPageNum !== this.props.currentEditorCursorPageNum) {
				this.brewJump(this.props.currentEditorCursorPageNum, false);
			}
		}
	},

	componentWillUnmount() {
		if (this.resizeObserver) this.resizeObserver.disconnect();
	},

	handleControlKeys: function (e) {
		if (!(e.ctrlKey && e.metaKey && e.shiftKey)) return;
		const LEFTARROW_KEY = 37;
		const RIGHTARROW_KEY = 39;
		if (e.keyCode == RIGHTARROW_KEY) this.brewJump();
		if (e.keyCode == LEFTARROW_KEY) this.sourceJump();
		if (e.keyCode == LEFTARROW_KEY || e.keyCode == RIGHTARROW_KEY) {
			e.stopPropagation();
			e.preventDefault();
		}
	},

	updateCurrentCursorPage: function (cursor) {
		const lines = this.props.brew.text.split("\n").slice(1, cursor.line + 1);
		const pageRegex = this.props.brew.renderer == "V3" ? PAGEBREAK_REGEX_V3 : /\\page/;
		const currentPage = lines.reduce((count, line) => count + (pageRegex.test(line) ? 1 : 0), 1);
		this.props.onCursorPageChange(currentPage);
	},

	updateCurrentViewPage: function (topScrollLine) {
		const lines = this.props.brew.text.split("\n").slice(1, topScrollLine + 1);
		const pageRegex = this.props.brew.renderer == "V3" ? PAGEBREAK_REGEX_V3 : /\\page/;
		const currentPage = lines.reduce((count, line) => count + (pageRegex.test(line) ? 1 : 0), 1);
		this.props.onViewPageChange(currentPage);
	},

	handleInject: function (injectText) {
		this.codeEditor.current?.injectText(injectText, false);
	},

	handleViewChange: function (newView) {
		this.props.setMoveArrows(newView === "text");

		this.setState(
			{
				view: newView,
			},
			() => {
				this.codeEditor.current?.codeMirror?.focus();
			},
		);
	},

	highlightCustomMarkdown: function () {
		if (!this.codeEditor.current?.codeMirror) return;
		if (this.state.view === "text" || this.state.view === "snippet") {
			const codeMirror = this.codeEditor.current.codeMirror;

			codeMirror?.operation(() => {
				// Batch CodeMirror styling

				const foldLines = [];

				//reset custom text styles
				const customHighlights = codeMirror?.getAllMarks().filter((mark) => {
					// Record details of folded sections
					if (mark.__isFold) {
						const fold = mark.find();
						foldLines.push({ from: fold.from?.line, to: fold.to?.line });
					}
					return !mark.__isFold;
				}); //Don't undo code folding

				for (let i = customHighlights.length - 1; i >= 0; i--) customHighlights[i].clear();

				let userSnippetCount = 1; // start snippet count from snippet 1
				let editorPageCount = 1; // start page count from page 1

				const whichSource = this.state.view === "text" ? this.props.brew.text : this.props.brew.snippets;
				_.forEach(whichSource?.split("\n"), (line, lineNumber) => {
					const tabHighlight = this.state.view === "text" ? "pageLine" : "snippetLine";
					const textOrSnip = this.state.view === "text";

					//reset custom line styles
					codeMirror?.removeLineClass(lineNumber, "background", "pageLine");
					codeMirror?.removeLineClass(lineNumber, "background", "snippetLine");
					codeMirror?.removeLineClass(lineNumber, "text");
					codeMirror?.removeLineClass(lineNumber, "wrap", "sourceMoveFlash");

					// Don't process lines inside folded text
					// If the current lineNumber is inside any folded marks, skip line styling
					if (foldLines.some((fold) => lineNumber >= fold.from && lineNumber <= fold.to)) return;

					// Styling for \page breaks
					if (
						(this.props.renderer == "legacy" && line.includes("\\page")) ||
						(this.props.renderer == "V3" &&
							line.match(textOrSnip ? PAGEBREAK_REGEX_V3 : SNIPPETBREAK_REGEX_V3))
					) {
						if (lineNumber > 0 && textOrSnip)
							// Since \page is optional on first line of document,
							editorPageCount += 1; // don't use it to increment page count; stay at 1
						else if (this.state.view !== "text") userSnippetCount += 1;

						// add back the original class 'background' but also add the new class '.pageline'
						codeMirror?.addLineClass(lineNumber, "background", tabHighlight);
						const pageCountElement = Object.assign(document.createElement("span"), {
							className: "editor-page-count",
							textContent: textOrSnip ? editorPageCount : userSnippetCount,
						});
						codeMirror?.setBookmark({ line: lineNumber, ch: line.length }, pageCountElement);
					}

					// New CodeMirror styling for V3 renderer
					if (this.props.renderer === "V3") {
						if (line.match(/^\\column(?:break)?$/)) {
							codeMirror?.addLineClass(lineNumber, "text", "columnSplit");
						}

						// definition lists
						if (line.includes("::")) {
							if (/^:*$/.test(line) == true) {
								return;
							}
							const regex = /^([^\n]*?:?\s?)(::[^\n]*)(?:\n|$)/dmy; // the `d` flag, for match indices, throws an ESLint error.
							let match;
							while ((match = regex.exec(line)) != null) {
								codeMirror?.markText(
									{ line: lineNumber, ch: match.indices[0][0] },
									{ line: lineNumber, ch: match.indices[0][1] },
									{ className: "dl-highlight" },
								);
								codeMirror?.markText(
									{ line: lineNumber, ch: match.indices[1][0] },
									{ line: lineNumber, ch: match.indices[1][1] },
									{ className: "dt-highlight" },
								);
								codeMirror?.markText(
									{ line: lineNumber, ch: match.indices[2][0] },
									{ line: lineNumber, ch: match.indices[2][1] },
									{ className: "dd-highlight" },
								);
								const ddIndex = match.indices[2][0];
								const colons = /::/g;
								const colonMatches = colons.exec(match[2]);
								if (colonMatches !== null) {
									codeMirror?.markText(
										{ line: lineNumber, ch: colonMatches.index + ddIndex },
										{ line: lineNumber, ch: colonMatches.index + colonMatches[0].length + ddIndex },
										{ className: "dl-colon-highlight" },
									);
								}
							}
						}

						// Subscript & Superscript
						if (line.includes("^")) {
							let startIndex = line.indexOf("^");
							const superRegex = /\^(?!\s)(?=([^\n\^]*[^\s\^]))\1\^/gy;
							const subRegex = /\^\^(?!\s)(?=([^\n\^]*[^\s\^]))\1\^\^/gy;

							while (startIndex >= 0) {
								superRegex.lastIndex = subRegex.lastIndex = startIndex;
								let isSuper = false;
								const match = subRegex.exec(line) || superRegex.exec(line);
								if (match) {
									isSuper = !subRegex.lastIndex;
									codeMirror?.markText(
										{ line: lineNumber, ch: match.index },
										{ line: lineNumber, ch: match.index + match[0].length },
										{ className: isSuper ? "superscript" : "subscript" },
									);
								}
								startIndex = line.indexOf(
									"^",
									Math.max(startIndex + 1, subRegex.lastIndex, superRegex.lastIndex),
								);
							}
						}

						// Injections: single-line {…}
						if (line.includes("{") && line.includes("}")) {
							const injectionRegex =
								/(?:^|[^{\n])({(?=((?:[:=](?:"[\w,\-()#%. ]*"|[\w\-()#%.]*)|[^"':={}\s]*)*))\2})/gm;
							let match;
							while ((match = injectionRegex.exec(line)) !== null) {
								tokens.push({
									line: lineNumber,
									from: match.index,
									to: match.index + match[1].length,
									type: "injection",
								});
							}
						} else if (line.includes("{{") && line.includes("}}")) { // Inline blocks: single-line {{…}}
							const spanRegex = /{{(?=((?:[:=](?:"[\w,\-()#%. ]*"|[\w\-()#%.]*)|[^"':={}\s]*)*))\1 *|}}/g;
							let match;
							let blockCount = 0;
							while ((match = spanRegex.exec(line)) !== null) {
								if (match[0].startsWith("{{")) {
									blockCount += 1;
								} else {
									blockCount -= 1;
								}
								if (blockCount < 0) {
									blockCount = 0;
									continue;
								}
								tokens.push({
									line: lineNumber,
									from: match.index,
									to: match.index + match[0].length,
									type: "inline-block",
								});
							}
						} else if (line.trimLeft().startsWith("{{") || line.trimLeft().startsWith("}}")) {
							// Highlight block divs {{\n Content \n}}
							let endCh = line.length + 1;

							const match = line.match(
								/^ *{{(?=((?:[:=](?:"[\w,\-()#%. ]*"|[\w\-()#%.]*)|[^"':={}\s]*)*))\1 *$|^ *}}$/,
							);
							if (match) endCh = match.index + match[0].length;
							codeMirror?.markText(
								{ line: lineNumber, ch: 0 },
								{ line: lineNumber, ch: endCh },
								{ className: "block" },
							);
						}

						// Emojis
						if (line.match(/:[^\s:]+:/g)) {
							let startIndex = line.indexOf(":");
							const emojiRegex = /:[^\s:]+:/gy;

							while (startIndex >= 0) {
								emojiRegex.lastIndex = startIndex;
								const match = emojiRegex.exec(line);
								if (match) {
									let tokens = Markdown.marked.lexer(match[0]);
									tokens = tokens[0].tokens.filter((t) => t.type == "emoji");
									if (!tokens.length) return;

									const startPos = { line: lineNumber, ch: match.index };
									const endPos = { line: lineNumber, ch: match.index + match[0].length };

									// Iterate over conflicting marks and clear them
									const marks = codeMirror?.findMarks(startPos, endPos);
									marks.forEach(function (marker) {
										if (!marker.__isFold) marker.clear();
									});
									codeMirror?.markText(startPos, endPos, { className: "emoji" });
								}
								startIndex = line.indexOf(":", Math.max(startIndex + 1, emojiRegex.lastIndex));
							}
						}
					}
				});
			});
		}
	},

	brewJump: function (targetPage = this.props.currentEditorCursorPageNum, smooth = true) {
		if (!window || !this.isText() || isJumping) return;

		// Get current brewRenderer scroll position and calculate target position
		const brewRenderer = window.frames["BrewRenderer"].contentDocument.getElementsByClassName("brewRenderer")[0];
		const currentPos = brewRenderer.scrollTop;
		const targetPos = window.frames["BrewRenderer"].contentDocument
			.getElementById(`p${targetPage}`)
			.getBoundingClientRect().top;

		let scrollingTimeout;
		const checkIfScrollComplete = () => {
			// Prevent interrupting a scroll in progress if user clicks multiple times
			clearTimeout(scrollingTimeout); // Reset the timer every time a scroll event occurs
			scrollingTimeout = setTimeout(() => {
				isJumping = false;
				brewRenderer.removeEventListener("scroll", checkIfScrollComplete);
			}, 150); // If 150 ms pass without a brewRenderer scroll event, assume scrolling is done
		};

		isJumping = true;
		checkIfScrollComplete();
		brewRenderer.addEventListener("scroll", checkIfScrollComplete);

		if (smooth) {
			const bouncePos = targetPos >= 0 ? -30 : 30; //Do a little bounce before scrolling
			const bounceDelay = 100;
			const scrollDelay = 500;

			if (!this.throttleBrewMove) {
				this.throttleBrewMove = _.throttle(
					(currentPos, bouncePos, targetPos) => {
						brewRenderer.scrollTo({ top: currentPos + bouncePos, behavior: "smooth" });
						setTimeout(() => {
							brewRenderer.scrollTo({ top: currentPos + targetPos, behavior: "smooth", block: "start" });
						}, bounceDelay);
					},
					scrollDelay,
					{ leading: true, trailing: false },
				);
			}
			this.throttleBrewMove(currentPos, bouncePos, targetPos);
		} else {
			brewRenderer.scrollTo({ top: currentPos + targetPos, behavior: "instant", block: "start" });
		}
	},

	sourceJump: function (targetPage = this.props.currentBrewRendererPageNum, smooth = true) {
		if (!this.isText() || isJumping) return;

		const textSplit = this.props.renderer == "V3" ? PAGEBREAK_REGEX_V3 : /\\page/;
		const textString = this.props.brew.text
			.split(textSplit)
			.slice(0, targetPage - 1)
			.join(textSplit);
		const targetLine = textString.match("\n") ? textString.split("\n").length - 1 : -1;

		let currentY = this.codeEditor.current.codeMirror?.getScrollInfo().top;
		let targetY = this.codeEditor.current.codeMirror?.heightAtLine(targetLine, "local", true);

		let scrollingTimeout;
		const checkIfScrollComplete = () => {
			// Prevent interrupting a scroll in progress if user clicks multiple times
			clearTimeout(scrollingTimeout); // Reset the timer every time a scroll event occurs
			scrollingTimeout = setTimeout(() => {
				isJumping = false;
				this.codeEditor.current.codeMirror?.off("scroll", checkIfScrollComplete);
			}, 150); // If 150 ms pass without a scroll event, assume scrolling is done
		};

		isJumping = true;
		checkIfScrollComplete();
		if (this.codeEditor.current?.codeMirror) {
			this.codeEditor.current.codeMirror?.on("scroll", checkIfScrollComplete);
		}

		if (smooth) {
			//Scroll 1/10 of the way every 10ms until 1px off.
			const incrementalScroll = setInterval(() => {
				currentY += (targetY - currentY) / 10;
				this.codeEditor.current.codeMirror?.scrollTo(null, currentY);

				// Update target: target height is not accurate until within +-10 lines of the visible window
				if (Math.abs(targetY - currentY > 100))
					targetY = this.codeEditor.current.codeMirror?.heightAtLine(targetLine, "local", true);

				// End when close enough
				if (Math.abs(targetY - currentY) < 1) {
					this.codeEditor.current.codeMirror?.scrollTo(null, targetY); // Scroll any remaining difference
					this.codeEditor.current.setCursorPosition({ line: targetLine + 1, ch: 0 });
					this.codeEditor.current.codeMirror?.addLineClass(targetLine + 1, "wrap", "sourceMoveFlash");
					clearInterval(incrementalScroll);
				}
			}, 10);
		} else {
			this.codeEditor.current.codeMirror?.scrollTo(null, targetY); // Scroll any remaining difference
			this.codeEditor.current.setCursorPosition({ line: targetLine + 1, ch: 0 });
			this.codeEditor.current.codeMirror?.addLineClass(targetLine + 1, "wrap", "sourceMoveFlash");
		}
	},

	//Called when there are changes to the editor's dimensions
	update: function () {},

	updateEditorTheme: function (newTheme) {
		window.localStorage.setItem(EDITOR_THEME_KEY, newTheme);
		this.setState({
			editorTheme: newTheme,
		});
	},

	//Called by CodeEditor after document switch, so Snippetbar can refresh UndoHistory
	rerenderParent: function () {
		this.forceUpdate();
	},

	renderEditor: function () {
		if (this.isText()) {
			return (
				<>
					<CodeEditor
						key="codeEditor"
						ref={this.codeEditor}
						language="gfm"
						tab="brewText"
						view={this.state.view}
						value={this.props.brew.text}
						onChange={this.props.onBrewChange("text")}
						editorTheme={this.state.editorTheme}
						rerenderParent={this.rerenderParent}
						style={{ height: `calc(100% - ${this.state.snippetBarHeight}px)` }}
					/>
				</>
			);
		}
		if (this.isStyle()) {
			return (
				<>
					<CodeEditor
						key="codeEditor"
						ref={this.codeEditor}
						language="css"
						tab="brewStyles"
						view={this.state.view}
						value={this.props.brew.style ?? DEFAULT_STYLE_TEXT}
						onChange={this.props.onBrewChange("style")}
						enableFolding={true}
						editorTheme={this.state.editorTheme}
						rerenderParent={this.rerenderParent}
						style={{ height: `calc(100% - ${this.state.snippetBarHeight}px)` }}
					/>
				</>
			);
		}
		if (this.isMeta()) {
			return (
				<>
					<CodeEditor
						key="codeEditor"
						view={this.state.view}
						style={{ display: "none" }}
						rerenderParent={this.rerenderParent}
					/>
					<MetadataEditor
						metadata={this.props.brew}
						themeBundle={this.props.themeBundle}
						onChange={this.props.onBrewChange("metadata")}
						reportError={this.props.reportError}
						userThemes={this.props.userThemes}
					/>
				</>
			);
		}
		if (this.isSnip()) {
			if (!this.props.brew.snippets) {
				this.props.brew.snippets = DEFAULT_SNIPPET_TEXT;
			}
			return (
				<>
					<CodeEditor
						key="codeEditor"
						ref={this.codeEditor}
						language="gfm"
						tab="brewSnippets"
						view={this.state.view}
						value={this.props.brew.snippets}
						onChange={this.props.onBrewChange("snippets")}
						enableFolding={true}
						editorTheme={this.state.editorTheme}
						rerenderParent={this.rerenderParent}
						style={{ height: `calc(100% -${this.state.snippetBarHeight}px)` }}
					/>
				</>
			);
		}
	},

	redo: function () {
		return this.codeEditor.current?.redo();
	},

	historySize: function () {
		return this.codeEditor.current?.historySize();
	},

	undo: function () {
		return this.codeEditor.current?.undo();
	},

	foldCode: function () {
		return this.codeEditor.current?.foldAllCode();
	},

	unfoldCode: function () {
		return this.codeEditor.current?.unfoldAllCode();
	},

	render: function () {
		return (
			<div className="editor" ref={this.editor}>
				<SnippetBar
					brew={this.props.brew}
					view={this.state.view}
					onViewChange={this.handleViewChange}
					onInject={this.handleInject}
					showEditButtons={this.props.showEditButtons}
					renderer={this.props.renderer}
					theme={this.props.brew.theme}
					undo={this.undo}
					redo={this.redo}
					foldCode={this.foldCode}
					unfoldCode={this.unfoldCode}
					historySize={this.historySize()}
					currentEditorTheme={this.state.editorTheme}
					updateEditorTheme={this.updateEditorTheme}
					themeBundle={this.props.themeBundle}
					cursorPos={this.codeEditor.current?.getCursorPosition() || {}}
					updateBrew={this.props.updateBrew}
				/>

				{this.renderEditor()}
			</div>
		);
	},
});

export default Editor;