<template>
  <Backdrop v-if="open">
    <transition name="fade">
      <div
        class="modal"
        :class="{
          [open ? 'open' : 'close']: true,
        }"
        @click.self.stop="close"
        role="dialog"
      >
        <div
          class="modal-dialog"
          :class="{
            'modal-sm': size === 'sm',
            'modal-md': size === 'md',
            'modal-lg': size === 'lg',
            'modal-xl': size === 'xl',
          }"
        >
          <div class="modal-content">
            <div class="modal-body">
              <button
                class="close"
                v-if="closeBtn"
                @click="close"
              >
                <span>x</span>
              </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: String,
    closeBtn: {
      type: Boolean,
      default: false,
    },
  },

  methods: {
    close() {
      this.$emit('modalclose')
    },
  },
}
</script>

<style lang="postcss" scoped>
  .modal {
    display: flex;
    align-items: center;
    justify-content: center;
    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;
  }

  .modal-content {
    position: relative;
    display: flex;
    flex-direction: column;
    width: 100%;
    /* counteract the pointer-events: none; in the .modal-dialog */
    pointer-events: auto;
    /* rgba(60, 77, 88, 0.5); */
    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: #15232d;
      border: 1px solid #15232d;
    }

    .close {
      padding: 0;
      margin: -1rem -0.5rem -1rem 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 {
    min-width: 500px;
  }

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

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

  .open {
    animation: appear 0.2s forwards;
  }

  .close {
    animation: appear 0.1s backwards;
  }

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

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