<script lang="ts">
	import { getExoSource } from '../../requests/exo.request';
	import MdFileDownload from 'svelte-icons/md/MdFileDownload.svelte';
	export let label = 'Choisir un fichier';
	export let value: FileList;
	export let defaultValue: string|null;
	export let id_code: string | null = null;

	const id = String(Math.random());
</script>

<div class="fileinput">
	<input type="file" {id} {...$$restProps} bind:files={value} />
	<label for={id}>{label}</label>
	<div class="filename">
		{#if value.length !== 0 || defaultValue != null}
			<p>{value.length !== 0  && value[0] != undefined? value[0].name : defaultValue!=null?defaultValue:"..."}</p>
			{#if id_code != null}
				<div
					class="icon"
					on:click={() => {
						if (id_code == null) return;
						getExoSource(id_code);
					}}
					on:keydown={() => {}}
				>
					<MdFileDownload />
				</div>{/if}
		{:else}
			...
		{/if}
	</div>
</div>

<style lang="scss">
	.icon {
		width: 22px;
		height: 22px;
		display: flex;
		cursor: pointer;
		transition: 0.2s;
		&:hover {
			transform: scale(1.1);
		}
	}
	.fileinput {
		display: flex;
		border: yellow 1px solid;
		border-radius: 5px;
		align-items: center;
		width: max-content;
	}
	input {
		width: 0.1px;
		height: 0.1px;
		opacity: 0;
		overflow: hidden;
		position: absolute;
		z-index: -1;
		& + label {
			font-size: 1;
			font-weight: 700;
			color: black;
			background-color: yellow;
			display: inline-block;
			padding: 10px;
			border-radius: 5px;
			white-space: nowrap;
			transition: 0.3s;
			&:hover {
				background-color: orange;
			}
		}
	}
	.filename {
		max-width: 500px;
		text-align: center;
		min-width: 100px;
		color: yellow;
		font-weight: 700;
		text-overflow: ellipsis;
		overflow: hidden;
		padding: 0 10px;
		white-space: nowrap;
		cursor: default;
		display: flex;
		align-items: center;
		justify-content: center;
		gap: 5px;
		p {
			max-width: 200px;
			margin: 0;
			text-overflow: ellipsis;
			overflow: hidden;
		}
	}
</style>
