import { createTextVNode as _createTextVNode, withDirectives as _withDirectives, createVNode as _createVNode, vShow as _vShow } from "vue";
import { getComponent, getSlot } from "../_util/props-util";
import { defineComponent, Teleport, Transition, ref, toRef, watch, cloneVNode, onMounted } from "vue";
import Card from '../card';
import Button from '../button';
import Space from '../space';
const modalProps = {
  visible: Boolean,
  icon: Object,
  title: String,
  width: {
    default: 512
  },
  bodyStyle: [String, Object],
  bodyClass: String,
  getContainer: {
    type: Function,
    default: () => document.body
  },
  footer: Boolean,
  ok: {
    default: true
  },
  cancel: {
    default: true
  },
  mask: {
    default: true
  },
  maskClosable: {
    default: true
  },
  closable: {
    default: true
  },
  esc: {
    default: true
  },
  beforeOk: {
    type: Function
  }
};
export const prefixCls = 'x-modal';
export default defineComponent({
  name: prefixCls,
  inheritAttrs: false,
  props: modalProps,
  emits: ['update:visible', 'change', 'ok', 'cancel', 'afterLeave', 'maskClick'],

  setup(props, {
    emit,
    slots,
    attrs
  }) {
    const loadingRef = ref(false);
    const displayedRef = ref(props.visible);
    watch(toRef(props, 'visible'), val => {
      if (val) displayedRef.value = val;
    });

    function onAfterLeave() {
      displayedRef.value = false;
      emit('afterLeave');
    }

    const containerRef = ref();
    onMounted(() => {
      containerRef.value.addEventListener('scroll', e => {
        console.log(1);
        e.preventDefault();
        e.stopPropagation();
      });
    });

    function close() {
      emit('update:visible', false);
      emit('change', false);
    }

    function onKeydown(e) {
      if (e.key === 'Escape' && props.esc) close();
    }

    function onMaskClick(e) {
      emit('maskClick', e);
      if (!props.maskClosable) return;
      if (e.target === e.currentTarget) close();
    }

    function onOk() {
      if (props.beforeOk) {
        const ret = props.beforeOk();

        if (ret !== null && ret !== void 0 && ret.then) {
          loadingRef.value = true;
          ret.then(() => {
            loadingRef.value = false;
            close();
          });
        } else {
          if (ret !== false) close();
        }
      } else {
        close();
      }

      emit('ok');
    }

    function onCancel() {
      close();
      emit('cancel');
    }

    function getMaskNode() {
      if (!props.mask) return;
      return _createVNode(Transition, {
        "name": "fade",
        "appear": true
      }, {
        default: () => [_withDirectives(_createVNode("div", {
          "class": `${prefixCls}-mask`
        }, null), [[_vShow, props.visible]])]
      });
    }

    function getFooterNode() {
      if (slots.footer) {
        return slots.footer();
      } else if (props.footer) {
        const loading = loadingRef.value;
        const cancelProps = {
          class: `${prefixCls}_cancel`,
          onClick: onCancel
        };
        const okProps = {
          class: `${prefixCls}_ok`,
          loading,
          autofocus: true,
          onClick: onOk
        };
        let cancelBtn = slots.cancel ? getSlot(slots.cancel)[0] : props.cancel && _createVNode(Button, null, {
          default: () => [_createTextVNode("\u53D6\u6D88")]
        });
        let okBtn = slots.ok ? getSlot(slots.ok)[0] : props.ok && _createVNode(Button, {
          "type": "primary"
        }, {
          default: () => [_createTextVNode("\u786E\u8BA4")]
        });
        cancelBtn = cancelBtn ? cloneVNode(cancelBtn, cancelProps) : undefined;
        okBtn = okBtn ? cloneVNode(okBtn, okProps) : undefined;
        return _createVNode(Space, {
          "justify": "end"
        }, {
          default: () => [cancelBtn, okBtn]
        });
      }
    }

    return vm => {
      const {
        getContainer,
        visible,
        width,
        bodyStyle,
        bodyClass,
        closable
      } = props;
      const cardProps = { ...attrs,
        class: prefixCls,
        style: {
          width: width + 'px'
        },
        closable,
        contentStyle: bodyStyle,
        contentClass: [`${prefixCls}_body`, bodyClass],
        footerClass: `${prefixCls}_footer`,
        onClose: onCancel
      };
      return _createVNode(Teleport, {
        "to": getContainer()
      }, {
        default: () => [_createVNode("div", {
          "class": `${prefixCls}-container`,
          "ref": containerRef
        }, [getMaskNode(), _withDirectives(_createVNode("div", {
          "class": `${prefixCls}-wrapper`,
          "onClick": onMaskClick,
          "onKeydown": onKeydown,
          "tabindex": -1
        }, [_createVNode(Transition, {
          "name": "zoom-ani",
          "appear": true,
          "onAfterLeave": onAfterLeave
        }, {
          default: () => [_withDirectives(_createVNode(Card, cardProps, {
            icon: () => getComponent(vm, 'icon'),
            title: () => getComponent(vm, 'title'),
            default: slots.default,
            footer: getFooterNode
          }), [[_vShow, visible]])]
        })]), [[_vShow, displayedRef.value]])])]
      });
    };
  }

});