import { now } from 'lodash'
import React, { useEffect, useState, useRef } from 'react'
import { Row, Col, Button, Input } from 'antd'
import Item from './components/Item'
import { fetch, apis } from '@/utils/request'

const getReplyList = fetch(apis.messageBoard.detail)
const messageReply = fetch(apis.messageBoard.save)

export default props => {
  const [pageStyle, setPageStyle] = useState({})
  const [loading, setLoading] = useState(false)
  const [submitting, setSubmitting] = useState(false)
  const [content, setContent] = useState()
  const [listData, setListData] = useState([])
  const [queryParams, setQueryParams] = useState({ pageNum: 1, pageSize: 9999 })
  const pgDom = useRef()
  const imDom = useRef()

  const msgId = props.location.query.id

  const scrollToBottom = () => {
    const t = setTimeout(() => {
      imDom.current.scrollTop = imDom.current.scrollHeight
      clearTimeout(t)
    }, 200)
  }

  const sendMessage = () => {
    setSubmitting(true)
    messageReply({data: {
      msgId,
      content
    }}).then(e => {
      setListData(listData.concat({
        msgId,
        replyId: Math.random().toString(36).substring(2),
        userId: 999,
        content
      }))
      setContent()
      setSubmitting(false)
      scrollToBottom()
    }).then(e => console.error(e) || setSubmitting(false))
  }

  useEffect(() => {
    setLoading(true)
    getReplyList({params: queryParams, urlData: {id: msgId}}).then(res => {
      const {records, ...pageInfo} = res || {}
      setListData((records || []).reverse())
      setLoading(false)
      scrollToBottom()
    }).catch(() => setLoading(false))
  }, [msgId])

  useEffect(() => {
    const parent = pgDom.current.offsetParent
    const pageHeight = document.body.offsetHeight
    const domY = pgDom.current.offsetTop
    const parentY = parent.offsetTop
    const height = pageHeight - domY - (domY -  parentY) * 2
    setPageStyle({
      display: 'flex',
      flexDirection: 'column',
      height,
    })
  }, [])

  return (
    <div ref={pgDom} style={pageStyle}>
      <div style={{flex: 'auto', overflowY: 'auto'}} ref={imDom}>
      {
        listData.map(item => {
          const key = `${item.msgId}-${item.replyId}`
          const right = !!item.userId
          const name = item.userId ? '' : item.nickname
          const avatar = item.userId ? 'https://zhiyun-image.oss-accelerate.aliyuncs.com/xiangsong/logo.png' : item.avatar

          return (
            <Item
              key={key}
              right={right}
              name={name}
              date={item.createDate}
              avatar={avatar}
              content={item.content}
            />
          )
        })
      }
      </div>
      <div style={{flex: 'none', marginTop: 24}}>
        <div style={{display: 'flex'}}>
          <div style={{flex: 'auto'}}><Input.TextArea value={content} onChange={e => setContent(e.target.value)} /></div>
          <div style={{flex: 'none', marginLeft: 24}}><Button type="primary" loading={submitting} onClick={sendMessage}>提交</Button></div>
        </div>
      </div>
    </div>
  )
}
