import React, { useCallback, useEffect, useState } from 'react'
import styles from './index.module.scss'
import { A3listType } from './type'

const imgArrTemp = ['close.png']
const imgArr = imgArrTemp.map(item => require(`@/assets/img/${item}`))

type Props = {
  show: boolean
  setShow: (show: boolean) => void
  closeFu: () => void
}

function A3hotList({ show, setShow, closeFu }: Props) {
  const [list, setList] = useState<A3listType[]>([])

  useEffect(() => {
    if (show && list.length <= 0) setList(window.myHotList || [])
  }, [list.length, show])

  const openHot = useCallback((item: A3listType) => {
    setTimeout(() => {
      item && item.examine(window.player, true)
    }, 200)
  }, [])

  return (
    <div
      className={styles.A3hotList}
      style={{ opacity: show ? '1' : '0', pointerEvents: show ? 'auto' : 'none' }}
    >
      <div className='A3main'>
        <div className='A3title'>热点列表</div>
        {list.map((item, index) => (
          <div
            className='A3item'
            onClick={() => {
              openHot(item)
              setShow(false)
            }}
            key={index}
          >
            {item.info.title || '热点'}
          </div>
        ))}
        <div className='A3close' onClick={closeFu}>
          <img className='A3close' src={imgArr[0]} alt='' />
        </div>
      </div>
    </div>
  )
}

const MemoA3hotList = React.memo(A3hotList)

export default MemoA3hotList
