import React, { HTMLAttributes } from 'react'

import { concat } from '../utils'
import { usePrefix } from '../ConfigProvider'
import { InternalModal as Modal, Props as BaseModalProps } from '../Modal/Modal'
import Form, { Props as BaseFormProps, Footer as FormFooter } from './Form'
import { footerDefaultAlignCtx } from './defs'
import { WithRef } from '../utils/type'

/* eslint-disable object-property-newline */

interface ModalProps extends Pick<BaseModalProps, (
  'title' | 'width' | 'autoDestroy' | 'maskHtmlProps'
  | 'maskClickable' | 'keyboard' | 'className' | 'style'
)> {
  /** 是否可见 */
  visible: boolean
  /** Modal 对应元素的 HTML 属性 */
  modalHtmlProps?: WithRef<HTMLAttributes<HTMLDivElement>, HTMLDivElement>
}

interface FormProps extends Omit<BaseFormProps, 'className' | 'style' | 'as'> {}

export interface ModalFormProps extends ModalProps, FormProps {}

export default function ModalForm(props: ModalFormProps) {
  const {
    // 无脑传给 Modal 的 props
    visible, title, width, autoDestroy, maskHtmlProps, maskClickable, keyboard, className, style,
    // 特别处理的 props
    modalHtmlProps, footer: footerFromProps = <FormFooter />, children, onSubmit, onCancel,
    // 无脑传给 Form 的 props
    ...formProps
  } = props

  const prefix = usePrefix('form')

  const modalProps: ModalProps = {
    visible, title, width, autoDestroy, maskHtmlProps,
    maskClickable, keyboard, className, style
  }

  const footer = (
    // 在 Modal 中应当默认右对齐
    <footerDefaultAlignCtx.Provider value="right">
      <div className={concat(prefix, 'footer')}>
        {footerFromProps}
      </div>
    </footerDefaultAlignCtx.Provider>
  )

  return (
    <Modal
      {...modalProps}
      rootHtmlProps={modalHtmlProps}
      footer={footer}
      onCancel={onCancel}
      renderModal={content => (
        <Form {...formProps} footer={null} onSubmit={onSubmit} onCancel={onCancel}>
          {content}
        </Form>
      )}
    >
      {children}
    </Modal>
  )
}