import { Modal, Form, FormProps, FormInstance } from 'antd'
import React from 'react'
import { Hot } from '../../store/hots';

export type Item = {
  label?: string, 
  ele: React.ReactElement,
  name?: string
}
export type Props = {
  title: string,
  items: Item[],
  width?: number
  form?: FormInstance<Hot>
  onValueChange?: FormProps['onValuesChange']
  cancel?: () => void,
  enter?: () => void,
}

export function HotModal(props: Props) {
  const FormItems = props.items.map(({label, name, ele}, index) => (
    <Form.Item label={label} name={name} key={name || index}>
      {ele}
    </Form.Item>
  ))

  return (
    <Modal 
      width={props.width}
      title={props.title} 
      visible={true} 
      onOk={props.enter} 
      okText='确定'
      cancelText='取消'
      onCancel={props.cancel}>
      <Form
        form={props.form}
        layout="vertical"
        onValuesChange={props.onValueChange}
      >
        {FormItems}
      </Form>
    </Modal>
  )
}