/**
 * [[include:plugins/bold/README.md]]
 * @packageDocumentation
 * @module plugins/bold
 */

import type { IDictionary, IJodit, IControlType, CanUndef } from 'jodit/types';
import { Config } from 'jodit/config';
import { isArray } from 'jodit/core/helpers';
import { pluginSystem } from 'jodit/core/global';
import { Icon } from 'jodit/core/ui/icon';

Config.prototype.controls.subscript = {
	tags: ['sub'],
	tooltip: 'subscript'
} as IControlType;

Config.prototype.controls.superscript = {
	tags: ['sup'],
	tooltip: 'superscript'
} as IControlType;

Config.prototype.controls.bold = {
	tagRegExp: /^(strong|b)$/i,
	tags: ['strong', 'b'],
	css: {
		'font-weight': ['bold', '700']
	},
	tooltip: 'Bold'
} as IControlType;

Config.prototype.controls.italic = {
	tagRegExp: /^(em|i)$/i,
	tags: ['em', 'i'],
	css: {
		'font-style': 'italic'
	},
	tooltip: 'Italic'
} as IControlType;

Config.prototype.controls.underline = {
	tagRegExp: /^(u)$/i,
	tags: ['u'],
	css: {
		'text-decoration-line': 'underline'
	},
	tooltip: 'Underline'
} as IControlType;

Config.prototype.controls.strikethrough = {
	tagRegExp: /^(s)$/i,
	tags: ['s'],
	css: {
		'text-decoration-line': 'line-through'
	},
	tooltip: 'Strike through'
} as IControlType;

/**
 * Adds `bold`,` strikethrough`, `underline` and` italic` buttons to Jodit
 */
export function bold(editor: IJodit): void {
	const callBack = (command: string): false => {
		const control: IControlType = Config.defaultOptions.controls[
				command
			] as IControlType,
			cssOptions:
				| IDictionary<string | string[]>
				| IDictionary<(editor: IJodit, value: string) => boolean> = {
				...control.css
			};

		let cssRules: CanUndef<IDictionary<string>>;

		Object.keys(cssOptions).forEach((key: string) => {
			if (!cssRules) {
				cssRules = {};
			}

			cssRules[key] = isArray(cssOptions[key])
				? (cssOptions[key] as any)[0]
				: cssOptions[key];
		});

		editor.s.applyStyle(cssRules, {
			element: control.tags ? control.tags[0] : undefined
		});

		editor.synchronizeValues();

		return false;
	};

	['bold', 'italic', 'underline', 'strikethrough'].forEach(name => {
		editor.registerButton({
			name,
			group: 'font-style'
		});
	});

	['superscript', 'subscript'].forEach(name => {
		editor.registerButton({
			name,
			group: 'script'
		});
	});

	editor
		.registerCommand('bold', {
			exec: callBack,
			hotkeys: ['ctrl+b', 'cmd+b']
		})

		.registerCommand('italic', {
			exec: callBack,
			hotkeys: ['ctrl+i', 'cmd+i']
		})

		.registerCommand('underline', {
			exec: callBack,
			hotkeys: ['ctrl+u', 'cmd+u']
		})

		.registerCommand('strikethrough', {
			exec: callBack
		});
}

pluginSystem.add('bold', bold);

Icon.set('bold', require('./icons/bold.svg'))
	.set('italic', require('./icons/italic.svg'))
	.set('strikethrough', require('./icons/strikethrough.svg'))
	.set('subscript', require('./icons/subscript.svg'))
	.set('superscript', require('./icons/superscript.svg'))
	.set('underline', require('./icons/underline.svg'));