import { Button, Input } from 'antd'
import { useState, useEffect, FC } from 'react'
import { useSelector } from 'react-redux'
import { commentSave, getCommentList } from '../../service'
import './index.less'
import { CommentOutlined, FileImageOutlined, SmileOutlined } from '@ant-design/icons'

const CommentList: FC<any> = props => {
  const { userInfo } = useSelector(store => store.userInfo)
  const { momentId } = props
  const [replyList, setReplyList] = useState([])
  const [comment, setComment] = useState('')
  const getList = async () => {
    const res = await getCommentList({ id: momentId })
    if (res.success && res.data) {
      setReplyList(res.data)
    } else {
      setReplyList([])
    }
  }
  useEffect(() => {
    getList()
  }, [])

  const changeComment = e => {
    setComment(e.target.value)
  }

  const saveComment = () => {
    const params = {
      momentId,
      replyType: 2,
      content: comment,
      targetId: 12
    }
    commentSave(params).then(() => {
      getList()
    })
  }
  return (
    <div className='comment-list-box'>
      <div className='top-arrow'></div>
      <div className='comment-number'>评论 {replyList.length}</div>
      <div className='comment-wrapper'>
        <img src={userInfo?.avatar} className='avatar' />
        <div className='text-area-outer-box'>
          <div className='text-area-box'>
            <Input.TextArea
              onChange={changeComment}
              placeholder='和平发言'
              style={{ border: 'none', paddingLeft: 0 }}
            />
          </div>
          <div className='comment-bottom'>
            <div className='icon-box flex'>
              <div style={{ marginRight: 20 }}>
                <SmileOutlined />
              </div>
              <div>
                <FileImageOutlined />
              </div>
            </div>
            <div className='submit-btn-box flex'>
              <div className='text-num-box'>1/1000</div>
              <Button onClick={saveComment} type='primary'>
                发送
              </Button>
            </div>
          </div>
        </div>
      </div>
      <div className='comment-list-wrapper'>
        {replyList.map((item: Record<string, any>) => {
          return (
            <div key={item.id} className='comment-list-item flex align-top'>
              <img src={item.avatar} className='avatar' />
              <div>
                <div>{item.userName}</div>
                <div style={{ margin: '10px 0' }}>{item.content}</div>
                <div className='ope-btn-group flex'>
                  <div>12小时前</div>
                  <div className='reply-btn'>
                    <CommentOutlined />
                    &nbsp;评论
                  </div>
                </div>
                {item.children?.length &&
                  item.children.map(child => {
                    return (
                      <div key={child.id} className='comment-list-item flex align-top'>
                        <img src={child.avatar} className='avatar' />
                        <div>
                          <div>{child.userName}</div>
                          <div style={{ margin: '10px 0' }}>{child.content}</div>
                          <div className='ope-btn-group flex'>
                            <div>12小时前</div>
                            <div className='reply-btn'>
                              <CommentOutlined />
                              &nbsp;评论
                            </div>
                          </div>
                        </div>
                      </div>
                    )
                  })}
              </div>
            </div>
          )
        })}
      </div>
    </div>
  )
}
export default CommentList