<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/ae_stores';
// import { ae_util } from '$lib/ae_utils/ae_utils';
import type { key_val } from '$lib/ae_stores';

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

import Element_manage_hosted_file_li_wrap from '$lib/element_manage_hosted_file_li_all.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 = {};
}

$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 border-warning-500 hover:preset-filled-warning-500 float-right"
            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';
                }
            }}
            >
            <span class="fas fa-exchange-alt m-1"></span>
            Upload/Select
        </button>
    </h2>

    <div class:hidden={$ae_sess.files.add_to_use_files_method != 'upload'}>
    <Comp_hosted_files_upload
        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_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={log_lvl}
        >
        {#snippet label()}
            <span >
                <div>
                    <span class="fas fa-upload"></span>
                    <strong class="bg-green-100 p-1">Upload video files</strong>
                </div>
                <span class="text-sm text-gray-600 dark:text-gray-400 italic">
                    <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 border-warning-500 hover:preset-filled-warning-500 float-right"
            >
            <span class="fas fa-broom m-1"></span>
            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={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 border-warning-500 hover:preset-filled-warning-500 float-right"
            >
            <span class="fas fa-broom m-1"></span>
            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={log_lvl}
            >
        </Comp_hosted_files_clip_video_li>
    {:else}
        <p>Clip a video file first.</p>
    {/if}

<!-- </div> -->


{#if 1===2}

<div class="border border-gray-200 p-2 rounded-lg hidden">
    <h2 class="h2">Convert mp3 to mp4</h2>
    <p>This AV utility will take an mp3 audio file and a static image template and create a mp4 video file. This process may take a few seconds to a handful of minutes. Please be patient while it is processing.</p>
    <form onsubmit={handle_submit_form} class="av_util_mp3_to_mp4 space-y-4">

        <input type="text" name="title_part_1" value="Title Part 1" placeholder="Title Part 1" class="input" />
        <input type="text" name="title_part_2" value="Title Part 2" placeholder="Title Part 2" class="input" />

        <input type="text" name="subtitle_part_1" value="Sub-Title Part 1" placeholder="Sub-Title Part 1" class="input" />
        <input type="text" name="subtitle_part_2" value="Sub-Title Part 2" placeholder="Sub-Title Part 2" class="input" />

        <input type="text" name="font_color" value="black" placeholder="Font color" class="input w-32" />

        <!-- File type extension is limited to mp3 only -->
        <label class="label">
            <div>Audio file (mp3)</div>
            <input type="file" name="audio_file" accept="audio/*" class="input w-96" />
        </label>

        <!-- File type extension is limited to png only -->
        <label class="label">
            <div>Static image template (png)</div>
            <input type="file" name="title_image" accept="image/*" class="input w-96" />
        </label>

        <button type="submit" class="btn preset-filled-warning-500 mx-1">
            <span class="fas fa-upload mx-1"></span>
            Submit
        </button>

    </form>

    <hr />

    {#await file_uploads_post_promise}
        <p class="highlight">Converting... This may take a few minutes.</p>
    {:then}
        {#if file_uploads_post_promise}
        <a href={download_src} download={download_filename} class="ae_btn btn_lg btn_primary"><span class="fas fa-download"></span> Ready to Download</a>
        {:else}
        <p>Fill out the form and select the audio file and static image template file.</p>
        {/if}
    {/await}
</div>

{/if}



<!-- <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> -->
