<template>
  <popup
    type="dialog"
    :z-index="zIndex"
    :mask="true"
    :center="true"
    v-show="isVisible"
    @mask-click="maskClick"
  >
    <div class="cube-dialog-main">
      <span class="cube-dialog-close" v-show="showClose" @click="close"
        ><i class="cubeic-close"></i
      ></span>

      <div :class="containerClass">
        <h2 v-if="title || $slots.title" class="cube-dialog-title">
          <slot name="title">
            <p class="cube-dialog-title-def">{{ title }}</p>
          </slot>
        </h2>

        <div class="cube-dialog-content">
          <slot name="content">
            <div class="cube-dialog-content-def">
              <p v-html="content" v-if="content"></p>
            </div>
          </slot>
        </div>

        <div
          class="cube-dialog-btns confirm-dialog-btns-wrapper"
          :class="{ 'border-right-1px': isConfirm }"
        >
          <slot name="btns">
            <a
              :href="_cancelBtn.href"
              class="cube-dialog-btn border-top-1px"
              :class="{
                'cube-dialog-btn_highlight': _cancelBtn.active,
                'cube-dialog-btn_disabled': _cancelBtn.disabled
              }"
              v-if="isConfirm"
              @click="cancel"
              >{{ _cancelBtn.text }}</a
            >
            <a
              :href="_confirmBtn.href"
              class="cube-dialog-btn border-top-1px"
              :class="{
                'cube-dialog-btn_highlight': _confirmBtn.active,
                'cube-dialog-btn_disabled': _confirmBtn.disabled
              }"
              @click="confirm"
              >{{ _confirmBtn.text }}</a
            >
          </slot>
        </div>
      </div>
    </div>
  </popup>
</template>

<script>
import { Popup } from "cube-ui";
import popupMixin from "cube-ui/src/common/mixins/popup";
import visibilityMixin from "cube-ui/src/common/mixins/visibility";
import localMixin from "cube-ui/src/common/mixins/locale";

const COMPONENT_NAME = "confirm-dialog";
const EVENT_CONFIRM = "confirm";
const EVENT_CANCEL = "cancel";
const EVENT_CLOSE = "close";

const defHref = "javascript:;";

const defConfirmBtn = {
  textType: "ok",
  active: true,
  disabled: false,
  href: defHref
};

const defCancelBtn = {
  textType: "cancel",
  active: false,
  disabled: false,
  href: defHref
};

const parseBtn = function(btn, defBtn) {
  if (typeof btn === "string") {
    btn = { text: btn };
  }
  const text = defBtn && this.$t(defBtn.textType);
  return Object.assign({}, defBtn, { text }, { btn });
};

export default {
  name: COMPONENT_NAME,
  mixins: [popupMixin, visibilityMixin, localMixin],
  props: {
    type: {
      type: String,
      default: "confirm"
    },
    title: {
      type: String,
      default: ""
    },
    content: {
      type: String,
      default: ""
    },
    showClose: {
      type: Boolean,
      default: false
    },
    confirmBtn: {
      type: [Object, String],
      default() {
        return { ...defConfirmBtn };
      }
    },
    cancleBtn: {
      type: [Object, String],
      default() {
        return {
          ...defCancelBtn
        };
      }
    }
  },
  components: {
    Popup
  },
  computed: {
    _confirmBtn() {
      return parseBtn.call(this, this.confirmBtn, defConfirmBtn);
    },
    _cancelBtn() {
      return parseBtn.call(this, this.cancelBtn, defCancelBtn);
    },
    isConfirm() {
      return this.type === "confirm";
    },
    containerClass() {
      return `cube-dialog-${this.type}`;
    }
  },
  methods: {
    maskClick(e) {
      this.maskClosable && this.cancel(e);
    },
    confirm() {
      if (this._confirmBtn.disabled) {
        return;
      }
      this.hide();
      this.$emit(EVENT_CONFIRM, e);
    },
    cancel(e) {
      if (this._cancelBtn.disabled) {
        return;
      }
      this.hide();
      this.$emit(EVENT_CANCEL, e);
    },
    close(e) {
      this.hide();
      this.$emit(EVENT_CLOSE, e);
    }
  }
};
</script>

<style lang="scss" scoped>
.confirm-dialog-btns-wrapper {
  display: flex;
  flex-direction: row-reverse;
}
</style>