<script lang="ts">
	export let log_lvl: number = 0;

	// Imports
	// Import components and elements
	import Element_input_files_tbl from '$lib/elements/element_input_files_tbl.svelte';

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

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

	// Exports
	// Expecting these for link_to_type: 'event', 'event_location', 'archive_content', etc
	export let link_to_type: string;
	export let link_to_id: string;

	export let input_name = 'file_list';
	export let multiple: boolean = true;
	export let required: boolean = true;
	export let accept: string =
		'audio/*, image/*, video/*, .bak, .cfg, .css, .csv, .doc, .docx, .gz, .htm, .html, .ini, .iso, .j2, .json, .key, .keynote, .md, .pdf, .ppt, .pptx, .rar, .rtf, .sql, .svelte, ttf, .txt, .xls, .xlsx, .xz, .zip, .bin, .dmg, .exe, .js, .msi, .php, .py, .sh';

	export let class_li_default: string =
		'flex flex-col gap-1 items-center justify-center w-full max-w-2xl mx-auto my-1';
	export let class_li: string = '';
	export let input_class_li: string[] = ['file_drop_area'];
	export let table_class_li: string[] = ['table', 'table-sm', 'table-striped', '', 'text-sm'];

	export let upload_complete: boolean = false;
	export let submit_status: null | string = null;

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

	// Local Variables
	let task_id = link_to_id;
	let input_file_list: any = null;
	let ae_promises: key_val = {}; // Promise<any>;
	let ae_triggers: key_val = {};

	let input_element_id = 'ae_comp__hosted_files_upload__input';

	let form_kv: key_val = {
		start_time: null,
		end_time: null,
		reencode: null,
		video_file: null
	};
	let download_clip_src: string;
	let download_clip_filename: string;

	// *** Functions and Logic
	async function handle_submit_form_files(event) {
		console.log('*** handle_submit_form() ***');

		$ae_sess.files.disable_submit__hosted_file_obj = true;
		$ae_sess.files.submit_status = 'saving';
		submit_status = 'saving';
		upload_complete = false;

		hosted_file_id_li = [];
		hosted_file_obj_li = [];

		let hosted_file_results;

		form_kv = {
			start_time: event.target.start_time.value,
			end_time: event.target.end_time.value,
			reencode: event.target.reencode.value,
			video_file: event.target.file_list.files[0]
		};

		// 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]);

		// let download_filename = `clipped_file_test.mp4`;

		// let params = null;

		// let endpoint = '/hosted_file/clip_video';

		// console.log(form_data);

		// params = null;

		if (event.target[input_element_id].files.length > 0) {
			task_id = link_to_id; // Ideally this should be the file hash, but we may be uploading multiple files at once. This should be done with a loop instead?

			// Loop through each file and upload them individually in event.target[input_element_id].files
			// The task_id should be the file hash.
			// processed_file_list[i] has the file hash_sha256, hash_sha256_match, warnings, uploaded, uploaded_bytes, filename, and file_size_bytes.
			for (let i = 0; i < event.target[input_element_id].files.length; i++) {
				let tmp_file = event.target[input_element_id].files[i];

				task_id = $ae_sess.files.processed_file_list[i].hash_sha256;

				hosted_file_results = await handle_input_upload_files([tmp_file], form_kv, task_id);

				if (hosted_file_results) {
					console.log(`hosted_file_results:`, hosted_file_results);
				} else {
					console.log(`hosted_file_results:`, hosted_file_results);
				}
			}
			// hosted_file_results = await handle_input_upload_files(event.target[input_element_id].files, task_id);
			$ae_sess.files.processed_file_list = [];
			$ae_sess = $ae_sess;
			event.target.reset();
			// await tick();

			if (log_lvl) {
				console.log(`hosted_file_id_li: ${hosted_file_id_li}`, hosted_file_id_li);
			} else if (log_lvl > 1) {
				console.log('hosted_file_results:', hosted_file_results);
			}
		}

		$ae_sess.files.disable_submit__hosted_file_obj = false;
		$ae_sess.files.submit_status = 'saved';
		submit_status = 'saved';
		upload_complete = true;
	}

	async function handle_input_upload_files(input_upload_files, form_kv, task_id) {
		console.log('*** handle_input_upload_files() ***');
		console.log(input_upload_files);
		console.log(form_kv);

		const form_data = new FormData();

		// form_data.append('account_id', $ae_loc.account_id);
		// form_data.append('link_to_type', link_to_type);
		// form_data.append('link_to_id', link_to_id);

		form_data.append('start_time', form_kv.start_time);
		form_data.append('end_time', form_kv.end_time);

		if (form_kv.reencode == '1' || form_kv.reencode == 'true') {
			form_data.append('reencode', 'true');
		} else {
			form_data.append('reencode', 'false');
		}

		// There should really only be one file uploaded at a time for now.
		for (let i = 0; i < input_upload_files.length; i++) {
			form_data.append(`video_file`, input_upload_files[i]);
		}

		// hash_sha256, uploaded, uploaded_bytes
		// $ae_sess.files.processed_file_list[i] = {
		//     ...$ae_sess.files.processed_file_list[i],
		//     uploaded: $ae_sess.api_upload_kv[link_to_id].percent_completed,
		//     uploaded_bytes: $ae_sess.api_upload_kv[link_to_id].uploaded_bytes,
		// };

		let params = null;

		let endpoint = '/hosted_file/clip_video';

		console.log(form_data);

		params = null;

		// Uncomment and the post_promise is not seen by the "await" below
		// post_promise = await api.post_object({api_cfg: $cfg.api, endpoint: endpoint, params: params, data:form_data});
		// Uncomment so that the post_promise is not seen by the "await" below
		ae_promises.upload__hosted_file_obj = api
			.post_object({
				api_cfg: $ae_api,
				endpoint: endpoint,
				params: params,
				form_data: form_data,
				return_blob: true,
				filename: 'clipped_video_test.mp4',
				auto_download: false,
				task_id: task_id,
				log_lvl: log_lvl
				// retry_count: 1,
			})
			.then(async 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_clip_src = file_obj_url;
				// download_filename = file_obj_url;

				return true;

				// // WARNING!!!! ONLY ONE FILE IS EXPECTED TO BE UPLOADED AT A TIME!!!
				// // NOTE: The /hosted_file/upload_files endpoint will always return a list of successful files uploaded. In this case we are only uploading one file and expecting a list of one item.
				// let x = 0;
				// console.log(result[x]);
				// let hosted_file_obj = result[x];

				// let hosted_file_id = hosted_file_obj.hosted_file_id_random;

				// hosted_file_id_li.push(hosted_file_id);
				// hosted_file_obj_li.push(hosted_file_obj);

				// let hosted_file_data: key_val = {};
				// hosted_file_data['hosted_file_id_random'] = hosted_file_id;
				// hosted_file_data['for_type'] = link_to_type;
				// hosted_file_data['for_id_random'] = link_to_id;
				// hosted_file_data['filename'] = hosted_file_obj.filename;
				// hosted_file_data['extension'] = hosted_file_obj.extension;
				// hosted_file_data['enable'] = true;
				// console.log(hosted_file_data);

				// return hosted_file_data;

				// $ae_sess.files.new_upload_list[i].uploaded_bytes = 10; // fake 10 bytes at least...

				// let event_file_id = await events_func.create_hosted_file_obj_from_hosted_file_async({
				//     api_cfg: $ae_api,
				//     hosted_file_id: hosted_file_id,
				//     data: event_file_data,
				//     log_lvl: log_lvl
				//     })
				// .then(function (create_result) {
				//     console.log(create_result); // NOTE: This should be the event_file_id string
				//     // let event_file_id = create_result;
				//     return create_result;
				// });

				// return event_file_id;
			})
			// .then(function (hosted_file_data) {
			//     return hosted_file_data;
			// })
			.catch(function (error: any) {
				console.log('Something went wrong.');
				console.log(error);
				return false;
			})
			.finally(function () {
				// $slct_trigger = 'load__hosted_file_obj_li';
			});

		console.log(ae_promises.upload__hosted_file_obj);
		let hosted_file_result = ae_promises.upload__hosted_file_obj;

		return hosted_file_result;
	}
