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

import HotImg from 'assets/hot.png'

import { IIndustyListItem, ITradeListItem, IndepthService } from 'Indepth/Indepth.service'
import { IKOLList } from 'Community/Community.service'
import { useLogin2p } from 'Login2p/Login2pContext'
import styles from '../css/SmallComponent.module.scss'

export const TimeLineId = 99999 // 时间线的ID

interface ISmallComponentProps {
  title?: React.ReactNode
  list: ITradeListItem[] | IIndustyListItem[] | IKOLList[] | undefined
  activeCategrayID?: number // 选中的ID
  hasFocus?: boolean // 是否含有关注
  className?: string
  isGushou?: boolean // 是否是固收
  onFllow?: (CategoryId: number) => void // 关注
  onSelect?: (CategoryId: number, CategoryName: string) => void // 切换行业/产业（选中）
}
/**左边小框内容组件 */
const SmallComponent: React.FC<ISmallComponentProps> = props => {
  const { title, list, activeCategrayID, hasFocus, isGushou = false, onFllow, onSelect } = props
  const login2p = useLogin2p()
  const history = useHistory()

  // 提交看板点击记录
  const { run: applyCollectionClick } = useRequest(IndepthService.getApplyCollectionClick, {
    manual: true,
    formatResult: response => response.data.Data
  })
  const handleToFllow = (item: ITradeListItem | IIndustyListItem | IKOLList, e: SyntheticEvent) => {
    e.stopPropagation()
    e.nativeEvent.stopImmediatePropagation()
    const ID =
      (item as ITradeListItem).CategoryId ||
      (item as IIndustyListItem).IndustrialManagementId ||
      (item as IKOLList).DepartmentId
    onFllow && onFllow(ID)
  }
  const handleClick = (item: ITradeListItem | IIndustyListItem | IKOLList) => {
    const ID =
      (item as ITradeListItem).CategoryId ||
      (item as IIndustyListItem).IndustrialManagementId ||
      (item as IKOLList).DepartmentId
    const name =
      (item as ITradeListItem).MatchTypeName || (item as IIndustyListItem).IndustryName || (item as IKOLList).NickName
    onSelect && onSelect(ID, name)
  }
  // 打开精选看板
  const handleOpencollections = () => {
    if (!login2p.jwt) {
      history.push(`/login2p?next=${encodeURIComponent(window.location.pathname + window.location.search)}`)
      return
    }
    applyCollectionClick()
    window.open(`${window.location.origin}/indepth/collections`)
  }
  return (
    <div className={styles['small-component-wrapper']}>
      {title}
      {list?.map((item, index) => (
        <div
          className={styles['smfllow-wrapper']}
          key={(item as ITradeListItem).CategoryId || (item as IIndustyListItem).IndustrialManagementId}
        >
          <div
            className={`title-line hover-line ${
              ((item as ITradeListItem).CategoryId && activeCategrayID === (item as ITradeListItem).CategoryId) ||
              ((item as IIndustyListItem).IndustrialManagementId &&
                activeCategrayID === (item as IIndustyListItem).IndustrialManagementId) ||
              ((item as IKOLList).DepartmentId && activeCategrayID === (item as IKOLList).DepartmentId)
                ? 'active-line'
                : ''
            }`}
            onClick={handleClick.bind(this, item)}
          >
            <span className="title">
              {(item as ITradeListItem).MatchTypeName ||
                (item as IIndustyListItem).IndustryName ||
                (item as IKOLList).NickName}
            </span>
            {item.IsHot && <img src={HotImg} alt="HOT" className="i-hot" />}
            {/* {item.IsNew && <span className="i-new">NEW</span>} */}
            {(item as ITradeListItem).CategoryId !== TimeLineId && (
              <div className="hover-content">
                <div className="time-wrapper">
                  <span>{(item as IIndustyListItem).UpdateTime || (item as IIndustyListItem)?.PublishDate}更新</span>
                  {(item as IIndustyListItem).IsRed && <span className="red-point m-l-xs" />}
                </div>
                <div className="name-fllow">
                  {hasFocus && (
                    <div className={`i-unfocus ${item.IsFollow && 'i-focus'}`} onClick={handleToFllow.bind(this, item)}>
                      {item.IsFollow ? '已' : '+'}关注
                    </div>
                  )}
                </div>
              </div>
            )}
          </div>
        </div>
      ))}
      {isGushou && (
        <div className={styles['smfllow-wrapper']}>
          <div className={`title-line hover-line`} onClick={handleOpencollections}>
            <span className="title">曲线工具</span>
          </div>
        </div>
      )}
    </div>
  )
}
export default SmallComponent
