<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...';

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 = '';

onMount(() => {
});

onDestroy(() => {
});

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=""
    >
    <ShadEditor
        class="p-1 transition-all duration-1000"
        bind:content={html_text}
        bind:new_html={new_html}
        placeholder={placeholder}
        show_toolbar={show_toolbar}
        show_button_kv={show_button_kv}
        />
</div>

<style lang="scss">
// :global(.ProseMirror) {
//     padding: .25em;
// }
:global(.ProseMirror-focused) {
    // padding: .25em;
    // box-shadow: 0 0 0 2px hsla(208, 99%, 55%, .1);
    outline: none;
}

</style>
