import MessageBox from '@/components/common/MessageBox/index.vue'
import type { MessageBoxProps } from '@/components/common/MessageBox/types'
import type { FormInstance } from 'element-plus'
import { render, effect } from 'vue'

interface ConfirmProps extends MessageBoxProps {
  useLoading?: boolean // 是否用到loading
}
interface PromptProps extends MessageBoxProps {
  inputPattern?: RegExp // 输入框的正则
  inputErrorMessage?: string // 输入框的错误信息
}

export const useMessageBox = () => {
  const confirm = (props: ConfirmProps) => {
    return new Promise((resolve, reject) => {
      const visible = ref(false)
      const loading = ref(false)
      const onConfirm = () => {
        if (props.useLoading) {
          // 设置loading
          loading.value = true
          // 关闭全给用户
          resolve({
            close: () => {
              visible.value = false
            },
            setLoading: (value: boolean) => {
              loading.value = value
            },
          })
        } else {
          resolve(true)
        }
      }
      const onCancel = () => {
        reject(false)
      }
      const onClose = () => {
        reject(false)
      }

      effect(() => {
        render(
          <MessageBox
            v-model={visible.value}
            {...props}
            loading={loading.value}
            onConfirm={onConfirm}
            onCancel={onCancel}
            onClose={onClose}
          />,
          document.body,
        )
      })

      visible.value = true
    })
  }

  const prompt = <T extends string | number = string>(props: PromptProps): Promise<T> => {
    return new Promise((resolve, reject) => {
      const visible = ref(false)
      const loading = ref(false)
      const rules = {
        inputValue: [
          {
            required: true,
            message: '内容不能为空',
            trigger: 'blur',
          },
          {
            pattern: props.inputPattern,
            message: props.inputErrorMessage ?? '请输入正确的内容',
            trigger: 'blur',
          },
        ],
      }

      const validate = async () => {
        await formRef.value?.validate()
        return form.value.inputValue
      }
      const formRef = ref<FormInstance | null>(null)
      const form = ref<{ inputValue: T }>({ inputValue: '' as T })

      const messageFC = () => (
        <div>
          <el-form ref={formRef} rules={rules} model={form.value}>
            <el-form-item prop="inputValue">
              <el-input v-model={form.value.inputValue} />
            </el-form-item>
          </el-form>
        </div>
      )

      const onConfirm = (val: T) => {
        resolve(val)
      }
      const onCancel = () => {
        reject(false)
      }
      const onClose = () => {
        reject(false)
      }

      effect(() => {
        render(
          <MessageBox
            {...props}
            v-model={visible.value}
            validate={validate}
            message={messageFC}
            loading={loading.value}
            onConfirm={(res: string | number | undefined) => onConfirm(res as T)}
            onCancel={onCancel}
            onClose={onClose}
          />,
          document.body,
        )
      })

      visible.value = true
    })
  }

  return { confirm, prompt }
}
