<script lang="ts">

interface Props {
    log_lvl?: number;
    value: any;
    success?: boolean;
    btn_text?: string;
    btn_title?: string;
    btn_class?: string;
    hide_icon?: boolean;
}

let {
    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,
}: Props = $props();

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

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

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} -->
    <Copy
        class="inline-block mx-1 {hide_icon ? 'hidden' : '' }"
         />
    {btn_text}

</button>
