<script lang="ts">
    import { createEventDispatcher, onMount } from "svelte"
    import { mdiCloseCircleOutline } from "@mdi/js"
    import Icon from "./widgets/Icon.svelte"
    import Notifications from "./widgets/Notifications.svelte"
    import { isMobile } from "../store"
    import { enableScrolling, stopScrolling } from "../functions/utils"

    export let show: boolean = false,
        size: string = "md",
        cssClass: string = "",
        closeOnBackdrop: boolean = false

    let dialog: HTMLDialogElement,
        dispatch = createEventDispatcher()
    const scrollPosition = { top: 0, left: 0 }

    const onCancel = (e: any) => {
            show = false
            dialog.close()
            dispatch("close")
        },
        onDialogClick = (e: MouseEvent) => {
            if (closeOnBackdrop && (e.target as HTMLElement).nodeName === "DIALOG") {
                dialog.close()
                show = false
                dispatch("close")
            }
        }

    $: if (dialog)
        if (show) {
            dialog.showModal()
            dialog.classList.add("dialog-open")
            stopScrolling(scrollPosition)
        } else if (dialog.classList.contains("dialog-open")) {
            dialog.classList.remove("dialog-open")
            dialog.close()
            enableScrolling(scrollPosition)
            dispatch("close")
        }

    onMount(() => {
        return () => {
            dialog.classList.remove("dialog-open")
            enableScrolling(scrollPosition)
        }
    })
</script>

<!-- svelte-ignore a11y-no-noninteractive-element-interactions -->
<dialog
    class="modal {size ? 'modal-' + size : ''} {cssClass}
    bind:this={dialog}
    on:cancel={onCancel}
    on:click|stopPropagation={onDialogClick}
    data-cy="modal"
>
    {#if $$slots.title}
        <div class="header">
            <div class="crinkle desktop-crinkle">
                <img
                    src="/media/ModalCrinkle.svg"
                    alt="crinkle"
                />
            </div>
            <div class="crinkle mobile-crinkle">
                <img
                    src="/media/ModalCrinkleMobile.svg"
                    alt="crinkle"
                />
            </div>

            <span class="bar">
                <h2>
                    <slot name="title" />
                </h2>
                <button
                    aria-label="Close"
                    class="modal-close"
                    on:click|stopPropagation|preventDefault={() => {
                        dispatch('close')
                    }}
                    on:keydown
                >
                    <Icon
                        path={mdiCloseCircleOutline}
                        size={$isMobile ? "24px" : "32px"}
                    />
                </button>
            </span>
        </div>
    {/if}
    <div class="modal-body">
        {#if $$slots.default}
            <section class="modal-content">
                <slot />
            </section>
        {/if}
        {#if $$slots.footer}
            <section class="modal-footer">
                <slot name="footer" />
            </section>
        {/if}
    </div>

    <Notifications force={true} />
</dialog>

<style
    lang="less"
    global
>
    @import "../assets/css/variables.less";
    dialog {
        &.modal {
            .header {
                display: flex;
                height: 90px;
                min-height: 90px;
                width: 100%;
                position: relative;
                overflow: hidden;
                margin-bottom: -1px;
                .crinkle {
                    height: 100%;
                    min-height: 100%;
                    width: auto;
                    margin-right: -2px;
                    margin-left: -2px;

                    img {
                        height: 100%;
                        width: 100%;
                        object-fit: cover;
                    }
                }

                .mobile-crinkle {
                    display: none;
                }
                @media @mobile {
                    height: 70px;
                    min-height: 70px;

                    .desktop-crinkle {
                        display: none;
                    }
                    .mobile-crinkle {
                        display: block;
                        width: 38px !important;
                        height: 70px !important;
                    }
                }
                .bar {
                    flex-grow: 1;
                    background-color: var(--neutral-white);
                    height: 100%;
                    h2 {
                        font-weight: 700;
                        font-size: 2rem;
                        display: flex;
                        gap: 0.5rem;
                        color: var(--text-invers-100);
                    }
                    border-radius: 4px 0px;
                    display: flex;
                    align-items: flex-end;
                    justify-content: space-between;
                    padding-right: 3.6rem;
                    @media @mobile {
                        align-items: center;
                        padding-right: 2.4rem;
                    }
                    gap: 10px;
                    button {
                        color: var(--text-invers-100);
                    }
                    color: var(--text-invers-100);
                }
            }
            .modal-body {
                display: flex;
                flex-direction: column;
                overflow: auto;
                gap: 2.4rem;
                padding: 48px 27px 48px 90px;
                @media @mobile {
                    padding: 24px 27px 24px 38px;
                }
                background-color: var(--neutral-white);
                width: 100%;
            }
            cursor: default;
            background-color: transparent;
            border: 0px solid black;
            transition: all 0.4s ease-in-out;
            display: flex;
            flex-direction: column;

            display: none;
            overflow: unset;
            z-index: 9998;
            inset: 0;
            padding: 0;
            position: relative;

            &::backdrop {
                position: fixed;
                top: 0;
                right: 0;
                bottom: 0;
                left: 0;
                background-color: rgba(0, 0, 0, 0.5);
            }
            &.modal-xs {
                width: 30vw;
                max-height: 90vh;
            }

            &.modal-sm {
                width: 40vw;
                max-height: 90vh;

                @media screen and (max-width: 1250px) {
                    width: 50vw;
                }
                @media screen and (max-width: 1050px) {
                    width: 60vw;
                }
                @media screen and (max-width: 768px) {
                    width: 95vw;
                }
            }

            &.modal-md {
                width: 50vw;
                max-height: 90vh;

                @media screen and (max-width: 1250px) {
                    width: 60vw;
                }
                @media screen and (max-width: 1050px) {
                    width: 70vw;
                }
                @media screen and (max-width: 768px) {
                    width: 95vw;
                }
            }

            &.modal-lg {
                width: 60vw;
                max-height: 90vh;

                @media screen and (max-width: 1250px) {
                    width: 70vw;
                }
                @media screen and (max-width: 1050px) {
                    width: 80vw;
                }
                @media screen and (max-width: 768px) {
                    width: 95vw;
                }
            }

            &.modal-xl {
                width: 80vw;
                max-height: 90vh;

                @media screen and (max-width: 1050px) {
                    width: 90vw;
                }
                @media screen and (max-width: 768px) {
                    width: 95vw;
                }
            }

            &.modal-full {
                width: 98vw;
                height: 98vw;
                max-height: 98vh;
            }

            &[open] {
                display: flex;
                flex-direction: column;
                opacity: 1;
                position: fixed;
                top: 50%;
                left: 50%;
                transform: translate(-50%, -50%);
            }
        }
    }
</style>
