import { defineComponent, shallowRef, watch } from 'vue'

import Mask from './Mask'
import MobilePopupInner from './MobilePopupInner'
import PopupInner from './PopupInner'
import { popupProps } from './interface'

export default defineComponent({
  compatConfig: { MODE: 3 },
  name: 'Popup',
  inheritAttrs: false,
  props: popupProps,
  setup(props, { attrs, slots, expose }) {
    const innerVisible = shallowRef(false)
    const inMobile = shallowRef(false)
    const popupRef = shallowRef()
    const rootRef = shallowRef<HTMLElement>()
    watch(
      [() => props.visible, () => props.mobile],
      () => {
        innerVisible.value = props.visible
        if (props.visible && props.mobile) {
          inMobile.value = true
        }
      },
      { immediate: true, flush: 'post' },
    )
    expose({
      forceAlign: () => {
        popupRef.value?.forceAlign()
      },
      getElement: () => {
        return popupRef.value?.getElement()
      },
    })
    return () => {
      const cloneProps = { ...props, ...attrs, visible: innerVisible.value }
      const popupNode = inMobile.value ? (
        <MobilePopupInner
          {...cloneProps}
          mobile={props.mobile}
          ref={popupRef}
          v-slots={{ default: slots.default }}
        ></MobilePopupInner>
      ) : (
        <PopupInner {...cloneProps} ref={popupRef} v-slots={{ default: slots.default }} />
      )

      return (
        <div ref={rootRef}>
          <Mask {...cloneProps} />
          {popupNode}
        </div>
      )
    }
  },
})
