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

	import { type Editor } from '@tiptap/core';
	import Undo from './icons/undo.svelte';
	import Redo from './icons/redo.svelte';
	// import { Separator } from '$lib/components/ui/separator/index.js';
	import Bold from './icons/bold.svelte';
	import Italic from './icons/italic.svelte';
	import Underline from './icons/underline.svelte';
	import Strikethrough from './icons/strikethrough.svelte';
	import Link from './icons/link.svelte';
	import Code from './icons/code.svelte';
	import BlockQuote from './icons/block-quote.svelte';
	import Subscript from './icons/subscript.svelte';
	import BulletList from './icons/buttle-list.svelte'; // Typo in the icon name
	import OrderedList from './icons/ordered-list.svelte';
	import TaskList from './icons/task-list.svelte';
	import Highlighter from './icons/highlighter.svelte';
	import Superscript from './icons/superscript.svelte';
	import Textcolor from './icons/textcolor.svelte';
	import Align from './icons/textalign.svelte';
	import Quickcolor from './icons/quickcolor.svelte';
	import Table from './icons/table.svelte';
	// import Image from './icons/image.svelte';
	import Text from './icons/text.svelte';
	import SearchReplace from './icons/search-replace.svelte';

	interface Props {
		editor: Editor;
		show_button_kv?: any;
	}

	let { editor, show_button_kv }: Props = $props();

	let show_button_kv_defaults: any = {
		undo: true,
		redo: true,

		text: false,

		bold: true,
		italic: true,
		underline: true,
		strikethrough: false,
		align: false,
		link: false,
		code: false,
		blockquote: false,
		subscript: false,
		superscript: false,
		bullet_list: true,
		ordered_list: true,
		task_list: false,
		image: false,
		table: false,
		text_color: false,
		highlighter: false,
		quick_color: false,
		search_replace: false
	};
	console.log('show_button_kv', show_button_kv);
	if (show_button_kv) {
		show_button_kv = { ...show_button_kv_defaults, ...show_button_kv };
	} else {
		show_button_kv = show_button_kv_defaults;
	}
</script>

<div
	transition:fade={{ delay: 250, duration: 750, easing: cubicOut }}
	class="
        flex flex-row flex-wrap gap-0.5
        w-full items-center justify-between
        overflow-auto border-b p-1
        transition-all duration-1000
        "
>
	<span class:hidden={!show_button_kv.undo && !show_button_kv.redo}>
		{#if show_button_kv.undo}
			<Undo {editor} />
		{/if}
		{#if show_button_kv.redo}
			<Redo {editor} />
		{/if}
	</span>
	<!-- <Separator orientation="vertical" class="h-fit" /> -->
	<span class:hidden={!show_button_kv.text}>
		{#if show_button_kv.text}
			<Text {editor} />
		{/if}
	</span>
	<span
		class:hidden={!show_button_kv.bold &&
			!show_button_kv.italic &&
			!show_button_kv.underline &&
			!show_button_kv.strikethrough}
	>
		{#if show_button_kv.bold}
			<Bold {editor} />
		{/if}
		{#if show_button_kv.italic}
			<Italic {editor} />
		{/if}
		{#if show_button_kv.underline}
			<Underline {editor} />
		{/if}
		{#if show_button_kv.strikethrough}
			<Strikethrough {editor} />
		{/if}
	</span>
	<span
		class:hidden={!show_button_kv.align &&
			!show_button_kv.link &&
			!show_button_kv.code &&
			!show_button_kv.blockquote &&
			!show_button_kv.subscript &&
			!show_button_kv.superscript &&
			!show_button_kv.bullet_list &&
			!show_button_kv.ordered_list &&
			!show_button_kv.task_list &&
			!show_button_kv.image &&
			!show_button_kv.table}
	>
		{#if show_button_kv.align}
			<Align {editor} />
		{/if}
		{#if show_button_kv.link}
			<Link {editor} />
		{/if}
		{#if show_button_kv.code}
			<Code {editor} />
		{/if}
		{#if show_button_kv.blockquote}
			<BlockQuote {editor} />
		{/if}
		{#if show_button_kv.subscript}
			<Subscript {editor} />
		{/if}
		{#if show_button_kv.superscript}
			<Superscript {editor} />
		{/if}
		{#if show_button_kv.bullet_list}
			<BulletList {editor} />
		{/if}
		{#if show_button_kv.ordered_list}
			<OrderedList {editor} />
		{/if}
		{#if show_button_kv.task_list}
			<TaskList {editor} />
		{/if}
		<!-- {#if show_button_kv.image}
            <Image {editor} />
        {/if} -->
		{#if show_button_kv.table}
			<Table {editor} />
		{/if}
	</span>
	<span
		class:hidden={!show_button_kv.text_color &&
			!show_button_kv.highlighter &&
			!show_button_kv.quick_color}
	>
		cxx
		{#if show_button_kv.text_color}
			<Textcolor {editor} />
		{/if}
		{#if show_button_kv.highlighter}
			<Highlighter {editor} />
		{/if}
		{#if show_button_kv.quick_color}
			<Quickcolor {editor} />
		{/if}
	</span>
	<span class:hidden={!show_button_kv.search_replace}>
		{#if show_button_kv.search_replace}
			<SearchReplace {editor} />
		{/if}
	</span>
</div>
