<template>
  <ui-popover
    :visible.sync="localVisible"
    v-bind="popoverProps"
    class="mm-popconfirm">
    <slot></slot>
    <template slot="content">
      <div class="mm-popconfirm-inner-content">
        <slot name="title">
          <div class="mm-popconfirm-message">
            <ui-icon
              :fill="warningColor"
              size="12px"
              name="warning">
            </ui-icon>
            {{ title }}
          </div>
        </slot>
        <div class="mm-popconfirm-buttons">
          <ui-button
            size="small"
            @click="cancelHandler">
            {{ cancelText }}
          </ui-button>
          <ui-button
            :type="confirmType"
            size="small"
            @click="confirmHandler">
            {{ confirmText }}
          </ui-button>
        </div>
      </div>
    </template>
  </ui-popover>
</template>

<script>
import pick from "lodash/pick"
import omit from "lodash/omit"
import visible from "../../mixins/visible"
import Popover from "../popover"
import Popper from "../popper"

import Button from "../button"
import Icon from "../icon"
import { t } from "../../locale"
import config from "../../managers/config"

config.defaults({
  "Popconfirm.transition": "fade-in-linear",
  "Popconfirm.confirmType": "primary",
  "Popconfirm.placement": "top-end",
})

const otherPopperProps = omit(Popper.props, ["target", "visible"])

export default {
  name: "mm-popconfirm",
  components: {
    "ui-popover": Popover,
    "ui-button": Button,
    "ui-icon": Icon,
  },
  mixins: [visible],
  props: {
    ...otherPopperProps,
    title: {
      type: String,
    },

    visibleArrow: {
      type: Boolean,
      default: true,
    },
    transition: {
      type: String,
      default: () => config.get("Popconfirm.transition"),
    },
    onConfirm: {
      type: Function,
      default() {},
    },
    onCancel: {
      type: Function,
      default() {},
    },
    confirmText: {
      type: String,
      default: () => t("ui.popconfirm.confirm"),
    },
    cancelText: {
      type: String,
      default: () => t("ui.popconfirm.cancel"),
    },
    confirmType: {
      type: String,
      default: () => config.get("Popconfirm.confirmType"),
    },
    placement: {
      type: String,
      default: () => config.get("Popconfirm.placement"),
    },
    popperClass: {
      type: [String, Object, Array],
      default: () => [],
    },
  },
  data() {
    return {
      warningColor: "#ffb75d",
    }
  },
  computed: {
    popoverProps() {
      return {
        ...pick(this.$props, Object.keys(otherPopperProps)),
        popperClass: ["mm-popconfirm-popper"].concat(this.popperClass),
      }
    },
  },
  methods: {
    cancelHandler(e) {
      this.hide()
      this.onCancel(e)
      this.$emit("cancel", e)
    },
    confirmHandler(e) {
      this.hide()
      this.onConfirm(e)
      this.$emit("confirm", e)
    },
  },
}
</script>
