<script lang="ts">
	import FileType from './FileType.svelte';

	export let title: string;
	export let filetype: 'PDF' | 'ZIP';
	export let filesize: string;

	import FileDrop from 'filedrop-svelte';

	let dashAnimationProgress = 0;
	let dashAnimationInterval: NodeJS.Timer;

	const dashAnimationStart = () => {
		dashAnimationInterval = setInterval(() => {
			dashAnimationProgress += 1;
			if (dashAnimationProgress == 20) {
				dashAnimationProgress = 0;
			}
		}, 30);
	};

	const dashAnimationStop = () => {
		clearInterval(dashAnimationInterval);
	};
</script>

<div class="card uploadCard">
	<div class="flex flex-col sm:flex-row justify-between sm:items-center">
		<h3>{title}</h3>
		<div class="mt-3 sm:mt-0">
			<FileType {filetype} {filesize} />
		</div>
	</div>
	<div class="flex-1 mt-6">
		<FileDrop on:filedrop={null} on:filedragenter={dashAnimationStart} on:filedragleave={dashAnimationStop}>
			<div
				class="drag group"
				on:mouseenter={dashAnimationStart}
				on:mouseleave={dashAnimationStop}
				style={`background-image: url("data:image/svg+xml,%3csvg width='100%25' height='100%25' xmlns='http://www.w3.org/2000/svg'%3e%3crect width='100%25' height='100%25' fill='none' rx='9' ry='9'  stroke-opacity='50%' stroke='%23406280' stroke-width='4' stroke-dasharray='10' stroke-dashoffset='${dashAnimationProgress}' stroke-linecap='square'/%3e%3c/svg%3e");`}
			>
				<span class="text-[#406280]">Sem přetáhněte,</span>
				<span class="text-sspsGray">nebo nahrajte svůj motivační dopis</span>
			</div>
		</FileDrop>
	</div>
</div>

<style>
	:global([type='file']) {
		@apply hidden;
	}
	.card {
		@apply h-full;
		@apply flex flex-col justify-between;

		@apply bg-[#f8fbfc];
		@apply rounded-3xl;
		@apply px-7 py-7;
	}
	.card h3 {
		@apply text-sspsBlue text-2xl xl:text-4xl font-semibold;
	}
	.card span {
		@apply opacity-60 text-sm;
		@apply transition-all duration-300;
	}
	.card .drag {
		@apply transition duration-200;
		@apply min-h-full;
		@apply flex flex-col items-center justify-center;
		border-radius: 9px;

		/* TODO: Fix this hack */
		@apply p-10 sm:p-20 md:p-0;
	}
	.card .drag:hover span {
		@apply opacity-100;
	}
</style>
