<script lang="ts">
// Imports
// Import components and elements
import AE_Comp_Hosted_Files_Download_Button from '$lib/elements/ae_comp__hosted_files_download_button.svelte';

// Import storage, functions, and libraries
import type { key_val } from '$lib/stores/ae_stores';

import { api } from '$lib/ae_api/api';
import { ae_util } from '$lib/ae_utils/ae_utils';
import {
    ae_snip,
    ae_loc,
    ae_sess,
    ae_api,
    ae_trig,
    slct,
    slct_trigger
} from '$lib/stores/ae_stores';

// Exports

// export let hosted_file_id_li: string[] = [];
// export let hosted_file_obj_li: any[] = [];

interface Props {
    log_lvl?: number;
    // export let hosted_file_obj_kv: key_val = {};
    video_clip_file_kv?: key_val;
    class_li_default?: string;
    class_li?: string;
    link_to_type: string;
    link_to_id: string;
}

let {
    log_lvl = 0,
    video_clip_file_kv = $bindable({}),
    class_li_default = 'flex flex-row flex-wrap gap-2 items-center justify-center w-full max-w-2xl p-2 mx-auto my-1 border border-surface-500/20 rounded-lg preset-tonal-surface',
    class_li = '',
    link_to_type,
    link_to_id
}: Props = $props();

let ae_promises: key_val = $state({});
</script>

<h3 class="h3">{Object.entries(video_clip_file_kv).length}× files clipped</h3>
<div class="{class_li_default} {class_li} ">
    {#each Object.entries(video_clip_file_kv) as [hosted_file_id, hosted_file_obj] (hosted_file_id)}
        <AE_Comp_Hosted_Files_Download_Button
            {hosted_file_id}
            {hosted_file_obj}
            max_filename={30}
            classes="btn btn-sm lg:btn-md preset-tonal-primary hover:preset-filled-primary-500 min-w-72 lg:min-w-96"
            linked_to_type={link_to_type}
            linked_to_id={link_to_id} />
    {/each}
</div>
