<template>
  <div
    ref="popup"
    v-portal="target"
    :class="['mm-drawer--' + placement]"
    :style="{
      zIndex: realZIndex,
    }"
    class="mm-drawer">
    <transition
      name="fade-in"
      appear>
      <div
        v-if="mask"
        v-show="localVisible"
        class="mm-drawer-mask"
        @click.self="handleWrapperClick">
      </div>
    </transition>
    <transition
      :name="transition || 'move-' + placement"
      appear
      @before-enter="handleBeforeTransition"
      @after-leave="handleAfterTransition">
      <div
        v-show="localVisible"
        ref="content"
        :style="mainStyle"
        class="mm-drawer-main">
        <div
          v-if="$slots.header || title"
          class="mm-drawer-header">
          <slot name="header">
            <div class="mm-drawer-title">
              {{ title }}
            </div>
          </slot>

          <ui-icon
            v-if="closable"
            name="close"
            class="mm-drawer-close"
            size="12px"
            @click="handleClose"></ui-icon>
        </div>
        <div
          class="mm-drawer-body">
          <slot></slot>
        </div>
        <div
          v-if="$slots.footer"
          class="mm-drawer-footer">
          <slot name="footer">
          </slot>
        </div>
      </div>
    </transition>
  </div>
</template>

<script>
import Icon from "../icon"
import portal from "../../directives/portal"
import popup from "../../utils/popup"
import { unit } from "../../utils/helper"
import config from "../../managers/config"

config.defaults({
  "Drawer.escClosable": true,
  "Drawer.maskClosable": true,
  "Drawer.mask": true,
  "Drawer.zIndex": undefined,
  "Drawer.closable": true,
  "Drawer.placement": "right",
  "Drawer.width": 256,
  "Drawer.height": 256,
  "Drawer.transition": undefined,
  "Drawer.target": undefined,
})

const horizontal = ["left", "right"]
const vertical = ["top", "bottom"]

export default {
  name: "mm-drawer",

  components: {
    "ui-icon": Icon,
  },
  directives: { portal },
  mixins: [popup],
  provide() {
    return {
      "mm-drawer": this,
    }
  },
  inject: {
    drawer: {
      from: "mm-drawer",
      default: null,
    },
  },
  props: {
    escClosable: {
      type: Boolean,
      default: () => config.get("Drawer.escClosable"),
    },
    maskClosable: {
      type: Boolean,
      default: () => config.get("Drawer.maskClosable"),
    },
    mask: {
      type: Boolean,
      default: () => config.get("Drawer.mask"),
    },
    zIndex: {
      type: Number,
      default: () => config.get("Drawer.zIndex"),
    },
    closable: {
      type: Boolean,
      default: () => config.get("Drawer.closable"),
    },
    placement: {
      validator(value) {
        return horizontal.concat(vertical).includes(value)
      },
      default: () => config.get("Drawer.placement"),
    },
    title: {
      type: String,
    },
    width: {
      type: [Number, String],
      default: () => config.get("Drawer.width"),
    },
    height: {
      type: [Number, String],
      default: () => config.get("Drawer.height"),
    },
    transition: {
      type: String,
      default: () => config.get("Drawer.transition"),
    },
    target: {
      type: [Object, String, Boolean],
      default: () => config.get("Drawer.target"),
    },
  },
  computed: {
    mainStyle() {
      const style = {}
      if (horizontal.includes(this.placement)) {
        style.width = unit(this.width, "px")
      } else if (vertical.includes(this.placement)) {
        style.height = unit(this.height, "px")
      }
      return style
    },
  },
  methods: {
    handleWrapperClick() {
      if (this.maskClosable) {
        this.close("mask")
      }
    },

    handleClose() {
      this.close("close")
    },
  },
}
</script>
