<script lang="ts">
interface Props {
    children?: import('svelte').Snippet;
    log_lvl?: number;
    value: any;
    success?: boolean;
    btn_text?: string;
    btn_title?: string;
    btn_class?: string;
    hide_icon?: boolean;
    hide_text?: boolean;
    icon_name?: string;
}

let {
    children,
    log_lvl = 0,
    value = $bindable(''),
    success = $bindable(false),
    btn_text = 'Copy to Clipboard',
    btn_title = 'Copy to Clipboard',
    btn_class = 'btn btn-sm preset-tonal-warning text-warning-500 m-1',
    hide_icon = false,
    hide_text = false,
    icon_name = 'copy' // copy, check, link
}: Props = $props();

// *** Import Svelte specific
// import { browser } from '$app/environment';

// *** Import other supporting libraries
import {
    // ArrowBigRight,
    // CircleX,
    CircleCheck,
    Copy,
    // Eye, EyeOff,
    // Key,
    Link
    // LogIn, LogOut, LockKeyhole,
    // Mail, MailCheck,
    // Menu,
    // RefreshCw, RefreshCcw, RefreshCcwDot,
    // ShieldEllipsis, ShieldMinus, ShieldPlus, ShieldUser,
    // User, UserCheck
} from '@lucide/svelte';

$effect(() => {
    if (log_lvl) {
        console.log(`Clipboard component initialized with value:`, value);
    }
});

// Select your trigger element
// const elemButton: HTMLButtonElement | null = document.querySelector('[data-button]');

// Add a click event handler to the trigger
// elemButton?.addEventListener('click', () => {
//     // Call the Clipboard API
//     navigator.clipboard
//     // Use the `writeText` method write content to the clipboard
//     .writeText(value)
//     // Handle confirmation
//     .then(() => {
//         if (log_lvl) {
//             console.log(`Clipboard write successful: ${value}`);
//         }
//         success = true;
//     });
// });
</script>

<button
    type="button"
    data-button
    onclick={() => {
        // if (browser) {
        // Call the Clipboard API
        navigator.clipboard
            // Use the `writeText` method write content to the clipboard
            .writeText(value)
            // Handle confirmation
            .then(() => {
                if (log_lvl) {
                    console.log(`Clipboard write successful: ${value}`);
                }
                success = true;
            });
        // } else {
        //     if (log_lvl) {
        //         console.log(`Clipboard write attempted in non-browser environment.`);
        //     }
        // }
    }}
    class={btn_class}
    title={btn_title}>
    <!-- {@render btn_text} -->
    {#if icon_name === 'link'}
        <Link
            class="mx-1 {hide_icon ? 'hidden' : 'inline-block'}"
            size="1.2em" />
    {:else if icon_name === 'check'}
        <CircleCheck
            class="mx-1 {hide_icon ? 'hidden' : 'inline-block'}"
            size="1.2em" />
    {:else}
        <Copy
            class="mx-1 {hide_icon ? 'hidden' : 'inline-block'}"
            size="1.2em" />
    {/if}
    <span class={hide_text ? 'hidden' : 'inline-block'}>
        {btn_text}
    </span>
    {@render children?.()}
</button>
