<script lang="ts">
	interface Props {
		log_lvl?: number;
		event_file_id: string;
		event_file_obj: any;
		// export let os: string = null;
		max_filename_length?: number;
		hide_launch_icon?: boolean;
		hide_meta?: boolean;
		hide_created_on?: boolean;
		hide_os?: boolean;
		hide_size?: boolean;
		hide_draft?: boolean; // Based on the file purpose
		show_bak_download?: boolean;
		// export let hide_api_download: boolean = true;
		btn_size?: string;
		btn_text_align?: string;
		text_size?: string;
		text_size_md?: string;
		session_type?: string; // oral, poster, workshop, symposium, roundtable, other
		open_method?: null | string; // modal, download, native open (download, cache, copy, open), URL
		modal_title?: string;

		modal__title?: any;
		modal__open_event_file_id?: any;
		modal__event_file_obj?: any;
	}

	let {
		log_lvl = $bindable(0),
		event_file_id,
		event_file_obj = $bindable({}),
		max_filename_length = $bindable(50),
		hide_launch_icon = $bindable(false),
		hide_meta = $bindable(false),
		hide_created_on = $bindable(false),
		hide_os = $bindable(false),
		hide_size = $bindable(false),
		hide_draft = $bindable(false),
		show_bak_download = false,
		btn_size = $bindable('btn-sm'),
		btn_text_align = $bindable('text-left'),
		text_size = $bindable('text-sm'),
		text_size_md = $bindable('md:text-base'),
		session_type = $bindable('oral'),
		open_method = $bindable('download'),
		modal_title = $bindable(''),

		modal__title = $bindable(''),
		modal__open_event_file_id = $bindable(null),
		modal__event_file_obj = $bindable(null)
	}: Props = $props();

	// *** Import Svelte specific
	// import { preventDefault } from 'svelte/legacy';
	import { onMount, tick } from 'svelte';
	import { fade, scale, fly } from 'svelte/transition';

	// *** Import other supporting libraries

	// *** Import Aether specific variables and functions
	import type { key_val } from '$lib/stores/ae_stores';
	import { ae_util } from '$lib/ae_utils/ae_utils';
	import { api } from '$lib/api/api';
	import {
		ae_snip,
		ae_loc,
		ae_sess,
		ae_api,
		ae_trig,
		slct,
		slct_trigger
	} from '$lib/stores/ae_stores';
	import { core_func } from '$lib/ae_core/ae_core_functions';
	import {
		events_loc,
		events_sess,
		events_slct,
		events_trigger
	} from '$lib/stores/ae_events_stores';
	import { events_func } from '$lib/ae_events_functions';

	import Element_ae_crud from '$lib/elements/element_ae_crud.svelte';

	// *** Functions and Logic
	let ae_downloads: key_val = {};
	let ae_promises: key_val = $state({});
	let ae_tmp: key_val = $state({});
	let ae_triggers: key_val = $state({});

	let open_file_clicked: null | boolean = $state(null);
	let open_file_status: null | string = $state(null); // null, 'checking_cache', 'checking_cache_failed', 'downloading_file', 'downloading_file_failed', 'opening_file', 'opening_file_failed', 'opening_file_success'
	let open_file_status_message: null | string = $state(null);

	if (!$events_loc.launcher.screen_saver_img_kv) {
		$events_loc.launcher.screen_saver_img_kv = {};
	}

	let screen_saver_exts = ['jpg', 'png', 'PNG', 'webp'];

	if (screen_saver_exts.includes(event_file_obj.extension)) {
		// $events_loc.launcher.screen_saver_img_kv.push(event_file_obj);
		// $events_loc.launcher.screen_saver_img_kv[event_file_id] = event_file_obj;

		$events_loc.launcher.screen_saver_img_kv[event_file_id] = Object.create(event_file_obj);

		// let temp_obj = Object.create(event_file_obj)

		// $events_loc.launcher.screen_saver_img_kv[temp_obj.event_file_id_random] = Object.create(temp_obj);

		// $ae_event_launcher = $ae_event_launcher;
	}

	onMount(() => {
		console.log('** Component Mounted: ** Event Launcher File Container (Hash Open)');
		console.log(`Session Type: ${session_type}; Open Method: ${open_method}`);

		if (screen_saver_exts.includes(event_file_obj.extension)) {
			// $events_loc.launcher.screen_saver_img_kv[event_file_id] = event_file_obj;

			let temp_obj = Object.create(event_file_obj);

			$events_loc.launcher.screen_saver_img_kv[temp_obj.event_file_id_random] =
				Object.create(temp_obj);

			// $ae_event_launcher = $ae_event_launcher;
		}

		// window.addEventListener('message', function(event) {
		//     console.log('Message received in event file uploaded manage component:');
		//     console.log(event);

		//     if (event.data.type == 'api_download_blob') {
		//         console.log('Download blob (file) message received:');
		//         console.log(event.data);

		//         // Get the event_file_id from the event.data.endpoint value.
		//         // Example: /event/file/abc123/download

		//         let endpoint = event.data.endpoint;
		//         let event_file_id = endpoint.split('/')[3];

		//         ae_downloads[event_file_id] = {
		//             'size_total': event.data.size_total,
		//             'size_loaded': event.data.size_loaded,
		//             'percent_completed': event.data.percent_completed,
		//         };

		//         // let event_file_id = event.data.event_file_id;
		//         // let filename = event.data.filename;
		//         // let auto_download = event.data.auto_download;

		//         // ae_promises[event_file_id]
		//         // ae_promises[event_file_id] = download_event_file({ 'event_file_id': event_file_id, 'return_file': true, filename: filename, auto_download: auto_download, log_lvl: 1 });
		//     }
		// });
	});

	async function handle_open_file() {
		console.log('*** handle_open_file() ***');
		console.log(
			`App Mode: ${$events_loc.launcher.app_mode}; Cache Path: ${$events_loc.launcher.local_file_cache_path}; Temp Path: ${$events_loc.launcher.host_file_temp_path}`
		);

		// null or "default" is for regular use in their preferred browser.
		// "app" mode is for Electron and node.js.
		// "onsite" mode is for Chrome or Firefox and downloading files with modified extensions and other slight changes.

		if ($events_loc.launcher.app_mode == 'native' && native_app) {
			console.log('* ** *** **** BEGIN TESTING **** *** ** *');
			console.log(
				'Process: Check local hash file cache, Download hash file to cache, and Open cached hash file after copying to temp directory'
			);

			open_file_clicked = true;
			// await tick();
			// setTimeout(() => {console.log('Finished waiting to hide the message.'); open_file_clicked = false;}, 15000);

			open_file_status = 'checking_cache';
			open_file_status_message = 'Checking local cache...';
			let check_hash_file_cache_result = await native_app.check_hash_file_cache_v2({
				local_file_cache_path: $events_loc.launcher.local_file_cache_path,
				hash: event_file_obj.hash_sha256,
				check_hash: true
			});
			if (check_hash_file_cache_result) {
				console.log('Cached hash file found.');
			} else if (check_hash_file_cache_result == null) {
				console.log(
					`Cached hash file not found. Need to download from API server. Base URL ${$events_loc.launcher.api.base_url}`
				);
				open_file_status = 'downloading_file';
				open_file_status_message = 'Downloading file...';
				let download_hash_file_to_cache_result = await native_app.download_hash_file_to_cache_v2({
					api_base_url: $events_loc.launcher.api.base_url,
					api_base_url_backup: $events_loc.launcher.api.base_url_backup,
					local_file_cache_path: $events_loc.launcher.local_file_cache_path,
					event_file_id: event_file_id,
					hash: event_file_obj.hash_sha256,
					verify_hash: true,
					overwrite_existing: false
				});
				// console.log(download_hash_file_to_cache_result);
				if (download_hash_file_to_cache_result) {
					console.log('Hash file downloaded to cache.');
				} else if (download_hash_file_to_cache_result == null) {
					console.log('Hash file was not found in cache and or could not be downloaded.');
					open_file_status = 'file_not_found';
					open_file_status_message = 'File was not found in cache and could not be downloaded.';
					setTimeout(() => {
						console.log(`Hiding Open File Message: ${open_file_status_message}`);
						open_file_clicked = false;
					}, 10000); // Default 15 seconds (15000)
					return null;
				} else {
					console.log(
						'Hash file may be in the process of being downloaded or something went wrong.'
					);
					open_file_status = 'downloading_file_or_failed';
					open_file_status_message =
						'Hash file may be in the process of being downloaded or something went wrong.';
					setTimeout(() => {
						console.log(`Hiding Open File Message: ${open_file_status_message}`);
						open_file_clicked = false;
					}, 10000); // Default 15 seconds (15000)
					return false;
				}
			} else {
				console.log(
					`Cached hash file found, but hash did not match. May still be downloading from the API server. Base URL ${$events_loc.launcher.api.base_url}`
				);
				open_file_status = 'try_again';
				open_file_status_message = 'Please try again...';
				return null;
			}

			setTimeout(() => {
				console.log('Finished waiting to hide the message.');
				open_file_clicked = false;
			}, 15000); // Default 15 seconds (15000)

			console.log('Cached hash file found and ready to be opened from the temp directory.');
			open_file_status = 'opening_file';
			open_file_status_message = 'Opening file...';

			let filename = '';
			if (
				(event_file_obj.extension == 'ppt' || event_file_obj.extension == 'pptx') &&
				event_file_obj.open_in_os == 'win'
			) {
				if (event_file_obj.extension == 'ppt') {
					filename = event_file_obj.filename.replace('.ppt', '.pptwin');
				} else if (event_file_obj.extension == 'pptx') {
					filename = event_file_obj.filename.replace('.pptx', '.pptxwin');
				}
			} else {
				filename = event_file_obj.filename;
			}
			console.log(`Opening ${filename}`);

			let electron_open_hash_file_to_temp_result = await native_app.open_hash_file_to_temp_v2({
				local_file_cache_path: $events_loc.launcher.local_file_cache_path,
				hash: event_file_obj.hash_sha256,
				host_file_temp_path: $events_loc.launcher.host_file_temp_path,
				filename: filename,
				verify_hash: true
			});
			if (electron_open_hash_file_to_temp_result) {
				console.log('Local hash file was opened to temp.');
				open_file_status = 'opening_file_success';
				open_file_status_message = 'Opening Application';
			} else if (electron_open_hash_file_to_temp_result == null) {
				console.log('Local hash file was not found. It may still be downloading.');
				open_file_status = 'file_not_found';
				open_file_status_message = 'File not found!';
			} else {
				console.log('Local hash file was not opened to temp. Something went wrong.');
				open_file_status = 'opening_file_failed';
				open_file_status_message = 'Failed to open the file!';
				return false;
			}

			console.log(
				'Done with test of cache check, download file, and open cached file from temp directory.'
			);
		} else if ($events_loc.launcher.app_mode == 'onsite') {
			open_file_clicked = true;
			await tick();
			setTimeout(() => {
				console.log('Finished waiting to hide the message.');
				open_file_clicked = false;
			}, 15000);
		} else {
			// NOTE: Add first test controller command here.
			// $events_sess.launcher.controller_cmd = `ae:open:event_file_id=${$slct.event_file_id}`;
			// $events_sess.launcher.controller_trigger_send = true; // Trigger the controller to send.
			// $events_sess.launcher.controller_cmd = null; // Reset command to null

			open_file_clicked = true;
			await tick();
			setTimeout(() => {
				console.log('Finished waiting to hide the message.');
				open_file_clicked = false;
			}, 15000);
		}
	}

	// function handle_open_method_poster() {
	//     console.log('*** handle_open_method_poster() ***');

	//     $events_loc.launcher.show_modal_event_poster = true;
	//     if (event_file_obj.extension == 'png' || event_file_obj.extension == 'jpg') {
	//         $events_loc.launcher.event_poster_file_type = 'image';
	//     } else if (event_file_obj.extension == 'mp4' || event_file_obj.extension == 'mov') {
	//         $events_loc.launcher.event_poster_file_type = 'video';
	//     }

	//     $events_loc.launcher.poster_src = `/event/file/${event_file_id}/download`;
	//     $events_loc.launcher.modal_title = modal_title;
	// }

	function preventDefault<T extends Event>(fn: (event: T) => void) {
		return function (event: T) {
			event.preventDefault();
			fn(event);
		};
	}
