import { Editor } from 'editor/editor'
import { EditorNode } from 'editor/types'
import { markNames, setAuxiliaryToolbar } from 'editor/utils'

const hex = (x: string) => ("0" + parseInt(x).toString(16)).slice(-2)
// https://stackoverflow.com/a/3627747
// TODO: cambiar por una solución más copada
function rgbToHex (rgb: string): string {
	const matches = rgb.match(/^rgb\((\d+),\s*(\d+),\s*(\d+)\)$/)
	if (!matches) throw new Error('no pude parsear el rgb()')
	return "#" + hex(matches[1]) + hex(matches[2]) + hex(matches[3])
}

export const mark: EditorNode = {
	selector: 'mark',
	allowedChildren: [...markNames.filter(n => n !== 'mark'), 'text'],
	handleEmpty: 'remove',
	create: () => document.createElement('mark'),
	onClick (editor, el) {
		if (!(el instanceof HTMLElement))
			throw new Error('oh no')
		el.dataset.editorSelected = ''
		editor.toolbar.auxiliary.mark.colorEl.value
			= el.style.backgroundColor
				? rgbToHex(el.style.backgroundColor)
				: '#f206f9'
		setAuxiliaryToolbar(editor, editor.toolbar.auxiliary.mark.parentEl)
	},
}

export function setupAuxiliaryToolbar (editor: Editor): void {
	editor.toolbar.auxiliary.mark.colorEl.addEventListener('input', event => {
		const color = editor.toolbar.auxiliary.mark.colorEl.value
		const selectedEl = editor.contentEl
			.querySelector<HTMLElement>('mark[data-editor-selected]')
		if (!selectedEl)
			throw new Error('No pude encontrar el mark para setear el color')
		
		selectedEl.style.backgroundColor = color
	})
	editor.toolbar.auxiliary.mark.colorEl.addEventListener('keydown', event => {
		if (event.keyCode == 13) event.preventDefault()
	})
}