import { forwardRef, memo, useImperativeHandle } from 'react'
import { Form, Input, Select } from 'antd'

export interface DynamicFormRef {}

interface DynamicFormProps {
  formItems?: API.TmplItem[]
}

const DynamicForm = memo(
  forwardRef<DynamicFormRef, DynamicFormProps>(({ formItems = [] }, ref) => {
    useImperativeHandle(ref, () => {
      return {}
    })

    console.log(formItems)

    const renderField = (field: API.TmplItem) => {
      const { type, label, placeholder, visible, valid } = field.itemStruct!
      // if (hidden && hidden(form.getFieldsValue())) return null // 条件渲染
      console.log(visible)
      console.log(valid)

      switch (type) {
        case 'INPUT':
          return (
            <Form.Item name={name} label={label.text}>
              <Input placeholder={placeholder} />
            </Form.Item>
          )
        case 'SELECT':
          return (
            <Form.Item name={name} label={label.text}>
              <Select placeholder={placeholder} />
            </Form.Item>
          )
        // 其他组件类型...
        default:
          return null
      }
    }

    return <Form>{formItems.map(renderField)}</Form>
  })
)

export default DynamicForm
