import { StacksEditor, StacksEditorOptions } from '@stackoverflow/stacks-editor';
import { buttonsMap, modeButtonsToDisable } from './model/model';
import { debounce } from './utils/debounce';
import editorCss from 'bundle-text:./styles/docs-markdown-editor.scss';
import { handleToolTip } from './utils/tooltip';

export class DocsMarkdownEditor extends HTMLElement {
	content: string;
	mode: string;
	toggle: HTMLElement;
	onToggleClick: EventListener;
	menu: HTMLElement;
	onMenuClick: EventListener;
	editor: StacksEditor;
	connectedCallback(): void {
		this.innerHTML = `<div id="docs-markdown-editor"></div>`;
		const style = document.createElement('style');
		style.textContent = editorCss as string;
		document.getElementsByTagName('docs-markdown-editor')[0].prepend(style);
		this.mode = this.getAttribute('mode');
		this.content = this.getAttribute('content') ?? '';
		this.createEditorIfNotPresent();
		this.buttonsToDisableChanged(this);
		this.editor.content = this.content;
		this.addEventListener('keyup', _e => {
			this.setAttribute('content', this.editor.content);
		});
	}
	disconnectedCallback(): void {
		this.toggle.removeEventListener('click', this.onToggleClick);
		this.menu.removeEventListener('click', this.onMenuClick);
	}
	buttonsToDisableChanged(that: {
		createEditorIfNotPresent: () => void;
		addToolTipsToButtons: () => void;
		mode: string;
		editor: StacksEditor;
	}) {
		if (!that.editor) {
			that.createEditorIfNotPresent();
		}
		const buttons: string[] = (modeButtonsToDisable[that.mode] as string).split(',');
		buttons.forEach(btn => {
			const el = document.getElementsByClassName(buttonsMap.get(btn))[0] as HTMLElement;
			if (el) {
				el.remove();
			}
		});
		that.addToolTipsToButtons();
	}
	createEditorIfNotPresent() {
		if (!this.editor) {
			const options: StacksEditorOptions = {
				editorHelpLink: 'https://microsoft.com',
				parserFeatures: {
					tables: false
				}
			};
			const element: HTMLElement = document.querySelector('#docs-markdown-editor');
			this.editor = new StacksEditor(element, '', options);
			const toggleElement = document.querySelector('[title="Toggle Markdown editing"]');
			if (toggleElement) {
				this.toggle = toggleElement as HTMLElement;
				this.toggle.addEventListener('click', debounce(this.buttonsToDisableChanged, this, 1));
				const menuElement = document.querySelector('.js-editor-menu');
				if (menuElement) {
					this.menu = menuElement as HTMLElement;
					this.onMenuClick = () => {
						this.dispatchEvent(new Event('keyup'));
					};
					this.menu.addEventListener('click', this.onMenuClick);
				}
			}
		}
	}
	addToolTipsToButtons() {
		const helpId = 'Help';
		const helpElement = document.querySelector('[title="Help"]');
		if (helpElement) {
			helpElement.setAttribute('id', helpId.toLowerCase());
			handleToolTip(helpElement, helpId);
		}
		buttonsMap.forEach((value: string, key: string) => {
			const element = document.querySelector(`.${value}`);
			if (element) {
				const tooltip = key.toLowerCase().replace(' ', '-');
				element.setAttribute('id', tooltip);
				handleToolTip(element, tooltip);
			}
		});
	}
}
customElements.define('docs-markdown-editor', DocsMarkdownEditor);
