<script lang="ts">
	interface Props {
		// Exports
		container_class_li?: string | Array<string>;
		event_file_obj_li?: Array<any>;
		link_to_type?: string;
		link_to_id?: string;
		allow_basic?: boolean;
		allow_moderator?: boolean;
		show_direct_download?: boolean;
		show_location_fields?: boolean;
		show_presentation_fields?: boolean;
		show_session_fields?: boolean;
		hide_session_code?: boolean;
		log_lvl?: number;
	}

	let {
		container_class_li = [],
		// display_mode = 'default',
		// event_file_id_random_li = $bindable(),
		event_file_obj_li = $bindable(),
		link_to_type,
		link_to_id,
		allow_basic = true,
		allow_moderator = true,
		show_direct_download = $bindable(false),
		show_location_fields = false,
		show_presentation_fields = true,
		show_session_fields = true,
		hide_session_code = false,
		log_lvl = $bindable(0)
	}: Props = $props();

	// Imports
	import Comp_event_file_obj_tbl from './ae_comp__event_file_obj_tbl.svelte';

	import { liveQuery } from 'dexie';
	import {
		events_loc,
		events_sess,
		events_slct,
		events_trigger
	} from '$lib/stores/ae_events_stores';
	import { db_events } from '$lib/ae_events/db_events';

	if (log_lvl) {
		console.log(`link_to_type: ${link_to_type}; link_to_id: ${link_to_id}`);
	}

	// Variables
	// let ae_promises: key_val = {};
	// let ae_tmp: key_val = {};
	// let ae_triggers: key_val = {};

	let event_file_id_random_li: Array<string> = $state([]);

	let dq__where_type_id_val: string = `${link_to_type}_id_random`;
	let dq__where_eq_id_val: string = link_to_id ?? '';

	// *** Functions and Logic
	let lq__event_file_obj_li = $derived(
		liveQuery(async () => {
			let results: any;

			// let event_file_id_random_li = []; // This is to prevent the array from constantly updating and triggering the liveQuery.

			// for (let i = 0; i < $events_sess?.event_file_obj_li.length; i++) {
			//     let event_file_obj = $events_sess?.event_file_obj_li[i];
			//     let event_file_id_random = event_file_obj.event_file_id_random;
			//     event_file_id_random_li.push(event_file_id_random);
			// }
			if (event_file_obj_li?.length) {
				if (log_lvl) {
					console.log(`LQ - Using event_file_obj_li to get event files.`);
				}

				event_file_id_random_li = []; // This is to prevent the array from constantly updating and triggering the liveQuery.

				for (let i = 0; i < event_file_obj_li.length; i++) {
					let event_file_obj = event_file_obj_li[i];
					let event_file_id_random = event_file_obj.event_file_id_random;
					event_file_id_random_li.push(event_file_id_random);
				}

				// if (event_file_id_random_li.length) {
				results = await db_events.file.bulkGet(event_file_id_random_li);
				// }
			} else if (link_to_type && link_to_id) {
				console.log(`Trying where: ${dq__where_type_id_val}; equals: ${dq__where_eq_id_val}`);
				event_file_id_random_li = [];
				results = await db_events.file
					.where(dq__where_type_id_val)
					.equals(dq__where_eq_id_val)
					.sortBy('name');
			} else {
				event_file_id_random_li = [];
				results = [];
			}

			// Check if results are different than the current session version stored under $events_slct
			if (
				$events_slct.event_file_obj_li &&
				JSON.stringify($events_slct.event_file_obj_li) !== JSON.stringify(results)
			) {
				$events_slct.event_file_obj_li = [...results];
				if (log_lvl) {
					console.log(
						`Session slct li stored version has changed for ID = ${$events_slct.journal_id}`,
						$events_slct.event_file_obj_li
					);
				}
			} else {
				if (log_lvl > 1) {
					console.log(
						`Session slct li stored version has not changed for ID = ${$events_slct.journal_id}`
					);
				}
			}

			return results;
		})
	);
</script>

{#if event_file_obj_li && event_file_obj_li?.length}
	<!-- {#if event_file_id_random_li && event_file_id_random_li?.length} -->
	<Comp_event_file_obj_tbl
		{container_class_li}
		{lq__event_file_obj_li}
		{allow_basic}
		{allow_moderator}
		bind:show_direct_download
		{show_presentation_fields}
		{show_session_fields}
		{hide_session_code}
		{log_lvl}
	></Comp_event_file_obj_tbl>
{:else}
	<section class="grow px-1 md:px-2 pb-28 flex flex-col gap-1 items-center">
		<p>No files available to show in table.</p>
	</section>
{/if}
