<script>
    import AddButton from "./add_button.svelte";

    let { direction = "horisontal", shape = "rounded", image = $bindable() } = $props();
    let files = $state();
    let img_src = $state();

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

<div class="{direction} input img-div {shape}" style="background-image: url('{img_src}')">
    <AddButton type="image" bind:files/>
</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;
        background-size: contain;
        background-position: center;
        background-repeat: no-repeat;
    }
</style>
