<template>
  <Backdrop v-if="open">
    <transition name="fade">
      <div
        class="modal"
        :class="{
          [open ? 'open' : 'close']: true,
        }"
        @click.self.stop="backdropHandler"
        role="dialog"
      >
        <div
          class="modal-dialog"
          :class="{
            'modal-sm': size === 'sm',
            'modal-md': size === 'md',
            'modal-lg': size === 'lg',
            'modal-xl': size === 'xl',
            'modal-dialog-centered': !top,
            'modal-dialog-scrollable': scrollable,
          }"
          role="document"
        >
          <div class="modal-content">
            <div class="modal-body">
              <button
                class="close"
                v-if="closeBtn"
                @click="close"
              >
                &times;
              </button>
              <slot />
            </div>
          </div>
        </div>
      </div>
    </transition>
  </Backdrop>
</template>

<script>
import Backdrop from '../Backdrop'

export default {
  name: 'Modal',

  components: {
    Backdrop,
  },

  props: {
    open: {
      type: Boolean,
      default: false,
    },
    size: {
      type: String,
      default: 'md',
    },
    closeBtn: {
      type: Boolean,
      default: false,
    },
    top: {
      type: Boolean,
      default: false,
    },
    scrollable: {
      type: Boolean,
      default: false,
    },
    static: Boolean,
  },

  methods: {
    close() {
      this.$emit('close')
      this.$emit('modalclose')
    },

    backdropHandler() {
      if (!this.static) {
        this.close()
      }
    },
  },
}
</script>

<style lang="postcss" scoped>
  .modal {
    position: fixed;
    top: 0;
    left: 0;
    outline: 0;
    width: 100%;
    height: 100%;
    overflow: hidden;
  }

  .modal-dialog {
    position: relative;
    width: auto;
    /* allow clicks to pass through for custom click handling to close modal */
    pointer-events: none;
    margin: 1.75rem auto;
  }

  .modal-dialog-scrollable {
    max-height: calc(100% - 3.75rem);

    .modal-content {
      max-height: calc(100vh - 3.75rem);
      overflow: hidden;
    }

    .modal-body {
      overflow-y: auto;
    }
  }

  .modal-dialog-centered {
    display: flex;
    align-items: center;
    min-height: calc(100% - 3.75rem);
  }

  .modal-content {
    position: relative;
    display: flex;
    flex-direction: column;
    width: 100%;
    /* counteract the pointer-events: none; in the .modal-dialog */
    pointer-events: auto;
    color: var(--fake-black);
    background-color: var(--white);
    border: 1px solid var(--white);
    background-clip: padding-box;
    border-radius: 8px;
    box-shadow: 1px 1px 4px 0 rgba(142, 142, 147, 0.3);
    outline: 0;
    transition: background-color 2s;

    .dark-mode & {
      color: #c5cfd6;
      background-color: var(--dark-navy-blue);
      border: 1px solid var(--dark-navy-blue);
      /* TODO: update to color-mod(var(--true-alarm-blue) a(0.5)) */
      box-shadow: 0 1px 3px 0 rgba(33, 105, 244, 0.5);
    }

    .close {
      padding: 0;
      margin: -0.5rem -0.1rem -0.5rem auto;
    }
  }

  button.close {
    background-color: transparent;
    border: 0;
    appearance: none;
    text-align: center;
    font-size: 1.5rem;
    font-weight: lighter;
    line-height: 1;
    float: right;
    padding: 0;
  }

  .modal-body {
    position: relative;
    /* Enable `flex-grow: 1` so that the body take up as much space as possible
       when there should be a fixed height on `.modal-dialog`. */
    flex: 1 1 auto;
    padding: 1rem;
  }

  .modal-sm {
    max-width: 300px;
  }

  .modal-md {
    max-width: 500px;
  }

  .modal-lg {
    max-width: 800px;
  }

  .modal-xl {
    max-width: 1140px;
  }

  .open {
    animation: appear 0.2s forwards;
    overflow-x: hidden;
    overflow-y: auto;
  }

  .close {
    animation: appear 0.1s backwards;
  }

  @keyframes appear {
    from {
      opacity: 0;
      transform: translateY(25px);
    }

    /* stylelint-disable-next-line block-no-empty */
    to {}
  }
</style>
