<template>
  <div class="overlay center" @click="close" v-show="visible || true">
    <div class="popup" :class="size" @click.stop>
      <div class="popup__header">
        <h2>{{ heading }}</h2>
        <UiButton icon="close" @click="() => close()" class="square"></UiButton>
      </div>
      <div class="popup__body">
        <slot></slot>
      </div>
    </div>
  </div>
</template>

<script lang="ts" setup>
const visible = ref(false);

const emits = defineEmits<{
    (e: 'close'): void
}>()

function close() {
  enableScrolling();
  emits('close');
  visible.value = false;
}

function open() {
  disableScrolling();
  visible.value = true;
}

defineProps({
  heading: String,
  size: String
})

defineExpose({
  close,
  open
})

function disableScrolling()
{
  const body = document.getElementsByTagName('body');
  for(const element of body)
  {
    element.style.overflow = "hidden";
  }
}

function enableScrolling()
{
  const body = document.getElementsByTagName('body');
  for(const element of body)
  {
    element.style.overflow = "visible";
  }
}
</script>

<style scoped>
.overlay {
  background-color: rgba(54, 54, 54, 0.514);
  backdrop-filter: blur(0.1rem);
  position: fixed;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  padding: 0.5rem;
  padding: 0.5rem;
  z-index: 2;
}

.popup {
  display: grid;
  grid-template-rows: auto 1fr;
  align-content: flex-start;
  width: 100%;
  height: 100%;
  padding: 1rem;
  background-color: rgb(255, 255, 255);
  border-radius: 0.5rem;
}

.popup__header {
  display: flex;
  justify-content: space-between;
  margin-bottom: 1rem;
}
.popup__body {
  height: 100%;
  overflow: hidden;
}
.MEDIUM {
  height: auto;
  width: 740px;
}
.SMALL {
  height: auto;
  width: 540px;
}
</style>