import React, { useState } from 'react'
import styles from './index.module.scss'
import { myData, otherUrl } from '@/utils/http'
import Hot2 from '@/pages/A2visit/PanoVideo/Hot2'
import { HotSpot, Krpano, Scene, View } from '@dage/krpano'
import HotIcon from '@/components/HotIcon'

// window.draggbleHotspotEvent = (ath: number, atv: number) => {
//   console.log(`ath: ${ath}, atv: ${atv}`)
// }

function A22Pano() {
  const [acInd, setAcInd] = useState(-1)
  const [activeIdx, setActiveIdx] = useState(-1)

  return (
    <div className={styles.A22Pano}>
      <Krpano className={styles.pano} currentScene='a22'>
        <Scene
          name='a22'
          previewUrl={otherUrl + 'pano/a22.tiles/thumb.jpg'}
          imageTagAttributes={{
            type: 'cube',
            tileSize: 512,
            multires: true
          }}
          images={[
            {
              tiledImageWidth: 2816,
              tiledImageHeight: 2816,
              url: otherUrl + 'pano/a22.tiles/%s/l3/%v/l3_%s_%v_%h.jpg'
            },
            {
              tiledImageWidth: 1536,
              tiledImageHeight: 1536,
              url: otherUrl + 'pano/a22.tiles/%s/l2/%v/l2_%s_%v_%h.jpg'
            },
            {
              tiledImageWidth: 768,
              tiledImageHeight: 768,
              url: otherUrl + 'pano/a22.tiles/%s/l1/%v/l1_%s_%v_%h.jpg'
            }
          ]}
        >
          <View hlookat={0} vlookat={0} fovType='MFOV' fov={120} fovMin={70} fovMax={130} />
          {myData.visit2.hot.map((item, index) => (
            // 热点图标
            <HotSpot
              key={index}
              type='text'
              name={item.name}
              atv={item.atv}
              ath={item.ath}
              edge='top'
              distorted={true}
              scale={item.size}
              bg={false}
              onOver={() => setActiveIdx(index)}
              onOut={() => setActiveIdx(-1)}
              onClick={() => setAcInd(index)}
              // @ts-ignore
              // onDown='draggable_hotspot()'
            >
              <HotIcon
                isModel={item.isModel ? true : false}
                key={index}
                index={index}
                isHoverAc={activeIdx === index}
                hoverSrc={item.hoverSrc}
                panoWidth='128px'
              />
            </HotSpot>
          ))}
        </Scene>
      </Krpano>

      {acInd !== -1 ? (
        <Hot2
          data={myData.visit2.hot[acInd].data}
          closeFu={() => setAcInd(-1)}
          name={myData.visit2.hot[acInd].name}
        />
      ) : null}
    </div>
  )
}

const MemoA22Pano = React.memo(A22Pano)

export default MemoA22Pano