class IndexPage {
	
	constructor() {
		const editorHeaderName = '\t\t______               _ _ _           ___ _____  ______               \n\t\t|  _  \\             (_) | |         |_  /  ___| |  _  \\              \n\t\t| | | |___   ___ _____| | | __ _      | \\ `--.  | | | |___   ___ ___ \n\t\t| | | / _ \\ / __|_  / | | |/ _` |     | |`--. \\ | | | / _ \\ / __/ __|\n\t\t| |/ / (_) | (__ / /| | | | (_| | /\\__/ /\\__/ / | |/ / (_) | (__\\__ \\\n\t\t|___/ \\___/ \\___/___|_|_|_|\\__,_| \\____/\\____/  |___/ \\___/ \\___|___/\n';
		const version = `\t\t\t\t\t\t\t\t\tVersion: ${App.Version}\n\n`;
		this.editorHeaderLogo = '      **************************************                             \n      ******************************************                         \n      *********************************************                      \n      ************************************************                   \n      **************************************************                 \n      ****************************************************               \n      *****************************************************              \n      *************************                  ************            \n      ***********************                  ***************           \n      **********************                 ******************          \n      ********************                  ********************         \n      ******************                  **********************         \n      **************************        *************************        \n      ************************        ****************************       \n      **********************         *****************************       \n      *********************         ******************************       \n      *******************                 *************************      \n      *****************                 ***************************      \n      ***************                 *****************************      \n      *************                  ******************************      \n      **********************       *******************************       \n      ********************       *********************************       \n      *******************      ***********************************       \n      ******************      ***********************************        \n      *****************     *************************************        \n      ****************    **************************************         \n      ***************   ***************************************          \n      **************   ***************************************           \n      *************  ****************************************            \n      ************ ****************************************              \n      ****************************************************               \n      **************************************************                 \n      ************************************************                   \n      *********************************************                      \n      ******************************************                         \n      **************************************                             ';
		this.editorHeader = `${editorHeaderName}${version}`;
	}
	
	start() {
		this.codeMirrorEditor = CodeMirror(DOM.get('#editor').get(), {
			[App.CodeMirrorProperties.Value]:						this.editorHeader,
			[App.CodeMirrorProperties.Theme]:						'darcula',
			[App.CodeMirrorProperties.Readonly]:				true,
			[App.CodeMirrorProperties.LineNumbers]:			true,
			[App.CodeMirrorProperties.ScrollbarStyle]:	'null'
		}).customOnBlur((cm, e) => {}).customHasFocus(() => true).customEnsureCursorVisible((cm) => {});

		this.codeMirrorEditor.cmFocus();

		return this;
	}

	drawMatrix(matrixLine, indentation, speed, callback) {
		const editor = this.codeMirrorEditor;
		const matrix = matrixLine.split('\n');
		const emptyMatrix = matrix.map((line) => CDUtils.repeat(' ', line.length));
		const tabs = CDUtils.repeat('\t', indentation);

		const lineCount = editor.cmLineCount();
		const firstLine = lineCount;

		let matrixSymbols = [];

		for(let i = 0; i < matrix.length; i++)
			for(let j = 0; j < matrix[i].length; j++)
				matrixSymbols.push({ line: firstLine + i, ch: j + indentation, symbol: matrix[i].charAt(j) });

		matrixSymbols = CDUtils.arrayShuffle(matrixSymbols);

		editor.cmSetValue(editor.cmGetValue() + '\n' + tabs + emptyMatrix.join('\n'+tabs));

		let index = 0;

		const drawingInterval = setInterval(() => {
			if(index < matrixSymbols.length) {
				const symbol = matrixSymbols[index];
				index++;
				editor.replaceRange(symbol.symbol, { line: symbol.line, ch: symbol.ch }, { line: symbol.line, ch: symbol.ch+1 });
			} else {
				if(callback)
					callback();
				clearInterval(drawingInterval);
			}
		}, speed);

		return this;
	}

	simulateKeyboardInput(text, lt, ht, callback) {
		let index = 0;

		const editor = this.codeMirrorEditor;

		const typeCharacter = () => {
			if (index < text.length) {
				const char = text.charAt(index);
				index++;
				editor.cmSetValue(editor.cmGetValue() + char);
				editor.setCursor({ line: editor.cmLineCount() - 1, ch: editor.cmGetLine(editor.cmLineCount() - 1).length }, { scroll: false });
				const nextCharDelay = CDUtils.randInt(lt, ht);
				setTimeout(typeCharacter, nextCharDelay);
			} else {
				if(callback)
					callback();
			}
		};

		typeCharacter();

		return this;
	}
}

window_.on('load', (e) => {
	const scheduledUpdateDate = new Date();
	scheduledUpdateDate.setUTCHours(0, 0, 0, 0);
	scheduledUpdateDate.setUTCDate(scheduledUpdateDate.getUTCDate() + 1);

	const separator = '\n\t\t\t\t';
	const loggedInAs = Login ? `${separator}Logged in as:\t\t\t\t${Login}` : '';
	const lastUpdateText = `Last sources update:\t\t${CDUtils.dateFormatUTC(LastUpdateTime, 3, 'Y-M-D H:I:S')}`;
	const nextScheduledUpdateText = `Next scheduled update:\t\t${CDUtils.dateFormatUTC(scheduledUpdateDate, 3, 'Y-M-D H:I:S')}`;
	const sourcesAuthorsText = `Sources authors:\t\t\tDoczilla Team`;
	const dzJsDocsAuthor = `'Doczilla JS Docs' author:\tOleg Karataev (CrazyDoctor)`;
	const infoMessage = `\n${loggedInAs}${separator}${lastUpdateText}${separator}${nextScheduledUpdateText}${separator}${sourcesAuthorsText}${separator}${dzJsDocsAuthor}`;
	
	const page = window.page = new IndexPage().start();
	page.drawMatrix(page.editorHeaderLogo, 3, 0);
	page.simulateKeyboardInput(infoMessage, 40, 50);
});