<script lang="ts">
import { run } from 'svelte/legacy';

// console.log(`ae_ Svelte Hosted Files +page data:`, data);

import { onMount } from 'svelte';

// import { api } from '$lib/api.js';
import {
    ae_loc,
    ae_sess,
    ae_api,
    slct,
    slct_trigger
} from '$lib/stores/ae_stores';
// import { ae_util } from '$lib/ae_utils/ae_utils';
import type { key_val } from '$lib/stores/ae_stores';

import Comp_hosted_files_upload from '$lib/elements/ae_comp__hosted_files_upload.svelte';
import Comp_hosted_files_clip_video from '$lib/elements/ae_comp__hosted_files_clip_video.svelte';
import Comp_hosted_files_clip_video_li from '$lib/elements/ae_comp__hosted_files_clip_video_li.svelte';

import Element_manage_hosted_file_li_wrap from '$lib/elements/element_manage_hosted_file_li_all.svelte';
import { ArrowLeftRight, Trash2, Upload } from '@lucide/svelte';
let { data } = $props();

let log_lvl = 1;

let ae_promises: key_val = {};

// export let container_class_li = [];

let file_uploads_post_promise;
let download_src;
let download_filename;

let file_uploads_clip_post_promise;
let download_clip_src;
let download_clip_filename;

let hosted_file_upload: key_val = $state({
    // link_to_type: 'account',
    // link_to_id: ae_loc.account_id,
    hosted_file_id_li: [],
    hosted_file_obj_li: [],
    clip_complete: false,
    upload_complete: false,
    submit_status: null
});

let hosted_file_clip: key_val = $state({
    video_clip_file_kv: {},
    clip_complete: false,
    submit_status: null
});

if (!$ae_loc.files) {
    $ae_loc.files = {};
    $ae_loc.files.processed_file_kv = {};
    $ae_loc.files.uploaded_file_kv = {};
    $ae_loc.files.video_clip_file_kv = {};
    // $ae_loc.files.uploaded_file_list = [];
    // $ae_loc.files.video_clip_file_list = [];
}
if (!$ae_loc.files.processed_file_kv) {
    $ae_loc.files.processed_file_kv = {};
}

if (!$ae_sess.files) {
    $ae_sess.files = {};
}
if (typeof $ae_sess.files.upload_complete === 'undefined') {
    $ae_sess.files.upload_complete = false;
}

$effect(() => {
    // if ($ae_sess.files.upload_complete && $ae_sess.files.uploaded_file_li) {
    // // Append this list to the $ae_loc.files.uploaded_file_li list
    // $ae_loc.files.uploaded_file_li = [
    //     ...$ae_loc.files.uploaded_file_li,
    //     ...$ae_sess.files.uploaded_file_li
    // ];
    // }

    if ($ae_sess.files.upload_complete && $ae_sess.files.uploaded_file_kv) {
        // Add this key-value pair to the $ae_loc.files.uploaded_file_kv object
        $ae_loc.files.uploaded_file_kv = {
            ...$ae_loc.files.uploaded_file_kv,
            ...$ae_sess.files.uploaded_file_kv
        };
        $ae_sess.files.upload_complete = false;
    }

    if ($ae_sess.files.clip_complete && $ae_sess.files.video_clip_file_kv) {
        // Add this key-value pair to the $ae_loc.files.video_clip_file_kv object
        $ae_loc.files.video_clip_file_kv = {
            ...$ae_loc.files.video_clip_file_kv,
            ...$ae_sess.files.video_clip_file_kv
        };
        $ae_sess.files.clip_complete = false;
    }
});

// $effect(() => {
//     if ($ae_sess.files.upload_complete && $ae_sess.files.uploaded_file_kv) {
//     // Add this key-value pair to the $ae_loc.files.uploaded_file_kv object
//     $ae_loc.files.uploaded_file_kv = {
//         ...$ae_loc.files.uploaded_file_kv,
//         ...$ae_sess.files.uploaded_file_kv
//     };
//     }
// });

// $effect(() => {
//     if ($ae_sess.files.clip_complete && $ae_sess.files.video_clip_file_kv) {
//     // Add this key-value pair to the $ae_loc.files.video_clip_file_kv object
//     $ae_loc.files.video_clip_file_kv = {
//         ...$ae_loc.files.video_clip_file_kv,
//         ...$ae_sess.files.video_clip_file_kv
//     };
//     }
// });

onMount(() => {
    console.log('Hosted Files: AV Utilities +page.svelte');
});
</script>

<!-- <section
    class="
        ae__hosted_files__av_util
        space-y-4
        flex flex-col gap-1
        items-center
        justify-start
        py-1 px-2 pb-16
        h-full
        max-h-full
        min-w-full
        max-w-6xl
        overflow-auto
        "
    > -->

<!-- <div class="border border-gray-200 p-2 rounded-lg"> -->

