import React, { useCallback } from 'react'
import styles from './index.module.scss'
import { baseURL } from '@/utils/http'
import classNames from 'classnames'

type Props = {
  // 是否是模型
  isModel: boolean
  index: number
  clickSon?: (index: number) => void //点击
  hoverSrc: string //鼠标移入显示的图片
  style?: { top: string; left: string } //是否定位（除了全景视频和全景图）
  zIndex?: number //层级问题，如果碰到遮挡 把这个值设置大一点
  // 更多模块的热点逻辑参数
  isHoverAc?: boolean //鼠标移入索引
  hoverFu?: (index: number) => void //鼠标移入事件
  isZhan?: boolean //是否全部展开
  // 全景视频和全景图的宽度
  panoWidth?: string
  isXiao?: number
  // 是否在全景中
  isPano?: boolean
}

function HotIcon({
  isModel,
  index,
  clickSon,
  hoverSrc,
  style,
  isHoverAc,
  hoverFu,
  isZhan,
  zIndex,
  panoWidth,
  isXiao,
  isPano
}: Props) {
  const onMouseEnter = useCallback(() => {
    if (hoverFu) {
      hoverFu(index)
    }
  }, [hoverFu, index])

  const clickSonFu = useCallback(() => {
    if (clickSon) clickSon(index)
  }, [clickSon, index])

  return (
    <div
      id='HotIcon'
      style={{
        position: style ? 'absolute' : 'relative',
        top: style ? style.top : 0,
        left: style ? style.left : 0,
        zIndex: zIndex || 1,
        width: panoWidth ? panoWidth : 'auto',
        transform: isXiao ? `scale(${isXiao})` : ''
      }}
      className={classNames(
        styles.HotIcon,
        isHoverAc ? styles.HotIconAc : '',
        isZhan ? styles.HotIconZhan : ''
      )}
      key={index}
    >
      {(!isPano || !isHoverAc) && (
        <img
          onMouseEnter={onMouseEnter}
          onClick={clickSonFu}
          className='HotIconBase'
          src={`${baseURL}visit/hot/hotBase${isModel ? '2' : ''}.png`}
          alt=''
          style={
            isPano
              ? {
                  position: 'relative',
                  maxWidth: 'unset',
                  maxHeight: 'unset'
                }
              : undefined
          }
        />
      )}
      {(!isPano || isHoverAc) && (
        <img
          onMouseEnter={onMouseEnter}
          onClick={clickSonFu}
          className='HotIconHover'
          src={baseURL + hoverSrc}
          alt=''
          style={
            isPano
              ? {
                  maxWidth: 'unset',
                  maxHeight: 'unset'
                }
              : undefined
          }
        />
      )}
    </div>
  )
}

const MemoHotIcon = React.memo(HotIcon)

export default MemoHotIcon
