<template>
	<div
		:class="[
			'wcc-rich-text-editor-container',
			{ 'wcc-disabled': this.disabled },
		]"
	>
		<textarea
			:id="editorId"
			:value="editorContent"
			class="wp-editor-area wcc-rich-text-editor wcc-form-control"
			:disabled="disabled"
			@input="listener"
			rows="5"
		/>
	</div>
</template>

<script>
import md5 from "md5";

export default {
	name: "Editor",
	props: {
		value: { type: String, default: "" },
		id: { type: String, default: "wcc-richtext-editor" },
		disabled: { type: Boolean, default: false },
		language: { type: String, default: "en" },
		height: { type: String, default: "150" },
	},
	data() {
		return {
			editorId: `${this.id}-${md5(
				Math.random() + "-" + Math.random() + "-" + Math.random()
			)}`,
			correctEditor: null,
		};
	},
	computed: {
		editorContent: {
			get() {
				return this.value;
			},
			set(value) {
				this.$emit("input", value.replaceAll("<p><br></p>", ""));
			},
		},
	},
	watch: {
		value(newValue) {
			this.updateEditorContent(newValue);
		}
	},
	methods: {
		initialize() {
			this.correctEditor = () => window.wp.oldEditor || window.wp.editor;
			const config = this.correctEditor().getDefaultSettings() || {};
			config.quicktags.buttons = " ";
			config.tinymce.toolbar1 = " ";
			config.tinymce.toolbar2 = " ";
			config.tinymce.height = this.height;
			config.tinymce.readonly = this.disabled;
			config.tinymce.body_class = "wcc-rich-text-editor";
			config.tinymce.contenteditable = !this.disabled; // Control contenteditable attribute

			if (this.isRTLLanguage(this.language)) {
				config.tinymce.directionality = "rtl";
			}
			this.correctEditor().initialize(this.editorId, config);
			setTimeout(
				() =>
					window.tinymce.editors[this.editorId] &&
					window.tinymce.editors[this.editorId].on("change", this.listener)
			);
			// Change the tab titles
			this.changeTabTitles();
		},
		listener() {
			if (!this.correctEditor) return;
			this.$emit("input", this.correctEditor().getContent(this.editorId));
		},
		updateEditorContent(content) {
			const editor = window.tinymce.editors[this.editorId];
			if (editor && editor.getContent() !== content) { // Only update if content is different
				const selection = editor.selection;
				const bookmark = selection.getBookmark(); // Save cursor position

				setTimeout(() => {
					editor.setContent(content);
					selection.moveToBookmark(bookmark); // Restore cursor position
				}, 0);
			}
		},
		changeTabTitles() {
			// Change the title of the Visual tab
			const visualTab = document.querySelector(`#${this.editorId}-tmce`);
			if (visualTab) {
				visualTab.innerText = "Text"; // Replace with your desired title
			}

			// Change the title of the Text tab
			const textTab = document.querySelector(`#${this.editorId}-html`);
			if (textTab) {
				textTab.innerText = "HTML"; // Replace with your desired title
			}
		},
	},
	mounted() {
		this.initialize();
	},
};
</script>

<style lang="scss">
.wcc-rich-text-editor-container {
	.wp-switch-editor {
		height: auto;
		border-top-left-radius: 3px;
		border-top-right-radius: 3px;
	}
	.wp-editor-container {
		box-shadow: none;
		border: none;
		border-radius: 3px;
		border: 1px solid #d1d5db;
	}
	.mce-panel {
		box-shadow: none;
		border-radius: 3px;
		border: none !important;
	}
	.mce-toolbar-grp,
	.quicktags-toolbar,
	.mce-statusbar {
		border: none;
		background: #fff;
		padding: 0;
		min-height: 0;
	}
	.mce-top-part {
		display: none;
	}
	iframe {
		min-height: 100px;
	}
}
</style>