<script lang="ts">
    import Modal from "../../../Modal.svelte"
    import { apiBaseURL } from "../../../../../config"
    import { createEventDispatcher } from "svelte"
    import UploadImage from "./UploadImageWidget.svelte"
    import Icon from "../../Icon.svelte"
    import { mdiDeleteOutline } from "@mdi/js"

    const dispatch = createEventDispatcher()
    export let images: MedialibEntry[] = []
</script>

<Modal
    show="{true}"
    size="xl"
    on:close="{() => {
        dispatch('closeImageLibrary')
    }}"
>
    <svelte:fragment slot="title">
        <img
            src="../../../../../../media/solar_camera-outline.svg"
            alt="icon"
        />
        FOTOS
    </svelte:fragment>
    <div class="images">
        <UploadImage on:uploadImage="{() => dispatch('uploadImage')}" />
        {#each images as image}
            <div class="image">
                <div class="image-wrapper">
                    <img
                        src="{`${apiBaseURL}medialib/${image.id}/${image.file.src}`}"
                        alt="Image Preview"
                        class="image"
                        aria-hidden="true"
                    />
                    <button
                        class="removeElement"
                        on:click|preventDefault|stopPropagation="{() => {
                            dispatch('removeImage', image.id)
                        }}"
                    >
                        <Icon
                            path="{mdiDeleteOutline}"
                            size="1rem"
                        />
                    </button>
                </div>
            </div>
        {/each}
    </div>
</Modal>

<style lang="less">
    @import "../../../../assets/css/variables.less";
    h3.label {
        display: flex;
        gap: 0.6rem;
        align-items: center;
    }
    .images {
        display: grid;
        grid-template-columns: repeat(auto-fill, 12rem);
        gap: 6px;

        .image {
            width: 12rem;
            display: flex;
            flex-direction: column;

            .image-wrapper {
                height: 12rem;
                width: 100%;
                position: relative;

                background-color: var(--bg-100);
                width: 100%;
                aspect-ratio: 1/1;

                img {
                    width: 100%;
                    height: unset;
                    aspect-ratio: 1/1;
                    object-fit: cover;
                    border-radius: 12px;
                }
                @media @mobile {
                    width: min(200px, 40vw);
                    min-width: 50%;
                    height: 50%;
                    aspect-ratio: unset;
                    img {
                        aspect-ratio: unset;
                        height: 100%;
                    }
                }
                position: relative;
                .removeElement {
                    top: 0.6rem;
                    right: 0.6rem;
                    position: absolute;
                    display: flex;
                    justify-content: center;
                    align-items: center;
                    width: 1.6rem;
                    height: 1.6rem;
                    border-radius: 48px;
                    background: var(--bg-100);
                    img {
                        width: 1.2rem;
                        height: 1.2rem;
                    }
                }
                border-radius: 12px;
                img {
                    width: 100%;
                    border-radius: 12px;
                    height: 100%;
                    object-fit: cover;
                }
            }
            @media @mobile {
                flex-direction: row;
                gap: 6px;
                width: 100%;
            }
        }
        @media @mobile {
            display: flex;
            flex-direction: column;
            width: 100%;
        }
    }
</style>
