<script>"use strict";
import Icon from "./Icon.svelte";
import Button from "./Button.svelte";
import { createEventDispatcher } from "svelte";
export let type = "line";
export let state = "empty";
export let noteDescription = "";
export let subHeading = "";
const dispatch = createEventDispatcher();
let selectedFile = null;
function handleFileChange(event) {
  if (state === "disabled") return;
  const input = event.target;
  const file = input.files?.[0];
  if (file) {
    selectedFile = file;
    state = "filled";
    dispatch("fileSelect", { file });
  }
}
function handleFileDrop(event) {
  event.preventDefault();
  if (state === "disabled") return;
  const files = event.dataTransfer?.files;
  if (files && files.length > 0) {
    selectedFile = files[0];
    state = "filled";
    dispatch("fileSelect", { file: files[0] });
  }
}
function handleDragOver(event) {
  event.preventDefault();
}
</script>

{#if type === 'line' && (state === 'empty' || state === 'disabled')}
	<div class="block mb-1 text-4xl font-medium text-stone-950">Upload file</div>

	<input
		class="hidden"
		id="file_input"
		type="file"
		on:change={handleFileChange}
		disabled={state === 'disabled'}
	/>

	<div class="flex" class:opacity-30={state === 'disabled'}>
		<label
			for="file_input"
			class="text-2xl text-white font-medium bg-stone-700 rounded-l-lg focus:outline-none py-2 px-4 text-center"
			class:cursor-pointer={state === 'empty'}
		>
			Choose File
		</label>

		<label
			class="text-2xl flex-1 font-regular border border-stone-300 rounded-r-lg py-2 px-4 text-stone-600"
			for="file_input"
			class:cursor-pointer={state === 'empty'}
		>
			No file chosen
		</label>
	</div>

	<p class="text-stone-400 font-regular text-xl mt-1">{noteDescription}</p>
{:else if type === 'line' && state === 'filled'}
	<div class="block mb-1 text-4xl font-medium text-stone-950">Upload file</div>
	<div class="flex items-center space-x-4 w-full py-2 px-4">
		<Icon iconName="document" color="blue" />

		<span class="flex-1 text-2xl text-blue-600">{selectedFile?.name}</span>

		<button
			class="text-stone-400 focus:outline-none"
			on:click={() => {
				selectedFile = null;
				state = 'empty';
			}}
		>
			<Icon iconName="close" />
		</button>
	</div>

	<p class="text-stone-400 font-regular text-xl mt-1">{noteDescription}</p>
{:else if type === 'box' && (state === 'empty' || state === 'disabled')}
	<div class="block mb-1 text-4xl font-medium text-stone-950">Upload file</div>
	<div class="block mb-3 text-xl font-regular text-stone-400">{subHeading}</div>
	<div
		class="flex items-center justify-center w-full h-60"
		on:dragover|preventDefault={handleDragOver}
		on:drop={handleFileDrop}
		role="button"
		tabindex="0"
		class:opacity-30={state === 'disabled'}
	>
		<label
			for="dropzone-file"
			class="flex flex-col items-center justify-center w-full h-64 border border-gray-300 border-dashed rounded-lg bg-stone-100"
			class:cursor-pointer={state === 'empty'}
		>
			<div class="flex flex-col items-center justify-center pt-5 pb-6">
				<Icon iconName="upload" className="mb-2" />
				<p class="text-base text-stone-950 my-1.5">
					<span class="font-semibold">Click to upload or drag and drop</span>
				</p>
				<p class="text-base text-gray-500">Max. File Size: 30MB</p>
				<Button
					variant="primary"
					size="sm"
					appearance="flat"
					color="stone"
					className="mt-4"
					text="Browse"
					on:click={() => {
						const fileInput = document.getElementById('dropzone-file');
						if (fileInput) {
							fileInput.click();
						} else {
							console.error('Element with ID "dropzone-file" not found');
						}
					}}
				/>
			</div>
			<input
				id="dropzone-file"
				type="file"
				class="hidden"
				on:change={handleFileChange}
				disabled={state === 'disabled'}
			/>
		</label>
	</div>

	<p class="text-stone-400 font-regular text-xl mt-4">{noteDescription}</p>
{:else if type === 'box' && state === 'filled'}
	<div class="block mb-1 text-4xl font-medium text-stone-950">Upload file</div>
	<div class="block mb-3 text-xl font-regular text-stone-400">{subHeading}</div>
	<div
		class="flex items-center justify-center w-full h-60"
		on:dragover|preventDefault={handleDragOver}
		on:drop={handleFileDrop}
		role="button"
		tabindex="0"
	>
		<label
			for="dropzone-file"
			class="flex flex-col items-center justify-center w-full h-64 border border-sky-500 rounded-lg cursor-pointer bg-sky-50"
		>
			<div class="flex flex-col items-center justify-center pt-5 pb-6">
				<p class="text-base text-stone-950 my-1.5">
					<span class="font-semibold">{selectedFile?.name}</span>
				</p>
				<p class="text-base text-gray-500">
					File size: {selectedFile ? (selectedFile.size / (1024 * 1024)).toFixed(2) : 'N/A'} MB
				</p>

				<Button
					variant="secondary"
					size="sm"
					appearance="flat"
					color="blue"
					className="mt-4"
					text="Replace"
					on:click={() => {
						const fileInput = document.getElementById('dropzone-file');
						if (fileInput) {
							fileInput.click();
						} else {
							console.error('Element with ID "dropzone-file" not found');
						}
					}}
				/>
				<Button
					variant="text"
					size="sm"
					appearance="flat"
					color="blue"
					className="mt-1 text-base underline text-stone-600 hover:text-stone-600"
					text="Remove"
					on:click={() => {
						selectedFile = null;
						state = 'empty';
					}}
				/>
			</div>
			<input id="dropzone-file" type="file" class="hidden" on:change={handleFileChange} />
		</label>
	</div>

	<p class="text-stone-400 font-regular text-xl mt-4">{noteDescription}</p>
{/if}
