import { ElButton, ElPopover, ElPopconfirm } from 'element-plus'
import CipButtonText from '../cip-button-text'
import CipButton from '../cip-button'
import { computed, defineComponent, ref } from 'vue'
import { useButtonPop, type PopSlotScope } from './use-button-pop'
import PopConfirmContent from './pop-confirm-content'

export default defineComponent({
  name: 'CipButtonPop',
  props: {
    needPop: { type: Boolean, default: true },
    popTitle: String,
    popMessage: String,
    popPlacement: String,
    buttonComp: { type: String, default: 'text' },
    popProps: { type: Object, default: () => ({}) },
    popLegacyCancel: { type: Boolean, default: true }
  },
  inheritAttrs: false,
  setup (props, { attrs, slots }) {
    const popoverRef = ref<InstanceType<typeof ElPopover>>()
    const buttonPop = computed(() => useButtonPop(props, attrs, slots))
    const ButtonComponent = computed(() =>
      props.buttonComp === 'button' ? CipButton : CipButtonText
    )

    const renderButton = (onClickHandler?: (e?: MouseEvent) => void) => {
      const Comp = ButtonComponent.value
      const { buttonProps } = buttonPop.value
      return (
        <Comp {...buttonProps} onClick={onClickHandler}>
          {slots.reference?.() ?? slots.button?.() ?? slots.default?.()}
        </Comp>
      )
    }

    const renderPopContent = (scope: PopSlotScope) => {
      const customContent =
        slots.pop?.(scope) ??
        (buttonPop.value.hasReferenceSlot ? slots.default?.(scope) : undefined)

      if (customContent) return customContent

      const { icon, iconColor, hideIcon } = buttonPop.value.popProps

      return (
        <PopConfirmContent
          title={buttonPop.value.resolvedTitle}
          message={buttonPop.value.resolvedMessage}
          icon={icon}
          iconColor={iconColor}
          hideIcon={hideIcon}
        >
          {{
            title: slots['pop-title'],
            message: slots['pop-message']
          }}
        </PopConfirmContent>
      )
    }

    const hidePopover = () => {
      popoverRef.value?.hide?.()
    }

    const renderRichPopconfirm = (
      onClick?: (e?: MouseEvent, confirmed?: boolean) => void,
      onCancelHandler?: (e?: MouseEvent) => void
    ) => {
      const { popProps, popoverProps, popLegacyCancel } = buttonPop.value
      const confirmButtonText = popProps.confirmButtonText ?? '确定'
      const cancelButtonText = popProps.cancelButtonText ?? '取消'
      const confirmButtonType = popProps.confirmButtonType ?? 'primary'
      const cancelButtonType = popProps.cancelButtonType ?? 'default'
      const { popperClass, trigger, teleported, ...restPopoverProps } = popoverProps

      const handleConfirm = (e?: MouseEvent) => {
        onClick?.(e, true)
        hidePopover()
      }

      const handleCancel = (e?: MouseEvent) => {
        onCancelHandler?.(e)
        if (!popLegacyCancel) {
          onClick?.(e, false)
        }
        hidePopover()
      }

      const scope: PopSlotScope = {
        title: buttonPop.value.resolvedTitle,
        message: buttonPop.value.resolvedMessage,
        confirm: handleConfirm,
        cancel: handleCancel
      }

      return (
        <ElPopover
          ref={popoverRef}
          {...restPopoverProps}
          trigger={trigger ?? 'click'}
          teleported={teleported ?? true}
          popper-class={['cip-button-pop__popper', popperClass].filter(Boolean).join(' ')}
        >
          {{
            // 触发区仅负责打开确认层，业务 onClick 只在 confirm/cancel 阶段触发
            reference: () => renderButton(() => {}),
            default: () => (
              <div class="cip-button-pop__panel">
                {renderPopContent(scope)}
                <div class="cip-button-pop__footer">
                  <ElButton
                    size="small"
                    type={cancelButtonType === 'text' ? '' : cancelButtonType}
                    text={cancelButtonType === 'text'}
                    onClick={handleCancel}
                  >
                    {cancelButtonText}
                  </ElButton>
                  <ElButton
                    size="small"
                    type={confirmButtonType === 'text' ? 'primary' : confirmButtonType}
                    text={confirmButtonType === 'text'}
                    onClick={handleConfirm}
                  >
                    {confirmButtonText}
                  </ElButton>
                </div>
              </div>
            )
          }}
        </ElPopover>
      )
    }

    return () => {
      const {
        needPop,
        buttonProps,
        popProps,
        hasRichPop,
        onClick,
        onCancel,
        popLegacyCancel
      } = buttonPop.value

      if (!needPop || buttonProps.disabled) {
        return renderButton(onClick)
      }

      if (hasRichPop) {
        return renderRichPopconfirm(onClick, onCancel)
      }

      return (
        <ElPopconfirm
          {...popProps}
          title={buttonPop.value.resolvedTitle}
          onConfirm={(e) => onClick?.(e, true)}
          onCancel={(e) => {
            onCancel?.(e)
            if (!popLegacyCancel) {
              onClick?.(e, false)
            }
          }}
        >
          {{
            reference: () => renderButton(() => {})
          }}
        </ElPopconfirm>
      )
    }
  }
})