import React, { useEffect, useState } from 'react'
import useRequest from '@ahooksjs/use-request/es'
import { useHistory } from 'react-router-dom'

import { Row, Col, List, Spin, message } from 'antd'

import { IndepthService } from 'Indepth/Indepth.service'
import { CommunityService } from './Community.service'
import SmallComponent from 'Indepth/components/Small.component'
import ArticleCard from 'Indepth/components/ArticleCard'
import { useLogin2p } from 'Login2p/Login2pContext'
import styles from './css/ThemeInfo.module.scss'

type IThemeInfoProps = {
  themeID: number // 主题ID
}
/**主题详情页*/
const ThemeInfo: React.FC<IThemeInfoProps> = props => {
  const { themeID } = props
  const history = useHistory()
  const login2p = useLogin2p()

  const [actThemeID, setActThemeID] = useState<number>() // 选中的主题ID
  const [actSmTab, setActSmTab] = useState<number>(2)
  const smTab = [
    { key: 2, label: '更新时间' },
    { key: 1, label: '主题热度' }
  ]

  useEffect(() => {
    if (themeID) {
      setActThemeID(themeID)
      getThemeHotList(9999, 1, actSmTab)
      getThemeDetail(themeID)
    }
    // eslint-disable-next-line react-hooks/exhaustive-deps
  }, [themeID])

  // 主题列表
  const {
    data: themeList,
    run: getThemeHotList,
    refresh: rereshTheme
  } = useRequest(CommunityService.getThemeHotList, {
    manual: true,
    formatResult: response => response.data.Data.List
  })

  // 拉取主题详情
  const {
    data: dataInfo,
    loading: detailloading,
    run: getThemeDetail,
    refresh
  } = useRequest(CommunityService.getThemeDetail, {
    manual: true,
    formatResult: response => response.data.Data
  })

  // 主题的关注与取消关注
  const { run: applyIndustrialFllow } = useRequest(IndepthService.postIndustrialFllow, {
    manual: true,
    onSuccess: res => {
      res.data.Success ? message.success(res.data.Msg) : message.error(res.data.ErrMsg)
      res.data.Success && rereshTheme()
    }
  })
  // 关注与取消关注（主题）
  const handleApplyFllow = (ID: number) => {
    applyIndustrialFllow(ID)
  }
  // 主题的点击
  const handleSelectIndustrialManagementId = (ID: number) => {
    setActThemeID(ID)
    history.push(`/community/theme/${ID}${login2p.inviteCode ? '?invite_code=' + login2p.inviteCode : ''}`)
    window.scrollTo(0, 0)
  }

  const handleChangeSmTab = (key: number) => {
    setActSmTab(key)
    getThemeHotList(9999, 1, key)
  }
  return (
    <Spin spinning={detailloading}>
      <div className={`page-max-width m-t-md`}>
        <Row wrap={false}>
          <Col flex={'320px'} className={styles['theme-left']}>
            <SmallComponent
              title={
                <div className="theme-title">
                  <div className="theme-title-content">
                    {smTab.map(item => (
                      <div
                        className={`smtab-item ${actSmTab === item.key ? 'act-smtab' : ''}`}
                        key={item.key}
                        onClick={handleChangeSmTab.bind(this, item.key)}
                      >
                        {item.label}
                      </div>
                    ))}
                  </div>
                </div>
              }
              list={themeList || []}
              activeCategrayID={actThemeID}
              hasFocus={true}
              onFllow={handleApplyFllow}
              onSelect={handleSelectIndustrialManagementId}
            />
          </Col>
          <Col flex={'auto'}>
            {actThemeID && (
              <div className={styles['theme-right-top']}>
                <div className="industry-cp">
                  <div className="i-start">
                    <span>{dataInfo?.IndustryName}</span>
                  </div>
                  <div className="i-company-wrapper">
                    {dataInfo?.ListSubject?.map(item => (
                      <div className="company-item" key={item.IndustrialSubjectId}>
                        {item.SubjectName}
                      </div>
                    ))}
                  </div>
                </div>
              </div>
            )}
            <div className="i-article-list">
              <List
                dataSource={dataInfo?.List || []}
                renderItem={item => (
                  <ArticleCard
                    key={item.ArticleId}
                    articleItem={item}
                    afterShow={'subject'}
                    onCollect={refresh}
                    className="i-article-white-bg m-b-md"
                  />
                )}
              />
            </div>
          </Col>
        </Row>
      </div>
    </Spin>
  )
}

export default ThemeInfo
