<template>
  <div class="eb-modal" :class="{ 'active': active }">
    <div class="eb-modal-mask active" @click="closeModal" role="dialog"></div>
    <div class="eb-modal-wrapper" style="`width: ${width};`">
      <div :class="{ 'card-fullscreen': fullscreen }" class="card eb-modal-card">
        <div class="card-header">
          <slot name="title">
            <h3 class="card-title">{{ title }}</h3>
          </slot>

          <div class="card-options">
            <slot name="options">
              <a href="#" class="card-options-fullscreen" @click="toggleFullscreen">
                <eb-icon type="maximize" v-if="!fullscreen" />
                <eb-icon type="minimize" v-else />
              </a>
            </slot>
            <a class="card-options-remove" @click="closeModal">
              <eb-icon type="x" />
            </a>
          </div>

        </div>

        <div :class="{ 'card-body': true, 'text-center': center, 'scroll': true }">
          <slot></slot>
        </div>

        <div :class="{ 'card-footer': true, 'text-center': center }" v-if="$slots.footer">
          <slot name="footer"></slot>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import EbIcon from '../eb-icon/eb-icon';

export default {
  name: 'EbModal',

  components: {
    EbIcon
  },

  data() {
    return {
      fullscreen: false
    };
  },

  props: {
    title: String,
    center: {
      type: Boolean,
      default: false
    },
    active: {
      type: Boolean,
      default: false
    },
    width: {
      type: String,
      default: '50%'
    },
    transition: {
      type: String,
      default: 'slide-up'
    }
  },

  watch: {
    active: 'toggleBody'
  },

  methods: {
    closeModal() {
      this.$emit('close', false);
    },

    toggleFullscreen() {
      this.fullscreen = !this.fullscreen;
    },

    toggleBody() {
      let body = document.body;
      this.active
        ? body.classList.add('eb-modal-open')
        : body.classList.remove('eb-modal-open');
    }
  }
};
</script>

<style>
.eb-modal-open {
  position: fixed;
  width: 100%;
  top: 0;
}

.eb-modal {
  align-items: center;
  display: none;
  justify-content: center;
  overflow: hidden;
  position: fixed;
  width: 100%;
  top: 0;
  left: 0;
  z-index: 1060;
  right: 0;
  bottom: 0;
  flex-direction: row;
  padding: 0.625em;
  background-color: transparent;
}

.eb-modal-mask {
  position: fixed;
  top: 0;
  left: 0;
  bottom: 0;
  width: 100%;
  height: auto;
  transition: 0.7s;
  background-color: rgba(10, 10, 10, 0.8);
}

.eb-modal-wrapper {
  max-height: calc(100vh - 70px);
  overflow: auto;
  position: fixed;
  width: 50%;
  margin: 55px auto auto;
  left: 25%;
}

.eb-modal.active,
.mask.active {
  display: block;
}

.eb-modal > .card-body {
  margin-bottom: 50px;
}

.eb-modal > .scroll {
  max-height: 28em;
  overflow-y: auto;
}

.eb-modal-card {
  padding: 16px 24px;
  border-radius: 8px;
  border: 0;
  box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.05);
}

.card-fullscreen {
  /* margin-top: -65px; */
  border-radius: 0;
  -webkit-animation: scale-up-center 0.4s cubic-bezier(0.39, 0.575, 0.565, 1)
    both;
  animation: scale-up-center 0.4s cubic-bezier(0.39, 0.575, 0.565, 1) both;
  position: fixed;
}

.card-fullscreen .card-options-fullscreen i::before {
  content: '';
}

.card-fullscreen > .scroll {
  max-height: 100%;
}

@-webkit-keyframes scale-up-center {
  0% {
    -webkit-transform: scale(0.5);
    transform: scale(0.5);
  }
  100% {
    -webkit-transform: scale(1);
    transform: scale(1);
  }
}
@keyframes scale-up-center {
  0% {
    -webkit-transform: scale(0.5);
    transform: scale(0.5);
  }
  100% {
    -webkit-transform: scale(1);
    transform: scale(1);
  }
}

@media (min-width: 1440px) {
  .scroll {
    max-height: 40em;
    overflow-y: auto;
  }
}
</style>


