<script setup lang="ts">
// inspiration https://vuejs.org/examples/#modal

import { onMounted, onUnmounted, watch } from "vue";

const props = defineProps<{
  show: boolean;
}>();

const emits = defineEmits(["closemodal"]);

let appElement: HTMLElement | null = null;

watch(
  () => props.show,
  (isShown) => (isShown && appElement ? appElement.classList.add("no-scroll") : null)
);

onMounted(() => {
  appElement = document.getElementById("app");
});

onUnmounted(() => removeNoScroll());

const closeModal = () => {
  removeNoScroll();
  emits("closemodal");
};

const removeNoScroll = () => {
  if (appElement) {
    appElement.classList.remove("no-scroll");
  }
};
</script>

<template>
  <Transition mode="in-out">
    <div
      v-if="show"
      data-cy="full-screen-modal"
      class="fixed top-0 h-full w-full overflow-y-scroll bg-white px-4 py-16 lg:px-16 lg:py-24"
    >
      <button
        type="button"
        class="absolute right-4 top-4 h-8 w-8 cursor-pointer"
        @click="closeModal"
      >
        <it-icon-close></it-icon-close>
      </button>
      <slot></slot>
    </div>
  </Transition>
</template>
