import React, { useEffect, useState } from 'react'
import useRequest from '@ahooksjs/use-request/es'
import InfiniteScroll from 'react-infinite-scroll-component'

import { List, Spin } from 'antd'

import { IMyQuestionItem, PersonalService } from 'Personal/Personal.service'

import styles from '../css/PersonalIndex.module.scss'

/**活动提问 */
const QuestionComponent: React.FC = () => {
  const pageSize = 10
  const [currentPage, setCurrentPage] = useState<number>(1)
  const [hasMore, setHasMore] = useState<boolean>(false) // 列表加载更多
  const [listData, setListData] = useState<IMyQuestionItem[]>([])

  const { loading: listLoading, run } = useRequest(PersonalService.getQuestionList, {
    manual: true,
    formatResult: response => response.data.Data,
    onSuccess: res => {
      setListData([...listData, ...(res?.List || [])])
      setHasMore(res ? !res?.Paging?.IsEnd : false)
    }
  })

  useEffect(() => {
    setListData([])
    run(pageSize, currentPage)
    // eslint-disable-next-line react-hooks/exhaustive-deps
  }, [])
  const handleGetMore = () => {
    if (listLoading || !hasMore) return
    setCurrentPage(currentPage + 1)
    run(pageSize, currentPage + 1)
  }
  // const handleGetData = (page: number, pageSize: number) => {
  //   setCurrentPage(page)
  //   setPageSize(pageSize)
  //   run(pageSize, page)
  //   window.scrollTo(0, 0)
  // }

  const handleToSomePage = (item: IMyQuestionItem) => {
    // 类型 Activity 活动 、Report 文章报告
    let url = ''
    if (item.AskType === 'Activity') {
      url = `${window.location.origin}/activity/detail/${item.ReportOrActivityId}`
    }
    if (item.AskType === 'Report') {
      url = `${window.location.origin}/material/info/${item.ReportOrActivityId}`
    }

    window.open(url)
  }
  return (
    <Spin spinning={listLoading}>
      <div className={`${styles['collection-wrapper']}`}>
        <InfiniteScroll
          dataLength={listData?.length || 0}
          next={handleGetMore}
          hasMore={hasMore}
          loader={null}
          scrollableTarget="scrollableDiv"
        >
          <List
            className="padding-b-md"
            dataSource={listData || []}
            renderItem={(item: IMyQuestionItem, index) => (
              <div className={`${styles['my-message-item']} `}>
                <div className="my-message-time">{item.CreateTime}</div>
                <div className="my-message-object">
                  <span className="message-label">相关活动：</span>
                  <span className="message-object" onClick={handleToSomePage.bind(this, item)}>
                    {item.Title}
                  </span>
                </div>
                <div className="my-message-text">
                  <span className="message-label">问题内容：</span>
                  <span className="message-text">{item.Content}</span>
                </div>
              </div>
            )}
            // renderItem={(item: IMyQuestionItem, index) => (
            //   <div className={`${styles['my-message-item']} `}>
            //     <div className="my-message-time">{item.CreateTime}</div>
            //     <div className="my-message-object">
            //       <span className="message-label">相关活动：</span>
            //       <span className="message-object" onClick={handleToSomePage.bind(this, item)}>
            //         {item.Title}
            //       </span>
            //     </div>
            //     <div className="my-message-text">
            //       <span className="message-label">问题内容：</span>
            //       <span className="message-text">{item.Content}</span>
            //     </div>
            //   </div>
            // )}
          />
        </InfiniteScroll>
      </div>
    </Spin>
  )
}

export default QuestionComponent
