<script lang="ts">
    import cameraUrl from "$lib/assets/camera.svg";
    import Carousel from "../Carousel.svelte";

    interface Props {
        name: string;
        height?: string;
        minHeight?: string;
        files?: FileList;
        required?: boolean;
    }

    let { name, height, minHeight, files = $bindable(), ...rest }: Props = $props();
</script>

<label
    for={name}
    style="height: {height || 'auto'}; min-height: {minHeight || 'auto'};"
    class:no-bg={files && files.length > 0}
>
    {#if files && files.length > 0}
        <Carousel
            urls={files
                ? Array(files.length)
                      .keys()
                      .map((i) => URL.createObjectURL(files![i]))
                      .toArray()
                : []}
            ondelete={(idx) => {
                if (!files) return;
                const dt = new DataTransfer();
                for (let i = 0; i < files.length; i++) {
                    if (i !== idx) dt.items.add(files[i]);
                }
                files = dt.files;
            }}
        />
    {:else}
        <div class="message">
            <img src={cameraUrl} class="icon" alt="camera icon" />
            <span>Click to upload a photo</span>
        </div>
    {/if}
    <input
        type="file"
        id={name}
        {name}
        multiple
        accept=".png, .jpg, .jpeg, .svg"
        {...rest}
        bind:files
    />
</label>

<style>
    label {
        display: flex;
        justify-content: center;
        align-items: center;
        width: 100%;
        padding: 0.5rem;
        border-radius: 0.5rem;
        background-color: #eaffeb;
        cursor: pointer;
    }
    label.no-bg {
        background-color: transparent;
        padding: 0;
    }

    label input {
        display: none;
    }

    .message {
        display: flex;
        flex-direction: column;
        align-items: center;
        color: #49bd85;
    }
    .preview {
        max-height: 100%;
        max-width: 100%;
    }
    .message .icon {
        width: 2rem;
    }
</style>
