import React, { createContext, useCallback, useContext } from 'react'

import Button, { ButtonProps, ButtonType } from '../Button'
import { useLangData } from '../ConfigProvider'
import { useSafeState } from '../utils/hooks'
import { isPromise } from '../utils/promise'

export interface FooterCtxValue {
  /** 点击确定回调 */
  onOk?: () => Promise<void> | void
  /** 点击取消回调 */
  onCancel?: () => void
}

// 用于 Modal 与 ModalFooter 间交互的 context
export const footerCtx = createContext<FooterCtxValue>({})

/** 获取用于自定义 Footer 实现的上下文信息 */
export function useFooterCtx() {
  return useContext(footerCtx)
}

export interface Props {
  /** 确定按钮文本 */
  okText?: string
  /** 取消按钮文本 */
  cancelText?: string
  /** 确定按钮类型 */
  okType?: ButtonType
  /** 取消按钮类型 */
  cancelType?: ButtonType
  /** 确定按钮的 loading 状态 */
  okLoading?: boolean
  /** 确定按钮的 props */
  okButtonProps?: ButtonProps
  /** 取消按钮的 props */
  cancelButtonProps?: ButtonProps
}

export default function Footer({
  okText,
  cancelText,
  okType = 'primary',
  cancelType = 'default',
  okLoading = false,
  okButtonProps = {},
  cancelButtonProps = {}
}: Props) {
  const langData = useLangData('modal')
  const { onOk, onCancel } = useFooterCtx()
  const [loading, setLoading] = useSafeState(false)

  const handleOk = useCallback(async () => {
    const returns = onOk?.()
    if (isPromise(returns)) {
      setLoading(true)
      try {
        await returns
      } finally {
        setLoading(false)
      }
    }
  }, [onOk, setLoading])

  return (
    <>
      <Button type={okType} onClick={handleOk} loading={okLoading || loading} {...okButtonProps}>
        {okText ?? langData.okText}
      </Button>
      <Button onClick={onCancel} type={cancelType} {...cancelButtonProps}>
        {cancelText ?? langData.cancelText}
      </Button>
    </>
  )
}