import FroalaEditor from "froala-editor";

import { getLanguageMenuHtml, getRichTextConfig, parseClassNames } from "./helpers";
import { languages } from "./languages";

const API_URL = process.env.GRIDDO_API_URL || process.env.REACT_APP_API_ENDPOINT;

// Lazy getters para evitar acceder a schemas antes de que carguen
const getRichTextConfigLazy = () => getRichTextConfig();
const getParagraphStyles = () => {
	const config = getRichTextConfigLazy();
	return config?.paragraphStyles ? parseClassNames(config.paragraphStyles) : undefined;
};
const getTableStyles = () => {
	const config = getRichTextConfigLazy();
	return config?.tableStyles ? parseClassNames(config.tableStyles) : undefined;
};
const getTableCellStyles = () => {
	const config = getRichTextConfigLazy();
	return config?.tableCellStyles ? parseClassNames(config.tableCellStyles) : undefined;
};

const getMiscButtons = () => {
	const paragraphStyles = getParagraphStyles();
	return [
		"underline",
		"textColor",
		"formatOLSimple",
		"specialCharacters",
		"insertHR",
		"alignLeft",
		"alignRight",
		"alignJustify",
		"outdent",
		"indent",
		"undo",
		"redo",
		"selectAll",
		"html",
		"insertTable",
		paragraphStyles ? "paragraphStyle" : undefined,
		"langDropdown",
	];
};

const getButtonsFull = () => ({
	moreText: {
		buttons: ["bold", "italic", "paragraphFormat", "formatUL", "quote", "alignCenter"],
		buttonsVisible: 6,
	},
	moreText2: {
		buttons: ["insertLink", "insertImage", "insertVideo", "clearFormatting", "fullscreen"],
		buttonsVisible: 5,
	},
	moreMisc: {
		buttons: getMiscButtons(),
		align: "right",
		buttonsVisible: 0,
	},
});

const getButtons = () => {
	const paragraphStyles = getParagraphStyles();
	return [
		[
			"bold",
			"italic",
			"formatUL",
			"insertLink",
			"paragraphFormat",
			paragraphStyles ? "paragraphStyle" : undefined,
			"langDropdown",
		],
	];
};

const getInlineToolbar = () => ["langDropdown", "undo", "redo"];

const getWysiwygConfig = () => ({
	key: process.env.GRIDDO_FROALA_KEY || process.env.REACT_APP_FROALA_KEY,
	// pastePlain: false,
	pasteDeniedAttrs: ["class", "id", "style", "dir"],
	listAdvancedTypes: false,
	attribution: false,
	paragraphFormat: {
		N: "Normal",
		H1: "Heading 1",
		H2: "Heading 2",
		H3: "Heading 3",
		H4: "Heading 4",
	},
	imageEditButtons: [
		"imageReplace",
		"imageAlign",
		"imageCaption",
		"imageRemove",
		"|",
		"imageLink",
		"linkOpen",
		"linkEdit",
		"linkRemove",
		"-",
		"imageDisplay",
		"imageAlt",
	],
	imageResize: false,
	linkEditButtons: ["linkOpen", "linkEdit", "linkRemove"],
	videoInsertButtons: ["videoBack", "|", "videoByURL", "videoEmbed"],
	imageAllowedTypes: ["jpeg", "jpg", "png", "svg"],
	imageMaxSize: 20 * 1024 * 1024,
	imageManagerLoadURL: `${API_URL}/images/wysiwyg`,
	requestWithCORS: false,
	paragraphStyles: getParagraphStyles(),
	tableStyles: getTableStyles(),
	tableCellStyles: getTableCellStyles(),
	imageUploadRemoteUrls: false,
});

FroalaEditor.DefineIcon("langIcon", {
	PATH: "m12.87 15.07-2.54-2.51.03-.03A17.52 17.52 0 0 0 14.07 6H17V4h-7V2H8v2H1v1.99h11.17C11.5 7.92 10.44 9.75 9 11.35 8.07 10.32 7.3 9.19 6.69 8h-2c.73 1.63 1.73 3.17 2.98 4.56l-5.09 5.02L4 19l5-5 3.11 3.11.76-2.04ZM18.5 10h-2L12 22h2l1.12-3h4.75L21 22h2l-4.5-12Zm-2.62 7 1.62-4.33L19.12 17h-3.24Z",
	template: "svg",
});

Object.assign(FroalaEditor.POPUP_TEMPLATES, {
	"image.uploading": '[_CUSTOM_LAYER_]',
	"image.uploadError": '[_CUSTOM_LAYER_]'
});

FroalaEditor.RegisterCommand("langDropdown", {
	title: "Language",
	type: "dropdown",
	icon: "langIcon",
	undo: true,
	focus: true,
	refreshAfterCallback: true,
	html: () => {
		const config = getRichTextConfigLazy();
		return getLanguageMenuHtml(config?.editorLangs ? config.editorLangs : languages);
	},
	callback: function (_cmd: any, val: string) {
		const html = this.selection.text();
		if (val !== "") {
			this.html.insert(`<span lang="${val}" translate="no">${html}</span>`, true);
		} else {
			this.html.insert(html, true);
		}
	},
});

export {
	getButtonsFull as buttonsFull,
	getButtons as buttons,
	getInlineToolbar as inlineToolbar,
	getWysiwygConfig as wysiwygConfig,
};