</script>

<div>
	<!-- class:hidden={!$ae_loc.trusted_access} -->
	<form on:submit|preventDefault={handle_submit_form_files} class="{class_li_default} {class_li}">
		<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:01:15"
				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
		>

		{#await ae_promises.upload__hosted_file_obj}
			<div class="text-lg flex flex-row gap-1 items-center justify-center">
				<span class="fas fa-spinner fa-spin m-1"></span>
				<span class="">
					Uploading
					{#if $ae_sess.api_upload_kv[task_id]}
						{$ae_sess.api_upload_kv[task_id].percent_completed}%
					{/if}
				</span>
			</div>
		{/await}

		<label
			for="ae_comp__hosted_files_upload__input"
			class="svelte_input_file_label text-center"
			class:hidden={$ae_sess.files.disable_submit__hosted_file_obj}
		>
			<slot name="label">
				<div>
					<span class="fas fa-upload"></span>
					<!-- Select files to upload -->
					<!-- <span class="fas fa-file-archive"></span> -->
					<strong class="bg-blue-300 p-1">Upload files</strong>
					<!-- (drag and drop) -->
				</div>
				<span class="text-sm text-gray-600 dark:text-gray-400 italic">
					<strong>Video files only</strong><br />
					(mp4 or mkv)
				</span>
			</slot>
		</label>

		<input
			id={input_element_id}
			type="file"
			bind:files={input_file_list}
			{multiple}
			{required}
			{accept}
			name={input_name}
			class="svelte_input_file_element file-dropzone-input block w-full text-lg text-gray-900 border border-gray-300 rounded-lg cursor-pointer bg-gray-50 dark:text-gray-400 focus:outline-hidden dark:bg-gray-700 dark:border-gray-600 dark:placeholder-gray-400 {input_class_li.join(
				' '
			)}"
			class:hidden={$ae_sess.files.disable_submit__hosted_file_obj}
		/>

		<Element_input_files_tbl
			bind:input_file_list
			bind:file_list_status={$ae_sess.files.status__file_list}
			bind:processed_file_list={$ae_sess.files.processed_file_list}
			{table_class_li}
		/>

		<button
			type="submit"
			class="btn btn-lg btn-primary preset-tonal-primary border border-primary-500 hover:preset-tonal-success border border-success-500 w-54"
			disabled={$ae_sess.files.disable_submit__hosted_file_obj ||
				$ae_sess.files.status__file_list != 'ready'}
		>
			{#await ae_promises.upload__hosted_file_obj}
				<span class="fas fa-spinner fa-spin m-1"></span>
				<span class="">
					Uploading
					{#if $ae_sess.api_upload_kv[task_id]}
						{$ae_sess.api_upload_kv[task_id].percent_completed}%
					{/if}
				</span>
			{:then}
				<span class="fas fa-upload m-1"></span>
				<span class="text-sm"> Upload? </span>
				<!-- <span class="fas fa-save m-1"></span> -->
				<span class="grow font-bold">
					{#if $ae_sess.files.processed_file_list?.length > 0}
						<!-- {#each $ae_sess.files.processed_file_list as file_obj, index}
                        <span class="text-xs">
                            {file_obj.filename}
                        </span>
                    {/each} -->
						{$ae_sess.files.processed_file_list.length == 1
							? `${$ae_sess.files.processed_file_list.length} file`
							: `${$ae_sess.files.processed_file_list.length} files`}
					{:else}
						<span class="text-xs"> No files selected </span>
					{/if}
					<!-- Files -->
				</span>
			{/await}
		</button>
	</form>

	<hr />

	{#await ae_promises.upload__hosted_file_obj}
		<span class="fas fa-spinner fa-spin m-1"></span>
		<p class="highlight">Converting... This may take a few minutes.</p>
	{:then}
		{#if ae_promises.upload__hosted_file_obj}
			<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>
