<template>
  <article class="modal">
    <div class="modal__backdrop"></div>
    <section
      class="modal__dialog"
      :aria-labelledby="title"
      :aria-describedby="content"
      :class="[
        `modal__dialog--${size}`
      ]"
      role="dialog"
      aria-modal="true"
    >
      <header class="modal__header">
        <h2 class="modal__title" v-text="title"></h2>
      </header>
      <p class="modal__content" v-text="content"></p>
      <slot name="cta"></slot>
    </section>
  </article>
</template>

<script>
export default {
  name: 'modal',
  props: {
    size: {
      type: String,
      required: false,
      default: 'large',
      validator: (val) => {
        return ['large', 'normal'].indexOf(val) !== -1;
      }
    },
    title: {
      type: String,
      required: true,
    },
    content: {
      type: String,
      required: true,
    },
  },
  created() {
    document.addEventListener('keyup', this.handleEscape);
  },
  beforeDestroy() {
    document.removeEventListener('keyup', this.handleEscape);
  },
  methods: {
    handleEscape(e) {
      const KEY = e.which || e.keyCode;

      if (KEY === 27) {
        e.stopPropagation();
        this.$emit('close');
      }
    }
  }
}
</script>

<style lang="scss" scoped>
.modal {
  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  z-index: z-index(modal);
  &__backdrop {
    width: 100%;
    height: 100%;
    background-color: rgba($black, .15);
    cursor: pointer;
  }
  &__dialog {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    background-color: $white;
    border-radius: border-radius(secondary);
    text-align: center;
    &--large {
      width: 770px;
      width: 77rem;
      padding: 65px 85px 85px 85px;
      padding: 6.5rem 8.5rem 8.5rem 8.5rem;
      box-shadow: box-shadow(quaternary);
    }
    &--normal {
      width: 370px;
      width: 37rem;
      padding: 65px 30px 85px 30px;
      padding: 6.5rem 3rem 8.5rem 3rem;
      box-shadow: box-shadow(primary);
    }
    @include media-breakpoint-down(md) {
      width: 90%;
    }
    @include media-breakpoint-down(sm) {
      width: 100%;
      height: 100%;
    }
  }
  &__title {
    @include h4(medium);
    margin-bottom: 10px;
    margin-bottom: 1rem;
  }
  &__content {
    @include body-normal;
    margin-bottom: 30px;
    margin-bottom: 3rem;
  }
}
</style>

