<template>
  <transition name="fade">
    <div :class="['app-modal-backdrop', `modal-height--${size}`, addClass]">
      <div :class="['app-modal']" :style="{ maxWidth: `${width}px` }" ref="modal">
        <header :class="['app-modal-header', $slots.header ? 'app-modal-header--content' : '']">
          <slot name="header"></slot>
          <span @click="close">
            <IconBase icon-name="cross" width="16" height="15" viewBox="0 0 16 15" color="#546E7A">
              <IconCross />
            </IconBase>
          </span>
        </header>
        <section class="app-modal-body">
          <slot></slot>
          <slot name="body"></slot>
        </section>
        <footer class="app-modal-footer">
          <slot name="footer">
            <div class="d-flex">
              <AppButton @click="callback" :color="btnColor()" group="left">{{btn.text}}</AppButton>
              <AppButton @click="close" :width="84" color="link" group="left">Отмена</AppButton>
            </div>
          </slot>
        </footer>
      </div>
    </div>
  </transition>
</template>

<script>
import { IconBase, IconCross } from "../Icons/index";

export default {
  name: "app-modal",
  components: {
    IconBase,
    IconCross,
  },
  props: {
    addClass: {
      type: String,
      default: "",
    },
    width: {
      type: Number,
      default: 488
    },
    size: {
      type: String,
      default: 'normal',
      validator: function (value) {
        return ['normal', 'large'].includes(value);
      }
    },
    btn: {
      type: Object,
      default: () => {
        return {
          text: 'Понятно',
          color: 'prime',
        }
      }
    }
  },
  methods: {
    close() {
      this.$emit("close");
    },
    callback() {
      this.$emit("callback");
    },
    btnColor() {
      return this.btn.color ? this.btn.color : 'prime'
    }
  },
};
</script>

<style lang="sass" scoped>

@import "../assets/_vars"
.app-modal
  background: white
  box-shadow: 0px 6px 40px rgba(87, 89, 90, 0.2)
  border-radius: 3px
  overflow-x: auto
  display: flex
  flex-direction: column
  min-width: 400px
  &-backdrop
    position: fixed
    top: 0
    bottom: 0
    left: 0
    right: 0
    padding: 1rem
    background: no-repeat scroll rgba(204,204,204,0.5)
    display: flex
    justify-content: center
    &.modal-height
      &--normal
        align-items: center
      &--large
        align-items: start
        overflow-y: auto
  &-header,&-footer
    padding: 15px
    display: flex
  &-header
    position: relative
    padding: 18px 50px 15px 24px
    &--content
      padding: 18px 50px 18px 24px
      border-bottom: 1px solid #eeeeee
  &-footer
    border-top: 1px solid #eeeeee
    justify-content: flex-start
    background: $gray8
  &-body
    position: relative
    padding: 0px 24px 18px
    color: $gray3
.app-icon-cross
  cursor: pointer
  position: absolute
  right: 0
  top: 0
  margin: 18px 24px
</style>