import React, { useEffect } from 'react'

import { Button, Form, Input, Row, Modal } from 'antd'

const { Item } = Form
interface IAskAddProps {
  visible: boolean
  ID: number
  title?: string
  placeholder?: string
  onCloseModel: (e?: React.MouseEvent<HTMLElement, MouseEvent>) => void
  onApply: (ID: number, content: string) => void
}
/**
 * 提问/留言
 */
const AskAdd: React.FC<IAskAddProps> = props => {
  const { visible, ID, title = '留言', placeholder = '可以留下您对报告内容的看法或者疑问', onCloseModel } = props
  const [form] = Form.useForm()

  useEffect(() => {
    return () => {
      form.resetFields()
    }
    // eslint-disable-next-line react-hooks/exhaustive-deps
  }, [form])

  const handleFinish = (value: { Content: string }) => {
    props.onApply(ID, value.Content)
  }

  return (
    <div onClick={e => e.stopPropagation()}>
      <Modal
        open={visible}
        onCancel={onCloseModel}
        destroyOnClose={true}
        maskClosable={false}
        title={title}
        footer={null}
      >
        <Form form={form} onFinish={handleFinish} labelAlign="left">
          <Item
            label=""
            name="Content"
            wrapperCol={{ span: 24 }}
            rules={[
              { required: true, message: '请输入内容!' },
              {
                pattern: /^[^\s]*$/,
                message: '禁止输入空格'
              }
            ]}
          >
            <Input.TextArea
              placeholder={placeholder}
              maxLength={100}
              showCount={true}
              autoSize={{ minRows: 5, maxRows: 5 }}
            />
          </Item>
          <Row align="middle" justify="center">
            <Item>
              <Button onClick={onCloseModel} className="m-r-xs">
                取消
              </Button>
              <Button type="primary" htmlType="submit">
                提交
              </Button>
            </Item>
          </Row>
        </Form>
      </Modal>
    </div>
  )
}

export default AskAdd