<script lang="ts">
// *** Import Svelte specific
import { onDestroy } from 'svelte';
import { browser } from '$app/environment';

// *** Import Aether specific variables and functions
import {
    ae_snip,
    ae_loc,
    ae_sess,
    ae_api,
    ae_trig,
    slct,
    slct_trigger
} from '$lib/stores/ae_stores';
import { idaa_loc, idaa_sess, idaa_slct } from '$lib/stores/ae_idaa_stores';

interface Props {
    // export let archive_content_id = null;
    lq__archive_content_obj: any;
}

let { lq__archive_content_obj }: Props = $props();

// This should be moved to a better location. Turn into a function?
let file_icons: any = $state({});
file_icons['ac3'] = 'file-audio';
file_icons['aac'] = 'file-audio';
file_icons['csv'] = 'file-csv';
file_icons['doc'] = 'file-word';
file_icons['docx'] = 'file-word';
file_icons['gif'] = 'file-image';
file_icons['htm'] = 'file-code';
file_icons['html'] = 'file-code';
file_icons['jpeg'] = 'file-image';
file_icons['jpg'] = 'file-image';
file_icons['key'] = 'file-powerpoint';
file_icons['m4a'] = 'file-audio';
file_icons['mkv'] = 'file-video';
file_icons['mov'] = 'file-video';
file_icons['mp3'] = 'file-audio';
file_icons['mp4'] = 'file-video';
file_icons['pdf'] = 'file-pdf';
file_icons['png'] = 'file-image';
file_icons['ppt'] = 'file-powerpoint';
file_icons['pptx'] = 'file-powerpoint';
file_icons['txt'] = 'file-alt';
file_icons['wav'] = 'file-audio';
file_icons['webp'] = 'file-image';
file_icons['xls'] = 'file-excel';
file_icons['xlsx'] = 'file-excel';
file_icons['zip'] = 'file-archive';

$effect(() => {
    if (browser && $lq__archive_content_obj?.archive_content_id) {
        console.log(
            '** Component Mounted: ** Media Player - Archive Content Obj'
        );

        document.body.scrollIntoView();

        const url = new URL(location.href);
        url.searchParams.set(
            'archive_content_id',
            $lq__archive_content_obj?.archive_content_id
        );
        // url.searchParams.set('archive_content_id', $idaa_slct?.archive_content_id);
        history.pushState({}, '', url);
    }
});

onDestroy(() => {
    console.log('** Component Destroyed: ** View - Archive Content Obj');

    const url = new URL(location.href);
    url.searchParams.delete('archive_content_id');
    history.pushState({}, '', url);
});

// Reminder: Styling is being done with Tailwind CSS, not Bootstrap.
</script>

<div
    class="ae_content d-flex justify-content-center align-items-center flex flex-col items-center justify-center gap-2">
    {#if !$idaa_slct.archive_content_obj.hosted_file_id}
        <span
            class="rounded-lg bg-yellow-100 p-2 text-center text-lg text-gray-500">
            <span class="fas fa-exclamation-triangle text-warning"></span>
            No Hosted File Linked
            <span class="fas fa-exclamation-triangle text-warning"></span>
        </span>
    {:else if file_icons[$idaa_slct.archive_content_obj.file_extension] == 'file-audio'}
        <audio
            autoplay
            controls
            class="w-full max-w-lg">
            <source
                id="view_archive_content_audio_source"
                src="{$ae_api.base_url}/v3/action/hosted_file/{$idaa_slct
                    .archive_content_obj
                    ?.hosted_file_id}/download?key={$ae_api.account_id}"
                type="audio/mpeg" />
            <!--<source src="audio.ogg" type="audio/ogg">-->
            Your browser does not support the audio tag.
        </audio>
    {:else if file_icons[$idaa_slct.archive_content_obj.file_extension] == 'file-video'}
        <!-- ID: {$idaa_slct.archive_content_obj?.hosted_file_id} -->
        <!-- style="max-width: 100%; max-height: 65vh;" -->
        <video autoplay controls class="h-auto w-full">
            <source
                src="{$ae_api.base_url}/v3/action/hosted_file/{$idaa_slct
                    .archive_content_obj
                    ?.hosted_file_id}/download?key={$ae_api.account_id}"
                type="video/mp4" />
            <!--<source src="video.ogg" type="video/ogg">-->
            <track kind="captions" src="" srclang="en" label="English" />
            Your browser does not support the video tag.
        </video>
    {:else if file_icons[$idaa_slct.archive_content_obj.file_extension] == 'file-image'}
        <img
            src="{$ae_api.base_url}/v3/action/hosted_file/{$idaa_slct
                .archive_content_obj
                ?.hosted_file_id}/download?key={$ae_api.account_id}"
            alt={$idaa_slct.archive_content_obj.name}
            style="max-width: 100%; max-height: 65vh;" />
    {:else}
        <a
            href="{$ae_api.base_url}/v3/action/hosted_file/{$idaa_slct
                .archive_content_obj
                ?.hosted_file_id}/download?key={$ae_api.account_id}"
            target="_blank"
            class="
                novi_btn
                btn btn-md btn-secondary
                preset-tonal-primary
                border-primary-500 hover:preset-filled-primary-500
                border
                transition
                "
            title="Download: {$idaa_slct.archive_content_obj.filename}"
            download={$idaa_slct.archive_content_obj.filename}>
            <span class="fas fa-download m-1"></span>
            Download:
            {$idaa_slct.archive_content_obj.filename}
        </a>
    {/if}

    {#if $idaa_slct.archive_content_obj.description}
        <div class="archive_content__description">
            {@html $idaa_slct.archive_content_obj.description}
        </div>
    {/if}

    {#if $idaa_slct.archive_content_obj.content_html}
        <div class="archive_content__content_html">
            {@html $idaa_slct.archive_content_obj.content_html}
        </div>
    {/if}
</div>