</script>

<div
	class:justify-between={!hide_meta}
	class:justify-center={hide_meta}
	class:hidden={hide_draft &&
		(event_file_obj.file_purpose == 'outline' || event_file_obj.file_purpose == 'draft')}
	class="
        event_launcher_file_cont
        grow
        flex flex-col md:flex-row flex-wrap
        gap-1 items-center justify-center
        max-w-full
        transition-all
        "
>
	{#if open_file_clicked}
		<div class="open_file_clicked alert" in:fade={{ duration: 250 }} out:fade={{ duration: 2000 }}>
			{#if $events_loc.launcher.app_mode == 'native'}
				{#if open_file_status}
					<div class="alert_msg_pulse"><strong>*** {open_file_status_message} ***</strong></div>
				{/if}

				<!-- <strong>*** Please wait while this file is cached... ***</strong> -->
				<p>Most files will automatically be opened full screen.</p>
				<p>PowerPoint or KeyNote will attempt to display in presenter view.</p>
				<p>PDFs, videos, and images will attempt to be displayed mirrored.</p>
				<p>Please close the file when finished.</p>
			{:else if $events_loc.launcher.app_mode == 'onsite'}
				<strong>*** Please wait while this file loads... ***</strong>
				<p>Most files will automatically be opened full screen.</p>
				<p>PowerPoint or KeyNote will attempt to display in presenter view.</p>
				<p>PDFs, videos, and images will attempt to be displayed mirrored.</p>
				<p>Please close the file when finished.</p>
			{:else}
				<strong>*** Please wait while this file downloads... ***</strong>
				<p>Onsite in the Speaker Ready Room and conference session rooms:</p>
				<ul>
					<li>Most files will automatically be opened full screen.</li>
					<li>PowerPoint or KeyNote will attempt to display in presenter view.</li>
					<li>PDFs, videos, and images will attempt to be displayed mirrored.</li>
					<li>Please close the file when finished.</li>
				</ul>
			{/if}
		</div>
	{/if}

	<span
		class="event_file_action grow max-w-full flex flex-row flex-wrap gap-1 items-center justify-center"
	>
		<!-- First [WORKING!] - Handle opening using a modal. This applies to all Launcher app modes (default, onsite, native) -->
		{#if session_type == 'poster' || open_method == 'modal'}
			<!-- <a
        href="/event/file/{event_file_id}/download"
        download
        class="ae_btn btn_info {btn_size}"
        on:click|preventDefault={() => {handle_open_method_poster();}}
        data-hash_sha256={event_file_obj.hash_sha256}
        data-filename={event_file_obj.filename}
        title={event_file_obj.filename}
        >
        <span class="fas fa-paper-plane" class:hidden="{hide_launch_icon}"></span> {ae_util.shorten_filename({filename: event_file_obj.filename, max_length: max_filename_length})}
    </a> -->
			<button
				type="button"
				onclick={() => {
					// modal__title = modal_title;
					modal__open_event_file_id = event_file_id;
					modal__event_file_obj = event_file_obj;

					// $events_sess.launcher.modal__open_event_file_id = event_file_id;

					// $events_sess.launcher.modal__open = event_file_id;
					// $events_sess.launcher.modal__open_event_file_id = event_file_id;
					// $events_sess.launcher.modal__event_file_obj = event_file_obj;

					if (!modal__title) {
						modal__title = event_file_obj.filename;
					}
					// $events_sess.launcher.modal__title = modal__title;
					// $events_sess.launcher.modal__img_src = `/event/file/${event_file_id}/download`;

					$events_slct.event_file_id = event_file_id;
					$events_slct.event_file_obj = event_file_obj;

					// let as_modal_result = open_event_file_as_modal({
					//     event_file_id: event_file_id,
					//     filename: event_file_obj.filename,
					//     extension: event_file_obj.extension,
					//     modal_title: modal_title
					// });

					// if (as_modal_result) {
					//     console.log($events_loc.launcher);
					//     console.log(event_file_obj);
					//     events_loc.launcher.set({...$events_loc.launcher, ...as_modal_result});
					// }

					if ($events_loc.launcher.controller == 'local_push') {
						console.log(`Local Push Controller Command: ae_open:event_file=${event_file_id}`);
						$events_sess.launcher.controller_cmd = `ae_open:event_file=${event_file_id}`;
						$events_sess.launcher.controller_trigger_send = true;
						// tick();

						core_func.create_ae_obj__activity_log({
							api_cfg: $ae_api,
							account_id: $ae_loc.account_id,
							data_kv: {
								name: `Open Poster: ${event_file_obj.filename}`,
								object_type: 'event_file',
								object_id_random: event_file_id,
								action: 'open_poster_w_controller',
								meta_json: {
									event_file_id: event_file_id,
									filename: event_file_obj.filename,
									extension: event_file_obj.extension,
									modal_title: modal_title
								}
							},
							log_lvl: log_lvl
						});
					}
				}}
				class:preset-tonal-success={$events_slct.event_file_id == event_file_id}
				class="
            btn btn-sm md:btn-md lg:btn-lg
            preset-tonal-primary border border-primary-500
            min-w-96
            "
				title={`Open this file in a modal window:\n${event_file_obj.filename}\n[API] SHA256: ${event_file_obj.hash_sha256.slice(0, 10)}...\nHosted ID: ${event_file_obj.hosted_file_id_random} Event File ID: ${event_file_id}`}
			>
				{#if screen_saver_exts.includes(event_file_obj.extension)}
					<span class="fas fa-chart-bar m-1" class:hidden={hide_launch_icon}></span>
					Open Poster
					<!-- {event_file_id} -->
				{:else}
					<span class="fas fa-paper-plane m-1" class:hidden={hide_launch_icon}></span>
					{ae_util.shorten_filename({
						filename: event_file_obj.filename,
						max_length: max_filename_length
					})}
				{/if}
				<!-- {$events_sess.launcher.modal__open_event_file_id ?? '-- not set --'} -->
			</button>

			<!-- {#if ($events_loc.launcher.app_mode == 'native')} -->
			<!-- Second [NOT WORKING!!!] - Handle opening a file. This applies to all Launcher app modes (default, onsite, native) -->
		{:else if $events_loc.launcher.app_mode == 'native'}
			<a
				href="/event/file/{event_file_id}/download?use_os=true"
				download
				class="ae_btn btn_info {btn_size}"
				onclick={preventDefault(() => {
					handle_open_file();
				})}
				data-hash_sha256={event_file_obj.hash_sha256}
				data-filename={event_file_obj.filename}
				title={`${event_file_obj.filename} [A] -- SHA256 hash: ${event_file_obj.hash_sha256.slice(0, 10)}...`}
			>
				<span class="fas fa-paper-plane" class:hidden={hide_launch_icon}></span>
				{ae_util.shorten_filename({
					filename: event_file_obj.filename,
					max_length: max_filename_length
				})}
			</a>

			<!-- Third [NOT WORKING!!!] - Handle opening a file. This applies to all Launcher app modes (default, onsite, native) -->
			<!-- {:else if ($events_loc.launcher.app_mode == 'onsite' && (event_file_obj.extension == 'ppt' || event_file_obj.extension == 'pptx') && event_file_obj.open_in_os == 'win')}
    <a
        href="/event/file/{event_file_id}/download?use_os=true" download
        class="ae_btn btn_info {btn_size}"
        on:click={() => {handle_open_file();}}
        data-hash_sha256={event_file_obj.hash_sha256}
        data-filename={event_file_obj.filename}
        title={`${event_file_obj.filename} [A] -- SHA256 hash: ${event_file_obj.hash_sha256.slice(0, 10)}...`}
        >
        <span class="fas fa-paper-plane" class:hidden="{hide_launch_icon}"></span> {ae_util.shorten_filename({filename: event_file_obj.filename, max_length: max_filename_length})}
    </a> -->

			<!-- Last [WORKING!] - Handle opening a file. This applies to all Launcher app modes (default, onsite, native) -->
		{:else}
			<button
				type="button"
				onclick={() => {
					let new_filename = event_file_obj.filename;

					if (
						$events_loc.launcher.app_mode == 'onsite' &&
						(event_file_obj.extension == 'ppt' || event_file_obj.extension == 'pptx') &&
						event_file_obj.open_in_os == 'win'
					) {
						// Example: the_new_filename.pptxwin
						new_filename = event_file_obj.filename + 'win';
					}

					// ae_promises[event_file_id]
					ae_promises[event_file_id] = api.download_hosted_file({
						api_cfg: $ae_api,
						hosted_file_id: event_file_obj.hosted_file_id_random, // +'x'
						return_file: true,
						filename: new_filename,
						auto_download: true,
						log_lvl: 1
					});

					$events_slct.event_file_id = event_file_id;
					$events_slct.event_file_obj = event_file_obj;

					// window.postMessage({ type: 'download_event_file', event_file_id: event_file_id, filename: event_file_obj.filename, auto_download: true }, '*');

					if ($events_loc.launcher.controller == 'local_push') {
						console.log(
							`Local Push Controller Command: ae_download:hosted_file=${event_file_obj.hosted_file_id_random}`
						);
						$events_sess.launcher.controller_cmd = `ae_download:hosted_file=${event_file_obj.hosted_file_id_random}:${new_filename}:${event_file_obj.extension}`;
						$events_sess.launcher.controller_trigger_send = true;
						// tick();
					}
				}}
				class:outline-2={$events_slct.event_file_id == event_file_id}
				class="
            btn {btn_size}
            gap-1 justify-between
            min-w-full w-full max-w-96
            preset-tonal-primary border border-primary-500
            "
				title={`Download this file:\n${event_file_obj.filename}\n[API] SHA256: ${event_file_obj.hash_sha256.slice(0, 10)}...\nHosted ID: ${event_file_obj.hosted_file_id_random} Event File ID: ${event_file_id}`}
			>
				<span class="shrink text-xs border-r border-gray-400 pr-1">
					{#await ae_promises[event_file_id]}
						<!-- <span class="shrink text-sm p-0"> -->
						<span class="fas fa-spinner fa-spin mx-0.5"></span>
						<span class="">
							Downloading
							{#if $ae_sess.api_download_kv[event_file_obj.hosted_file_id_random]}
								{$ae_sess.api_download_kv[event_file_obj.hosted_file_id_random].percent_completed}%
							{/if}
						</span>
						<!-- </span> -->
					{:then result}
						<span class="fas fa-{ae_util.file_extension_icon(event_file_obj.extension)} mx-0.5"
						></span>
						{event_file_obj.extension}
						{#if result === null}
							<span>
								<span class="fas fa-exclamation-triangle mx-1"></span>
								Download failed!
							</span>
						{/if}
						<!-- </span> -->
					{/await}
				</span>

				<span
					class="
                grow {text_size} {text_size_md} w-full max-w-full
                overflow-hidden text-ellipsis
                {btn_text_align}
                "
				>
					<!-- {event_file_obj.filename_no_ext} -->
					<!-- {ae_util.shorten_filename({filename: event_file_obj.filename_w_ext, max_length: 40})} -->
					{ae_util.shorten_string({
						string: event_file_obj.filename_no_ext,
						begin_length: 45,
						max_length: 65
					})}
					<!-- {event_file_obj.filename_no_ext.slice(0, 35)} -->
				</span>

				<span
					class="
                badge my-0 py-0.5
                preset-tonal-success hover:preset-filled-success-500 text-xs xl:text-sm
                "
					class:hidden={!event_file_obj.file_purpose}
				>
					{event_file_obj.file_purpose}
				</span>
			</button>
		{/if}
	</span>

	<span
		class="event_file_meta grow text-sm text-gray-500 flex flex-col sm:flex-row gap-1 wrap items-center justify-between w-64 max-w-80 font-mono"
		class:hidden={hide_meta}
	>
		<button
			type="button"
			onclick={() => {
				// let new_filename = event_file_obj.filename;

				// if ($events_loc.launcher.app_mode == 'onsite' && (event_file_obj.extension == 'ppt' || event_file_obj.extension == 'pptx') && event_file_obj.open_in_os == 'win') {
				//     // Example: the_new_filename.pptxwin
				//     new_filename = event_file_obj.filename + 'win';
				// }

				// ae_promises[event_file_id]
				ae_promises[event_file_id] = api.download_hosted_file({
					api_cfg: $ae_api,
					hosted_file_id: event_file_obj.hosted_file_id_random, // +'x'
					return_file: true,
					filename: event_file_obj.filename,
					auto_download: true,
					log_lvl: 1
				});

				// window.postMessage({ type: 'download_event_file', event_file_id: event_file_id, filename: event_file_obj.filename, auto_download: true }, '*');
			}}
			class="event_file_os"
			class:hidden={hide_os || 1 == 1}
		>
			{#if event_file_obj.open_in_os == 'win'}
				<span class="fab fa-windows"></span> Win
			{:else if event_file_obj.open_in_os == 'mac'}
				<span class="fab fa-apple"></span> Mac
			{:else}
				<span class="fas fa-folder-open"></span>
			{/if}
		</button>

		<Element_ae_crud
			trigger_patch={ae_triggers.open_in_os}
			api_cfg={$ae_api}
			object_type={'event_file'}
			object_id={event_file_id}
			field_name={'open_in_os'}
			field_type={'button'}
			field_value={ae_tmp.value__open_in_os}
			allow_null={false}
			hide_edit_btn={true}
			outline_element={false}
			show_crud={false}
			display_inline={true}
			class_li={''}
			on:ae_crud_updated={(e) => {
				console.log(`ae_crud_updated:`, e.detail);

				events_func.load_ae_obj_id__event_file({
					api_cfg: $ae_api,
					event_file_id: event_file_obj?.event_file_id_random,
					log_lvl: log_lvl
				});
			}}
		>
			<!-- {(event_file_obj?.open_in_os ? 'Hidden' : 'Not Hidden')} -->
			<button
				type="button"
				onclick={() => {
					// Go from null to win, win to mac, mac to null, null to win, etc.
					if (!event_file_obj?.open_in_os) {
						ae_tmp.value__open_in_os = 'win';
					} else if (event_file_obj?.open_in_os == 'win') {
						ae_tmp.value__open_in_os = 'mac';
					} else if (event_file_obj?.open_in_os == 'mac') {
						ae_tmp.value__open_in_os = null;
					} else {
						ae_tmp.value__open_in_os = null;
					}

					// $events_slct.exhibit_tracking_obj.open_in_os = !event_file_obj?.open_in_os;
					ae_triggers.open_in_os = true;
				}}
				class="btn btn-sm transition-all group"
				class:preset-tonal-success={event_file_obj?.open_in_os == 'win'}
				class:preset-tonal-warning={event_file_obj?.open_in_os == 'mac'}
				disabled={!$ae_loc.trusted_access}
				title="Open with: {event_file_obj?.open_in_os ?? 'Default'}"
			>
				{#if event_file_obj?.open_in_os == 'win'}
					<span class="fab fa-windows m-1"></span>
					<span class="hidden group-hover:inline-block"> Windows </span>
				{:else if event_file_obj?.open_in_os == 'mac'}
					<!-- <span class="fas fa-toggle-off m-1"></span> -->
					<span class="fab fa-apple m-1"></span>
					<span class="hidden group-hover:inline-block"> macOS </span>
				{:else}
					<span class="fas fa-folder-open m-1"></span>
					<span class="hidden group-hover:inline-block"> Default </span>
				{/if}
				<!-- {@html (event_file_obj?.hide ? '<span class="fas fa-eye m-1"></span> Unhide?' : '<span class="fas fa-eye-slash m-1"></span> Hide?')} -->
			</button>
		</Element_ae_crud>

		<span
			class="
            event_file_created_on
            text-xs text-center
            flex flex-row gap-1 items-center justify-end
            w-24 md:w-44
            preset-filled-surface-100-900
            rounded
            px-1
            py-0.5
            "
			class:hidden={hide_created_on}
		>
			<span class="fas fa-calendar-day"></span>
			<span class="flex flex-row flex-wrap md:flex-nowrap gap-1 items-center justify-end">
				<span class="w-18">
					{ae_util.iso_datetime_formatter(event_file_obj.created_on, 'date_short')}
				</span>
				<span class="w-18">
					<!-- <span class="fas fa-clock"></span> -->
					{ae_util.iso_datetime_formatter(event_file_obj.created_on, 'time_12_short')}
				</span>
			</span>
		</span>

		<span
			class="
            event_file_size
            text-xs text-center
            flex flex-row gap-1 items-center justify-end
            preset-filled-surface-100-900
            w-22 max-w-28
            rounded
            py-0.5
            "
			class:hidden={hide_size}
		>
			<span class="fas fa-save"></span>
			{#if event_file_obj.file_size}{ae_util.format_bytes(event_file_obj.file_size)}{/if}
		</span>

		<!-- {#if ($events_loc.launcher.app_mode == 'native' || $events_loc.launcher.app_mode == 'onsite')} -->
		<!-- {#if (show_bak_download)} -->
		<!-- <a href="/event/file/{event_file_id}/download" class="event_file_download" class:hidden="{!show_bak_download}" title="Download with original filename and extension"><span class="fas fa-download"></span></a> -->

		<!-- <a href="/event/file/{event_file_id}/download?filename={event_file_obj.filename}&use_os=true" class="ae_btn btn_info {btn_size}">{event_file_obj.filename}</a> -->
		<!-- {/if} -->
	</span>

	<!-- <button
    class="ae_btn btn_xs btn_outline_debug"
    class:hidden="{hide_api_download}"
    on:click={() => {
        // if (!confirm('Download file from API server?')) {
        //     return false;
        // }
        download_event_file({ 'event_file_id': event_file_id, 'return_file': true, filename: event_file_obj.filename, auto_download: true, log_lvl: 1 });
    }}
    title="Download file from API server?"
    >
    <span class="fas fa-download"></span>
</button> -->
</div>

<style>
</style>
