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

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

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

function A3hotList({ show, 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' }}
    >
      <img onClick={closeFu} className='A3close' src={imgArr[0]} alt='' />

      <div className='A3main'>
        {list.map((item, index) => (
          <div onClick={() => openHot(item)} key={index}>
            {item.info.title || '热点'}
          </div>
        ))}
      </div>
    </div>
  )
}

const MemoA3hotList = React.memo(A3hotList)

export default MemoA3hotList