<template>
  <dialog
    ref="notification"
    :class="{'--popup': popup}"
    class="ui-notification"
    @click="closeByBackdropClick"
    @cancel="close"
  >
    <div class="ui-notification__wrapper">
      <header class="ui-notification__header">
        <p
          v-if="$slots.title"
          class="ui-notification__title"
        >
          <slot name="title"/>
        </p>
        <button
          class="ui-notification__close"
          type="button"
          title="close"
          aria-label="close"
          @click="close"
        >
          <UiIcon
            class="ui-notification__close-icon"
            name="close"
            size="16"
          />
        </button>
      </header>
      <div class="ui-notification__content">
        <slot/>
      </div>
      <div
        v-if="$slots.footer"
        class="ui-notification__footer"
      >
        <slot name="footer"/>
      </div>
    </div>
  </dialog>
</template>

<script setup lang="ts">
import { onBackdropClick } from '../../runtime';

const notification = ref();

const emit = defineEmits<{
  (eventName: 'update:modelValue', value: boolean): void
  (eventName: 'close'): void
}>();

const props = defineProps<{
  modelValue: boolean
  popup?: boolean
}>();

onMounted(() => {
  if (props.popup) {
    notification.value.showModal();
  } else {
    notification.value.show();
  }
});

function close() {
  emit('close');
  emit('update:modelValue', false);
}

function closeByBackdropClick(event: Event) {
  const target = event.target as HTMLDialogElement;
  onBackdropClick(target, close);
}
</script>

<style lang="scss">
.ui-notification[open] {
  display: grid;
  place-content: end;
  height: 100%;
}

.ui-notification:not(.--popup) {
  position: fixed;
  left: 50%;
  transform: translateX(-50%);
  bottom: 0;
  margin: 0;
  height: fit-content;
  z-index: $z-index-popup;
}

.ui-notification__wrapper {
  position: relative;
  background-color: $notification-bg;
  color: $notification-text;
  min-width: 320px;
  margin-bottom: 8px;
  padding: 16px;
  border-radius: 16px;

  @include from-br(sm) {
    margin-bottom: 32px;
  }
}

.ui-notification::backdrop {
  backdrop-filter: blur(8px);
}

.ui-notification__title {
  @include font-xs;

  font-weight: 700;
  padding-right: 12px;
  margin-bottom: 8px;

  @include from-br(sm) {
    @include font-sm;
  }
}

.ui-notification__close {
  --position: 8px;

  position: absolute;
  top: var(--position);
  right: var(--position);

  @include hover(opacity) {
    opacity: 0.9;
  }

  &::after {
    content: '';
    position: absolute;
    width: 36px;
    height: 36px;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
  }
}

.ui-notification__close-icon {
  @include from-br(sm) {
    width: 24px;
    height: 24px;
  }
}

.ui-notification__content {
  @include font-sm;

  font-weight: 400;
  margin-bottom: 8px;
  color: $notification-content-text;

  @include from-br(sm) {
    margin-bottom: 16px;
  }
}
</style>
