import React, { useEffect, useState } from 'react'
import clsx from 'clsx'
import { Input, Select, Icon } from 'antd'
import '@platformuiserver/platformui.assets/css/index.less'
import styles from './style.module.less'

const { Option } = Select
const { TextArea } = Input
export default function DetialTable (props) {
  const { title, isEdit = true, statusRender = null, iconListRender = null, subTitle = '', onChange, onClose } = props
  const [titleText, setTitleText] = useState(title)
  useEffect(() => {
    setTitleText(title)
  }, [title])
  return (
    <div className={styles.detialModalHeader}>
      <header className={clsx(styles.header, 'flex-center-between')}>
        <div className={clsx(styles.sub)}>
          {subTitle && (
            <span className={styles.subTitle} style={{ wordBreak: 'break-all' }}>
              {subTitle}
            </span>
          )}
          {statusRender}
          {!subTitle &&
            !statusRender &&
            (isEdit ? (
              <div className={styles.title}>
                <TextArea autoSize value={titleText} placeholder="请输入标题" className={styles.input} onChange={(e) => setTitleText(e.target.value)}
                  onBlur={(e) => onChange({ title: e.target.value })} />
                <div className={styles.inputText}>{title}</div>
              </div>
            ) : (
              <div className={clsx(styles.text, styles.title)}>{title}</div>
            ))}
        </div>
        <div className="flex-center-between">
          {iconListRender}
          <Icon type="close" className={styles.iconClose} onClick={() => onClose()} />
        </div>
      </header>
      <div className={styles.title}>
        {(subTitle || statusRender) &&
          (isEdit ? (
            <div>
              <TextArea autoSize value={titleText} placeholder="请输入标题" className={styles.input} onChange={(e) => setTitleText(e.target.value)}
                onBlur={(e) => onChange({ title: e.target.value })} />
              <div className={styles.inputText}>{title}</div>
            </div>
          ) : (
            <div className={styles.text}>{title}</div>
          ))}
      </div>
    </div>
  )
}
