<script lang="ts">
export let data;
// console.log(`ae_ Svelte Hosted Files +page data:`, data);

import { onMount } from 'svelte';


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

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;

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


function handle_submit_form(event) {
    console.log('*** handle_submit_form() ***');

    console.log(event.target.file_list);

    const form_data = new FormData();

    form_data.append('title_part_1', event.target.title_part_1.value);
    form_data.append('title_part_2', event.target.title_part_2.value);

    form_data.append('subtitle_part_1', event.target.subtitle_part_1.value);
    form_data.append('subtitle_part_2', event.target.subtitle_part_2.value);

    form_data.append('font_color', event.target.font_color.value);

    form_data.append(`file`, event.target.audio_file.files[0]);
    if (event.target.title_image.files.length > 0) {
        form_data.append(`title_image`, event.target.title_image.files[0]);
    }

    download_filename = `${event.target.title_part_1.value}_${event.target.title_part_2.value}_${event.target.subtitle_part_1.value}_${event.target.subtitle_part_2.value}.mp4`

    // for (let i = 0; i < event.target.file_list.files.length; i++) {
    //     form_data.append(`file_list`, event.target.event_file_upload_file_list.files[i]);
    // }

    let params = null;

    let endpoint = '/hosted_file/create_video';

    console.log(form_data);

    params = null;

    // Uncomment and the file_uploads_post_promise is not seen by the "await" below
    // file_uploads_post_promise = await api.post_object({api_cfg: $ae_api, endpoint: endpoint, params: params, data:form_data});
    // Uncomment so that the file_uploads_post_promise is not seen by the "await" below
    file_uploads_post_promise = api.post_object({api_cfg: $ae_api, endpoint: endpoint, params: params, form_data:form_data, return_blob: true, filename: 'test.mp4', auto_download: false})
    .then(function (result) {
        console.log(result);

        let file_blob = new Blob([result.data]);
        // console.log(file_blob);
        let file_obj_url = window.URL.createObjectURL(file_blob); // The img src
        // const url = window.URL.createObjectURL(new Blob([result.data]));
        download_src = file_obj_url;
        // download_filename = file_obj_url;

    });

    console.log(file_uploads_post_promise);

    // let file_blob = new Blob([file_uploads_post_promise.data]);
    // // console.log(file_blob);
    // let file_obj_url = URL.createObjectURL(file_blob); // The img src
    // download_src = file_obj_url;

    // dispatch(
    //     'event_file_obj_li_updated',
    //     {
    //         link_to_type: link_to_type,
    //         link_to_id: link_to_id,
    //     }
    // );

    return true;
}





function handle_submit_form_clip(event) {
    console.log('*** handle_submit_form() ***');

    console.log(event.target.file_list);

    const form_data = new FormData();

    form_data.append('start_time', event.target.start_time.value);
    form_data.append('end_time', event.target.end_time.value);

    if (event.target.reencode.value == '1' || event.target.reencode.value == 'true') {
        form_data.append('reencode', 'true');
    } else {
        form_data.append('reencode', 'false');
    }
    // form_data.append('reencode', event.target.reencode.value);

    form_data.append(`video_file`, event.target.video_file.files[0]);

    download_filename = `clipped_file_test.mp4`

    // for (let i = 0; i < event.target.file_list.files.length; i++) {
    //     form_data.append(`file_list`, event.target.event_file_upload_file_list.files[i]);
    // }

    let params = null;

    let endpoint = '/hosted_file/clip_video';

    console.log(form_data);

    params = null;

    file_uploads_clip_post_promise = api.post_object({api_cfg: $ae_api, endpoint: endpoint, params: params, form_data:form_data, return_blob: true, filename: 'test.mp4', auto_download: false})
    .then(function (result) {
        console.log(result);

        let file_blob = new Blob([result.data]);
        // console.log(file_blob);
        let file_obj_url = window.URL.createObjectURL(file_blob); // The img src
        // const url = window.URL.createObjectURL(new Blob([result.data]));
        download_src = file_obj_url;
        // download_filename = file_obj_url;

    });

    console.log(file_uploads_clip_post_promise);

    return true;
}

</script>


<section
    class="ae__hosted_files__av_util md:container h-full mx-auto space-y-4 {container_class_li.join(' ')}">

    <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 on:submit|preventDefault={handle_submit_form} on:keydown={e => e.key === 'Escape' && handle_cancel_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 variant-filled-warning 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}



    <hr>


    <h2>Clip mp4</h2>
    <p>This AV utility will take an mp4 video file create a clipped mp4 video file. This process may take a few seconds to a handful of minutes. Re-encoding will take longer. Please be patient while it is processing.</p>
    <form on:submit|preventDefault={handle_submit_form_clip} on:keydown={e => e.key === 'Escape' && handle_cancel_form_clip} class="av_util_mp4_clip 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="00:00:00" 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 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}

</section>


<style>

</style>
