import cns from 'classnames'
import React, { ComponentType, createElement, CSSProperties, FormEvent, FormHTMLAttributes, ReactNode, Ref, useCallback, useMemo, useState } from 'react'

import { ComponentSize, useLangData, usePrefix } from '../ConfigProvider'
import { concat } from '../utils'
import { isPromise } from '../utils/promise'
import Button, { ButtonType, ButtonProps } from '../Button'
import {
  sizeCtx, layoutCtx, Layout, LayoutType, footerCtx, useFooterCtx, FooterAlign,
  useFormLayout, useFormSize, LabelOptions, useFormLabelOptions, labelOptionsCtx,
  defaultLabelWidth, defaultLabelGapForHorizontal, useFormVerticalGap, verticalGapCtx
} from './defs'
import { useIsMounted, useRefs } from '../utils/hooks'
import { WithRef } from '../utils/type'

export interface Props<T extends HTMLElement = HTMLFormElement> extends LabelOptions {
  /**
   * 提交行为的回调函数
   * Form 组件会对原生的 submit envent 进行 preventDefault 操作后再触发该回调
   */
  onSubmit?: () => void | Promise<void>
  /** 取消行为的回调函数 */
  onCancel?: () => void
  /** 表单内容尺寸 */
  size?: ComponentSize
  /** 表单内容布局 */
  layout?: LayoutType | Layout
  /**
   * `FormItem`、`Footer` 等内容间的垂直间距
   * @default "24px"
   */
  verticalGap?: string
  /**
   * 表单的尾部内容，一般是提交 & 取消按钮等，
   * 若不传（或传 `undefined`）则使用默认尾部，若传 `null` 则尾部不会渲染；
   * 对于 `layout: inline` 的表单，尾部内容会被展示到右侧
   */
  footer?: ReactNode
  /**
   * 获取 form 引用
   *
   * @deprecated use formProps.ref instead
  */
  formRef?: Ref<T>
  /** 需要传给 `form` 元素的属性 */
  formProps?: WithRef<FormHTMLAttributes<T>, T>
  /** 自定义样式名 */
  className?: string
  /** 自定义样式 */
  style?: CSSProperties
  /** 表单内容 */
  children?: ReactNode
  /** 指定组件实现替换 HTML form */
  as?: ComponentType<WithRef<FormHTMLAttributes<T>, T>>
}

export default function Form<T extends HTMLElement = HTMLFormElement>({
  onSubmit,
  onCancel,
  size: sizeFromProps,
  layout: layoutFromProps,
  verticalGap: verticalGapFromProps,
  footer = <Footer />,
  children,
  className: classNameFromProps,
  style: styleFromProps,
  formRef,
  formProps,
  as,
  ...labelOptionsFromProps
}: Props<T>) {
  const prefix = usePrefix('form')
  const size = useFormSize(sizeFromProps)
  const layout = useFormLayout(layoutFromProps)
  const labelOptions = useFormLabelOptions(labelOptionsFromProps)
  const verticalGap = useFormVerticalGap(verticalGapFromProps)
  const mergedFormRef = useRefs(formRef, formProps?.ref)

  const className = cns(
    prefix,
    concat(prefix, 'size', size),
    concat(prefix, 'layout', layout.type),
    classNameFromProps,
    formProps?.className
  )

  const style = {
    ...styleFromProps,
    ...formProps?.style
  }

  const isMountedRef = useIsMounted()
  const [submitting, setSubmitting] = useState(false)

  const handleSubmit = useCallback((e: FormEvent<T>) => {
    if (onSubmit != null) {
      e.preventDefault()
      const ret = onSubmit()
      if (isPromise(ret)) {
        setSubmitting(true)
        const handleSubmitEnd = () => {
          if (isMountedRef.current) setSubmitting(false)
        }
        ret.then(handleSubmitEnd, handleSubmitEnd)
      }
    }
    formProps?.onSubmit?.(e)
  }, [onSubmit, formProps, isMountedRef])

  const footerCtxValue = useMemo(
    () => ({ submitting, onCancel }),
    [submitting, onCancel]
  )

  const footerStyle: CSSProperties | undefined = (
    // inline 的情况下 footer 在主体内容右侧，因此不需要设置上间距
    layout.type !== 'inline'
      ? { marginTop: verticalGap }
      : undefined
  )

  return createElement(
    as ?? 'form',
    { ...formProps, ref: mergedFormRef, className, style, onSubmit: handleSubmit },
    <sizeCtx.Provider value={size}>
      <layoutCtx.Provider value={layout}>
        <labelOptionsCtx.Provider value={labelOptions}>
          <verticalGapCtx.Provider value={verticalGap}>
            <footerCtx.Provider value={footerCtxValue}>
              <div className={concat(prefix, 'body')}>
                {children}
              </div>
              {footer != null && <div className={concat(prefix, 'footer')} style={footerStyle}>
                {footer}
              </div>}
            </footerCtx.Provider>
          </verticalGapCtx.Provider>
        </labelOptionsCtx.Provider>
      </layoutCtx.Provider>
    </sizeCtx.Provider>
  )
}

export interface FooterProps {
  /** 提交按钮文本 */
  submitText?: string
  /** 取消按钮文本 */
  cancelText?: string
  /** 提交按钮类型 */
  submitType?: ButtonType
  /** 取消按钮类型 */
  cancelType?: ButtonType
  /** 提交按钮的 loading 状态 */
  submitLoading?: boolean
  /** 提交按钮的 props */
  submitButtonProps?: ButtonProps
  /** 取消按钮的 props */
  cancelButtonProps?: ButtonProps
  /** Footer 内容的对齐方向（对 `layout: inline` 的 Form 不生效） */
  align?: FooterAlign
}

/** 默认的 footer 实现 */
export function Footer({
  submitText,
  cancelText,
  submitType = 'primary',
  cancelType = 'default',
  submitLoading = false,
  submitButtonProps = {},
  cancelButtonProps = {},
  align: alignFromProps
}: FooterProps) {
  const langData = useLangData('form')
  const prefix = usePrefix('form')
  const className = concat(prefix, 'footer')
  const { defaultAlign, submitting, onCancel } = useFooterCtx()
  const layout = useFormLayout(undefined)
  const labelOptions = useFormLabelOptions()
  const align = alignFromProps ?? defaultAlign

  const contentWrapperClassName = cns(
    concat(className, 'content'),
    layout.type !== 'inline' && concat(className, 'align', align)
  )

  // 占位，尺寸对应 FormItem 的 label，从而使得 footer 内容跟 FormItem body 部分对齐
  const labelPlaceholder = layout.type === 'horizontal' && (
    <div
      className={concat(className, 'label-placeholder')}
      style={{
        flexBasis: labelOptions.labelWidth ?? defaultLabelWidth,
        marginRight: labelOptions.labelGap ?? defaultLabelGapForHorizontal
      }}
    ></div>
  )

  const submitBtn = (
    <Button type={submitType} htmlType="submit" loading={submitLoading || submitting} {...submitButtonProps}>
      {submitText ?? langData.submitText}
    </Button>
  )

  const cancelBtn = onCancel && (
    <Button type={cancelType} onClick={onCancel} {...cancelButtonProps}>
      {cancelText ?? langData.cancelText}
    </Button>
  )

  return (
    <>
      {labelPlaceholder}
      <div className={contentWrapperClassName}>
        {submitBtn}
        {cancelBtn}
      </div>
    </>
  )
}