<script>
    import AddButton from "./add_button.svelte";
    let { direction = "horisontal" } = $props();
    let images = $state();
    let image = $state();

    $effect(() => {
        if (images.length > 0) {
            const reader = new FileReader();
            reader.addEventListener("load", function () {
                image.setAttribute("src", reader.result);
            });
            reader.readAsDataURL(images[0]);
        }
	});
</script>

<div class="{direction} input img-div rounded">
    <AddButton type="image" bind:files={images}/>
    <img bind:this={image} src="" alt="">
</div>

<style>
    /* Вертикальное изображение */
    .vertical {
        aspect-ratio: 11 / 16;
        padding: 0;
    }

    /* Горизонтальное изображение */
    .horisontal {
        aspect-ratio: 16 / 11;
        padding: 0;
    }

    :global(.img-div) {
        margin-left: auto;
        margin-right: auto;
        align-content: center;
        text-align: center;
        width: 11rem;
    }

    :global(.img-div) img {
        object-fit: cover;
        width: 100%;
    }

    :global(.img-div) :global(.plus) {
        z-index: 2;
    }
</style>
