import React, { useCallback, useMemo, useState } from 'react'
import styles from './index.module.scss'
import { baseURL, isPc, myData } from '@/utils/http'
import HotIcon from '@/components/HotIcon'
import history from '@/utils/history'

type Props = {
  hidden: boolean
  isLoding: boolean
}

const data = myData.more['探索庄园']

function S1manor({ hidden, isLoding }: Props) {
  const [adInd, setAcInd] = useState(0)

  const hotInfo = useMemo(() => {
    return data.hot[adInd]
  }, [adInd])

  // 点击热点
  const clickSon = useCallback((index: number) => {
    if (isPc) history.push(data.hot[index].path)
    else setAcInd(index)
  }, [])

  return (
    <div
      hidden={hidden}
      className={styles.S1manor}
      style={{ backgroundImage: `url(${baseURL + data.bg})` }}
    >
      {/* 左侧图标 */}
      <div
        className='S1left'
        hidden={isLoding}
        style={{ backgroundImage: `url(${baseURL}more/s1Zhe.png)` }}
      >
        <img className='SlL1' src={baseURL + hotInfo.leftImg} alt='' />

        <div className='SlL2' onClick={() => history.push(hotInfo.path)}>
          <img src={`${baseURL}visit/arrow.png`} alt='' />
          <div className='BIBtxt'>开始探索</div>
        </div>
      </div>

      <div className='S1hotBox' hidden={isLoding}>
        {data.hot.map((item, index) => (
          // 热点图标
          <HotIcon
            key={index}
            index={index}
            clickSon={val => clickSon(val)}
            hoverSrc={item.hoverSrc}
            style={{
              top: item.loc.top,
              left: item.loc.left
            }}
            zIndex={item.zIndex}
            // 这个模块特有的参数
            hoverFu={val => setAcInd(val)}
            isHoverAc={adInd === index}
            isZhan={true}
          />
        ))}
      </div>
    </div>
  )
}

const MemoS1manor = React.memo(S1manor)

export default MemoS1manor