/**
 * [[include:plugins/format-block/README.md]]
 * @packageDocumentation
 * @module plugins/format-block
 */

import type {
	HTMLTagNames,
	IControlType,
	IDictionary,
	IJodit
} from 'jodit/types';
import { Config } from 'jodit/config';
import { Dom } from 'jodit/modules/';
// import { memorizeExec } from 'jodit/core/helpers';
import { pluginSystem } from 'jodit/core/global';
// import { Icon } from 'jodit/core/ui/icon';

// Style
import './format-block.less';

// Icon.set('paragraph', require('./paragraph.svg'));

type formatBlockType = 'p' | 'h1' | 'h2' | 'h3' | 'h4' | 'h5' | 'h6';
const formatBlockChildList = {
	p: 'body',
	h1: 'Header 1',
	h2: 'Header 2',
	h3: 'Header 3',
	h4: 'Header 4',
	h5: 'Header 5',
	h6: 'Header 6'
	// blockquote: 'Quote',
	// pre: 'Code'
};

Config.prototype.controls.paragraph = {
	command: 'formatBlock',
	update(button, editor: IJodit): boolean {
		const control = button.control,
			current = editor.s.current();

		const currentBox =
				Dom.closest(current, Dom.isBlock, editor.editor) ||
				editor.editor,
			currentValue = currentBox.nodeName.toLowerCase() as formatBlockType;

		// 현재 selection의 부모 박스의 태그를 검사
		// 부모박스의 태그가 formatBlockType중 하나면 버튼 텍스트 업데이트
		if (Object.keys(formatBlockChildList).includes(currentValue))
			button.state.text = formatBlockChildList[currentValue];

		if (current && editor.o.textIcons) {
			const currentBox =
					Dom.closest(current, Dom.isBlock, editor.editor) ||
					editor.editor,
				currentValue = currentBox.nodeName.toLowerCase(),
				list = control.list as IDictionary;

			if (
				button &&
				control.data &&
				control.data.currentValue !== currentValue &&
				list &&
				list[currentValue]
			) {
				if (editor.o.textIcons) {
					button.state.text = currentValue;
				} else {
					button.state.icon.name = currentValue;
				}

				control.data.currentValue = currentValue;
			}
		}

		return false;
	},

	text: 'body',
	name: 'block_type',

	// exec: memorizeExec,

	data: {
		currentValue: 'left'
	},

	list: formatBlockChildList,

	isChildActive: (editor: IJodit, control: IControlType): boolean => {
		const current = editor.s.current();

		if (current) {
			const currentBox = Dom.closest(current, Dom.isBlock, editor.editor);

			return Boolean(
				currentBox &&
					currentBox !== editor.editor &&
					control.args !== undefined &&
					currentBox.nodeName.toLowerCase() === control.args[0]
			);
		}

		return false;
	},

	isActive: (editor: IJodit, control: IControlType): boolean => {
		const current = editor.s.current();

		if (current) {
			const currentBpx = Dom.closest(current, Dom.isBlock, editor.editor);

			return Boolean(
				currentBpx &&
					currentBpx !== editor.editor &&
					control.list !== undefined &&
					!Dom.isTag(currentBpx, 'p') &&
					((control.list as any)[
						currentBpx.nodeName.toLowerCase()
					] as any) !== undefined
			);
		}

		return false;
	},

	childTemplate: (e: IJodit, key: string, value: string) =>
		`<${key} style="margin:0;padding:0;text-align: left"><span>${e.i18n(
			value
		)}</span></${key}>`,

	tooltip: 'Insert format block'
} as IControlType;

/**
 * Process command - `formatblock`
 */
export function formatBlock(editor: IJodit): void {
	editor.registerButton({
		name: 'paragraph',
		group: 'font'
	});

	editor.registerCommand(
		'formatblock',
		(command: string, second: string, third: string): false | void => {
			editor.s.applyStyle(undefined, {
				element: third as HTMLTagNames
			});

			editor.synchronizeValues();

			return false;
		}
	);
}

pluginSystem.add('formatBlock', formatBlock);