<script lang="ts">
interface Props {
    container_class_li?: string | Array<string>;
    // export let event_session_id_random_li: Array<string>;
    lq__event_session_obj_li: any;
    log_lvl?: number;
    show_location_fields?: boolean;
    hide_session_code?: boolean;
}

let {
    container_class_li = [],
    lq__event_session_obj_li,
    log_lvl = $bindable(0),
    show_location_fields = true,
    hide_session_code = false
}: Props = $props();

// Imports
// import type { key_val } from '$lib/ae_stores';

// import { liveQuery } from "dexie";
import { ae_util } from '$lib/ae_utils/ae_utils';
import { ListOrdered } from '@lucide/svelte';
// Imports - events specific
// import { events_loc, events_sess, events_slct, events_trigger, events_trig_kv } from '$lib/stores/ae_events_stores';
// import { db_events } from "$lib/db_events";

// export let display_mode: string = 'default'; // 'default', 'compact', 'minimal', 'launcher';
// export let link_to_type: string;
// export let link_to_id: string;

// *** Functions and Logic
$effect(() => {
    if (log_lvl) {
        console.log(
            `container_class_li: ${container_class_li}; show_location_fields: ${show_location_fields}`
        );
        // console.log(`link_to_type: ${link_to_type}; link_to_id: ${link_to_id}`);
    }
});

let horiz_scroll_warning: boolean = $state(false);
let horiz_check_element: HTMLElement | null = $state(null);

// Check if element is scrolling horizontally
$effect(() => {
    if (
        horiz_check_element &&
        horiz_check_element.scrollWidth > horiz_check_element.offsetWidth
    ) {
        horiz_scroll_warning = true;
        // console.log('Element is too wide for the container. Horizontal scrolling detected.');
    } else {
        horiz_scroll_warning = false;
        // console.log('Element fits within the container. No horizontal scrolling.', horiz_check_element);
    }
});
</script>

<section
    class:border-r-2={horiz_scroll_warning}
    class:border-dashed={horiz_scroll_warning}
    class:border-warning-900-100={horiz_scroll_warning}
    class="ae_comp event_session_obj_tbl {container_class_li} container max-w-screen overflow-auto">
    {#if $lq__event_session_obj_li && $lq__event_session_obj_li?.length}
        <div
            bind:this={horiz_check_element}
            id="tbl_container"
            class="space-y-2 pb-48">
            <h2 class="h3">
                <span class="text-base"> Results: </span>

                {#if $lq__event_session_obj_li?.length}
                    <span
                        class="preset-filled-success-100-900 rounded-lg px-4 text-3xl font-bold"
                        title="Count {$lq__event_session_obj_li.length ??
                            'None'}">
                        <ListOrdered size="1em" class="mx-4" />
                        {$lq__event_session_obj_li.length ?? 'None'}&times;
                    </span>
                {/if}
            </h2>

            <table
                class="table-striped table w-full table-auto text-xs lg:text-sm">
                <thead class="">
                    <tr>
                        <th class="px-4 py-2">Name</th>
                        <th class="px-4 py-2">Start Datetime</th>
                        {#if show_location_fields}
                            <th class="px-4 py-2">Location</th>
                        {/if}
                        <th class="px-4 py-2">Session Files</th>
                        <th class="px-4 py-2">Presenter Files</th>
                    </tr>
                </thead>
                <tbody class="">
                    {#each $lq__event_session_obj_li as event_session_obj, index (event_session_obj.event_session_id)}
                        <tr class:dim={event_session_obj?.hide}>
                            <td class="px-4 py-2">
                                <a
                                    href="/events/{event_session_obj?.event_id}/session/{event_session_obj?.event_session_id}"
                                    class="text-blue-500 hover:text-blue-800 hover:underline">
                                    {event_session_obj?.name}
                                </a>
                            </td>
                            <td class="px-4 py-2">
                                {ae_util.iso_datetime_formatter(
                                    event_session_obj?.start_datetime,
                                    'datetime_iso_12_no_seconds'
                                )}
                            </td>
                            {#if show_location_fields}
                                <td class="px-4 py-2">
                                    {event_session_obj?.event_location_name}
                                </td>
                            {/if}
                            <td class="px-4 py-2">
                                {event_session_obj?.file_count ?? '0'}
                            </td>
                            <td class="px-4 py-2">
                                {event_session_obj?.file_count_all ?? '0'}
                            </td>
                        </tr>
                    {/each}
                </tbody>
            </table>
        </div>
    {:else}
        <p class="text-sm">No sessions available to show.</p>
    {/if}
</section>
