<script lang="ts">
	import { onMount, onDestroy } from 'svelte';
	// import { fade } from 'svelte/transition'
	// import { cubicOut } from 'svelte/easing';

	import ShadEditor from '$lib/components/shad-editor/shad-editor.svelte';

	// Import Tiptap related modules
	// import { Editor } from "@tiptap/core";
	// import StarterKit from "@tiptap/starter-kit";
	// import Bold from '@tiptap/extension-bold';
	// import BulletList from '@tiptap/extension-bullet-list';
	// import CodeBlock from '@tiptap/extension-code-block';
	// import Code from '@tiptap/extension-code';
	// import Color from '@tiptap/extension-color';
	// import Document from '@tiptap/extension-document';
	// import Heading from '@tiptap/extension-heading';
	// import Highlight from '@tiptap/extension-highlight';
	// import History from '@tiptap/extension-history';
	// import Italic from '@tiptap/extension-italic';
	// import Link from '@tiptap/extension-link';
	// import ListItem from '@tiptap/extension-list-item';
	// import OrderedList from '@tiptap/extension-ordered-list';
	// import Paragraph from '@tiptap/extension-paragraph';
	// import Strike from '@tiptap/extension-strike';
	// import Text from '@tiptap/extension-text';
	// import TextStyle from '@tiptap/extension-text-style';
	// import Typography from '@tiptap/extension-typography';
	// import Underline from '@tiptap/extension-underline';

	import './element_tiptap_editor.scss';

	// https://tiptap.dev/docs/examples/basics/default-text-editor
	// https://tiptap.dev/docs/examples/basics/formatting
	// <code class="language-css">

	export let html_text: string = '';
	export let default_minimal: boolean = false;
	export let show_toolbar: boolean = true;
	export let placeholder: string = 'Type your text here...';
	export let changed: boolean = false;

	export let classes: string = '';

	if (default_minimal) {
		show_toolbar = false;
	}

	// export let html_text: string = `
	//             <h2>
	//             Hi there,
	//             </h2>
	//             <p>
	//             this is a <em>basic</em> example of <strong>Tiptap</strong>. Sure, there are all kind of basic text styles you’d probably expect from a text editor. But wait until you see the lists:
	//             </p>
	//             <ul>
	//             <li>
	//                 That’s a bullet list with one …
	//             </li>
	//             <li>
	//                 … or two list items.
	//             </li>
	//             </ul>
	//             <p>
	//             Isn’t that great? And all of that is editable. But wait, there’s more. Let’s try a code block:
	//             </p>
	//             <pre><code class="language-css">body {
	//             display: none;
	//             }</code></pre>
	//             <p>
	//             I know, I know, this is impressive. It’s only the tip of the iceberg though. Give it a try and click a little bit around. Don’t forget to check the other examples too.
	//             </p>
	//             <blockquote>
	//             Wow, that’s amazing. Good work, boy! 👏
	//             <br />
	//             — Mom
	//             </blockquote>
	//         `;

	let element: HTMLDivElement;
	let editor: any;
	// More default options should be defined later.
	// minimal, basic, full

	export let show_button_kv: any;

	// export let new_json = editor?.getJSON();
	export let new_html: string = '';
	let orig_html: string = html_text;

	onMount(() => {});

	onDestroy(() => {});

	$: if (html_text !== orig_html && html_text !== '<p></p>') {
		console.log('html_text changed:', html_text);
		console.log('orig_html:', orig_html);
		changed = true;
	} else {
		changed = false;
	}

	let mouse_entered_timer: any;
	let mouse_enter_wait: number = 500;
	let mouse_leave_wait: number = 2000;
</script>

<!-- svelte-ignore a11y-no-static-element-interactions -->
<!-- svelte-ignore a11y-click-events-have-key-events -->
<div
	on:click={() => {
		if (default_minimal) {
			show_toolbar = true;
		}
	}}
	on:mouseleave={() => {
		clearTimeout(mouse_entered_timer);

		mouse_entered_timer = setTimeout(() => {
			if (default_minimal) {
				show_toolbar = false;
			}
		}, mouse_leave_wait);
	}}
	on:mouseenter={() => {
		clearTimeout(mouse_entered_timer);

		mouse_entered_timer = setTimeout(() => {
			if (default_minimal) {
				show_toolbar = true;
			}
		}, mouse_enter_wait);
	}}
	class="block w-full h-full {classes}"
>
	<ShadEditor
		class="p-1 transition-all duration-1000"
		bind:content={html_text}
		bind:new_html
		{placeholder}
		{show_toolbar}
		{show_button_kv}
	/>
</div>

<style lang="css">
	/*
// :global(.ProseMirror) {
//     padding: .25em;
// }
*/
	:global(.ProseMirror-focused) {
		outline: none;
	}
</style>
