<script setup lang="ts">
import { inject } from "vue";
import { modalResultKey } from "@/keys";
import Button from "@/components/RefButton.vue";

const modalResult = inject(modalResultKey, Function);
</script>

<template>
  <div class="modal">
    <div class="modal__background"></div>
    <div class="modal__message">
      <div>
        <h2><slot name="heading"></slot></h2>
        <p><slot name="message"></slot></p>

        <div class="modal__buttons">
          <Button
            class="modal__button positive"
            @click.prevent="modalResult(true)"
          >
            <slot name="yes"></slot>
          </Button>
          <Button
            class="modal__button negative"
            @click.prevent="modalResult(false)"
          >
            <slot name="no"></slot>
          </Button>
        </div>
      </div>
    </div>
  </div>
</template>

<style lang="scss">
.modal {
  display: flex;
  flex-flow: row nowrap;
  justify-content: center;

  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;

  text-align: center;

  padding: 2rem;

  backdrop-filter: blur(1rem);
  background-color: rgba(0, 0, 0, 0.5);

  overflow: auto;
  z-index: 9001;

  &__background {
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
  }

  &__message {
    flex: 0 1 30rem;

    display: flex;
    flex-flow: row wrap;
    justify-content: center;
    align-content: center;

    background: var(--modal-background);

    margin: auto;
    border: 0.25rem solid var(--color-modal-border);
    border-radius: 1rem;
    padding: 1rem;

    z-index: 9002;

    > * {
      flex: 0 1 100%;
    }
  }

  &__buttons {
    display: flex;
    flex-flow: row wrap;
    justify-content: space-around;
    align-items: center;
  }

  &__button {
    flex: 0 1 100%;
    margin: 0.75em 0;
  }
}
</style>