<h1 class="h1">Clip and Scale Video Files</h1>
<p>
    This AV utility will take an mp4 video file and create a clipped mp4 video
    file. By default, videos will be scaled down to 1920x1080. This process
    takes at least 30 seconds, but it can easily take a handful of minutes. The
    scaling option requires that the video be re-encoded. Please be patient
    while it is processing.
</p>

<h2 class="h2">
    Step 1: Upload Video File or Select from Hosted Files

    <button
        type="button"
        class="btn btn-sm preset-tonal-warning border-warning-500 hover:preset-filled-warning-500 float-right border"
        title="Toggle between Upload and Select from Hosted Files"
        onclick={() => {
            if ($ae_sess.files.add_to_use_files_method == 'upload') {
                $ae_sess.files.add_to_use_files_method = 'select';
            } else {
                $ae_sess.files.add_to_use_files_method = 'upload';
            }
        }}>
        <ArrowLeftRight size="1em" class="m-1" />
        Upload/Select
    </button>
</h2>

<div class:hidden={$ae_sess.files.add_to_use_files_method != 'upload'}>
    <Comp_hosted_files_upload
        class_li="border border-surface-500/20 rounded-md p-2 preset-tonal-surface hover:preset-filled-surface-100-900 transition-colors"
        link_to_type="account"
        link_to_id={$ae_loc.account_id}
        bind:hosted_file_id_li={hosted_file_upload.hosted_file_id_li}
        bind:hosted_file_obj_li={hosted_file_upload.hosted_file_obj_li}
        bind:hosted_file_obj_kv={$ae_sess.files.uploaded_file_kv}
        bind:upload_complete={$ae_sess.files.upload_complete}
        {log_lvl}>
        {#snippet label()}
            <span>
                <div class="mb-1 flex items-center gap-2">
                    <Upload size="1em" class="text-primary-500" />
                    <strong class="preset-tonal-success rounded-full px-3 py-1"
                        >Upload video files</strong>
                </div>
                <span class="text-sm italic opacity-70">
                    <strong>Aether hosted files only</strong><br />
                    Recommended: video (mp4, mkv)<br />
                </span>
            </span>
        {/snippet}
    </Comp_hosted_files_upload>
</div>

<div class:hidden={$ae_sess.files.add_to_use_files_method != 'select'} class="">
    <Element_manage_hosted_file_li_wrap
        link_to_type={'account'}
        link_to_id={$ae_loc?.account_id}
        allow_basic={true}
        allow_moderator={true}
        class_li={''}
        max_file_count={39}
        file_type={'video'} />
</div>

<hr />

<h2 class="h2">
    Step 2: Clip Video

    <button
        type="button"
        onclick={() => {
            $ae_loc.files.uploaded_file_kv = {};
        }}
        class="btn btn-sm preset-tonal-warning border-warning-500 hover:preset-filled-warning-500 float-right border">
        <Trash2 size="1em" class="m-1" />
        Clear Upload History
    </button>
</h2>
{#if $ae_loc.files.uploaded_file_kv && Object.entries($ae_loc.files.uploaded_file_kv).length > 0}
    <Comp_hosted_files_clip_video
        class_li="border border-gray-300 rounded-md p-2 bg-gray-100 hover:bg-gray-200"
        link_to_type="account"
        link_to_id={$ae_loc.account_id}
        bind:hosted_file_obj_kv={$ae_loc.files.uploaded_file_kv}
        bind:video_clip_file_kv={$ae_loc.files.video_clip_file_kv}
        bind:clip_complete={$ae_sess.files.clip_complete}
        bind:submit_status={hosted_file_clip.submit_status}
        {log_lvl}></Comp_hosted_files_clip_video>
{:else}
    <p>Upload a video file to clip first.</p>
{/if}

<hr />

<h2 class="h2">
    Step 3: Download Recently Processed Video Clips

    <button
        type="button"
        onclick={() => {
            $ae_loc.files.video_clip_file_kv = {};
        }}
        class="btn btn-sm preset-tonal-warning border-warning-500 hover:preset-filled-warning-500 float-right border">
        <Trash2 size="1em" class="m-1" />
        Clear Clip History
    </button>
</h2>
{#if $ae_loc.files.video_clip_file_kv && Object.entries($ae_loc.files.video_clip_file_kv).length > 0}
    <Comp_hosted_files_clip_video_li
        class_li="border border-gray-300 rounded-md p-2 bg-gray-100 hover:bg-gray-200"
        link_to_type="account"
        link_to_id={$ae_loc.account_id}
        bind:video_clip_file_kv={$ae_loc.files.video_clip_file_kv}
        {log_lvl}></Comp_hosted_files_clip_video_li>
{:else}
    <p>Clip a video file first.</p>
{/if}

<!-- </div> -->

<!-- <h2 class="h2">Step X: Manage Hosted Files</h2> -->
<!-- Show files for this account -->
<!-- <Element_manage_hosted_file_li_wrap
    link_to_type={'account'}
    link_to_id={$ae_loc?.account_id}
    allow_basic={true}
    allow_moderator={true}
    container_class_li={''}
    /> -->

<!-- </section> -->
