import React, { HTMLAttributes } from 'react'

import { concat } from '../utils'
import { usePrefix } from '../ConfigProvider'
import { InternalDrawer as Drawer, Props as BaseDrawerProps } from '../Drawer/Drawer'
import Form, { Props as BaseFormProps, Footer as FormFooter } from './Form'
import { footerDefaultAlignCtx } from './defs'

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

interface DrawerProps extends Pick<BaseDrawerProps, (
  'title' | 'width' | 'autoDestroy' | 'maskHtmlProps'
  | 'className' | 'style'
)> {
  /** 是否打开 */
  visible: boolean
  /** Drawer 对应元素的 HTML 属性 */
  drawerHtmlProps?: HTMLAttributes<HTMLDivElement>
}

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

export interface DrawerFormProps extends DrawerProps, FormProps {}

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

  const prefix = usePrefix('form')
  const formClassName = concat(prefix, 'in-drawer')

  const drawerProps: DrawerProps = {
    visible, title, width, autoDestroy, maskHtmlProps,
    className, style
  }

  const footer = (
    // 在 Drawer 中应当默认右对齐
    <footerDefaultAlignCtx.Provider value="right">
      {footerFromProps}
    </footerDefaultAlignCtx.Provider>
  )

  return (
    <Drawer
      {...drawerProps}
      rootHtmlProps={drawerHtmlProps}
      footer={footer}
      onCancel={onCancel}
      renderDrawer={content => (
        <Form
          {...formProps}
          className={formClassName}
          footer={null}
          onSubmit={onSubmit}
          onCancel={onCancel}
        >
          {content}
        </Form>
      )}
    >
      {children}
    </Drawer>
  )
}