import type { VNode } from 'vue';

export interface WysiwygUploadArgs {
	serverPath: string;
	fileFieldName?: string;
	data?: { name: string; value: string }[];
	headers?: Record<string, string>;
	xhrFields?: { withCredentials?: boolean } & Record<string, unknown>;
	urlPropertyName?: string;
	statusPropertyName?: string;
	success?: (data: any, helpers: { closeModal: () => void; insertImage: (url: string) => void }) => void;
	error?: (err: any) => void;
	imageWidthModalEdit?: boolean;
}

export type WysiwygLang = 'sk' | 'cs' | 'de' | 'en' | 'pl' | 'it' | 'hu';

export interface WysiwygTranslations {
	viewHTML: string;
	formatting: string;
	p: string;
	blockquote: string;
	code: string;
	header: string;
	bold: string;
	italic: string;
	strikethrough: string;
	underline: string;
	strong: string;
	em: string;
	del: string;
	unorderedList: string;
	orderedList: string;
	insertImage: string;
	insertVideo: string;
	link: string;
	createLink: string;
	unlink: string;
	justifyLeft: string;
	justifyCenter: string;
	justifyRight: string;
	justifyFull: string;
	horizontalRule: string;
	removeformat: string;
	fullscreen: string;
	close: string;
	submit: string;
	reset: string;
	required: string;
	description: string;
	title: string;
	text: string;
	url: string;
	foreColor: string;
	backColor: string;
	foreColorRemove: string;
	backColorRemove: string;
	customColor: string;
	customSize: string;
	upload: string;
	file: string;
	uploadImage: string;
	uploadFile: string;
	uploadError: string;
	fontsize: string;
	lineheight: string;
	image: string;
	width: string;
	historyUndo: string;
	historyRedo: string;
	embed: string;
	embedError: string;
	noembed: string;
}

export type WysiwygFieldType = 'text' | 'url' | 'color' | 'file' | 'checkbox' | 'select' | 'number';

export interface WysiwygModalField {
	label?: string;
	value?: string | boolean;
	type?: WysiwygFieldType;
	required?: boolean;
	accept?: string;
	placeholder?: string;
	options?: { value: string; label: string }[];
	forceCss?: boolean;
}

export type WysiwygModalFields = Record<string, WysiwygModalField>;

export type WysiwygModalValues = Record<string, string | boolean | File>;

export interface WysiwygModalDescriptor {
	title: string;
	fields: WysiwygModalFields;
	submitLabel?: string;
	cancelLabel?: string;
	progressEnabled?: boolean;
	beforeSubmit?: (values: WysiwygModalValues) => boolean | string | Promise<boolean | string>;
}

export interface WysiwygBtnGroup {
	id?: string;
	buttons: string[];
}

export interface WysiwygButtonDef {
	id: string;
	icon?: string;
	text?: string;
	titleKey?: keyof WysiwygTranslations;
	titleText?: string;
	cssClass?: string;
	isDropdown?: boolean;
	dropdownItems?: WysiwygDropdownItem[];
	exec?: (ctx: WysiwygCommandContext) => void | Promise<void>;
	isActive?: (ctx: WysiwygCommandContext) => boolean;
	requiresFocus?: boolean;
	disableWhileHtml?: boolean;
	renderBtnContent?: () => VNode;
}

export interface WysiwygDropdownItem {
	id: string;
	label?: string;
	style?: string;
	exec: (ctx: WysiwygCommandContext) => void | Promise<void>;
	isActive?: (ctx: WysiwygCommandContext) => boolean;
}

export interface WysiwygCommandContext {
	editor: HTMLElement;
	getHtml: () => string;
	setHtml: (html: string) => void;
	saveRange: () => void;
	restoreRange: () => void;
	getRange: () => Range | null;
	emit: (event: string, payload?: unknown) => void;
	focus: () => void;
	exec: (command: string, value?: string) => boolean;
	openModal: (descriptor: WysiwygModalDescriptor) => Promise<WysiwygModalValues | null>;
	insertImage: (url: string, alt?: string, width?: string) => void;
	insertHtmlAtCaret: (html: string | Node) => void;
	wrapSelectionInStyle: (style: Record<string, string>) => void;
	getActiveImage: () => HTMLImageElement | null;
	setActiveImage: (img: HTMLImageElement | null) => void;
	getTranslations: () => WysiwygTranslations;
	getUploadArgs: () => WysiwygUploadArgs | null;
	getFileManagerEnabled: () => boolean;
	openFileManager: (kind: 'image' | 'file') => Promise<{ url: string } | null>;
	toggleHtmlView: () => void;
	toggleFullscreen: () => void;
	isHtmlView: () => boolean;
	isFullscreen: () => boolean;
	getItemId: () => number | null;
	getOptions: () => WysiwygOptions;
	notifyChange: () => void;
}

export interface WysiwygOptions {
	colors: string[];
	fontSizes: string[];
	lineHeights: string[];
	formattingOptions: { tag: string; labelKey: keyof WysiwygTranslations }[];
	imageWidthModalEdit: boolean;
	imageResize: { minSize: number; step: number };
}