<script lang="ts">
// 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 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
});
</script>

<section class="ae__hosted_files__av_util container space-y-4 pb-20">
    <div class="rounded-lg border border-gray-200 p-2">
        <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-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}>
                {#snippet label()}
                    <span>
                        <div>
                            <Upload size="1em" />
                            <strong class="bg-green-100 p-1"
                                >Upload video files</strong>
                        </div>
                        <span
                            class="text-sm text-gray-600 italic dark:text-gray-400">
                            <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={''} />
        </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}

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

        <!-- <hr /> -->

        <!-- {$ae_sess.files?.uploaded_file_li?.length}&times; Files Upload History
    History:
    {#each Object.entries($ae_loc.files.uploaded_file_kv) as [hosted_file_id, hosted_file_obj]}
        <div>
            <span>{hosted_file_obj.hosted_file_id}</span>
            <span>{hosted_file_obj.filename}</span>
            <span>{hosted_file_obj.extension}</span>
            <button
                type="button"
                class="btn btn-sm btn-primary"
                >
                Clip Video
            </button>
        </div>
    {/each} -->

        <!-- <form class="av_util_mp4_clip form space-y-4"> -->

        <!-- <label class="label">Start time (HH:MM:SS) <input type="text" name="start_time" value="00:00:00" placeholder="HH:MM:SS (00:01:30)" class="input w-32" /></label>
        <label class="label">End time (HH:MM:SS) <input type="text" name="end_time" value="01:59:59" placeholder="HH:MM:SS (01:05:25)" class="input w-32" /></label>

        <label class="label">Re-encode (true or false) <input type="text" name="reencode" value="false" placeholder="true" class="input w-32" /></label> -->

        <!-- File type extension is limited to mp4 only -->
        <!-- <label class="label">
            <div>Video file (mp4)</div>
            <input type="file" name="video_file" accept="video/*" class="input file w-96" />
        </label> -->

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

        <!-- </form> -->

        <!-- <hr /> -->

        <!-- {#await file_uploads_clip_post_promise}
        <p class="highlight">Converting... This may take a few minutes.</p>
    {:then}
        {#if file_uploads_clip_post_promise}
        <a href={download_clip_src} download={download_clip_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 video file to clip.</p>
        {/if}
    {/await} -->
    </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>

<style>
</style>
