import React, { useEffect, useRef, useState } from "react";
import { useDispatch, useSelector } from "react-redux";
import * as THREE from "three";
import { fetchForge, shutdownForge } from "@STORE/forgeSlice";
import hotspot from "@ASSET/img/hotspot.svg";

function ForgeModel({ forgeHeight, sprites = [] }) {
  const dispatch = useDispatch();
  const viewerEl = useRef(null);
  const {
    buildingInfo: { urn_3D },
    forgeViewer: { viewer, dataVizExtn, DataVizCore },
  } = useSelector((store) => store);

  // 載入 Forge Viewer
  useEffect(() => {
    if (urn_3D) {
      dispatch(
        fetchForge({
          viewerEl: viewerEl.current,
          urn: urn_3D,
        }),
      );
      return () => {
        dispatch(shutdownForge());
      };
    }
  }, [urn_3D]);

  // 熱點
  const spriteUpdate = (e, targetDbIds= [], style) => {
    e.hasStopped = true;
    dataVizExtn.invalidateViewables(targetDbIds, (viewable) => {
      console.log(style)
      return style;
    });
  };
  // 熱點點擊事件
  const onSpriteClicked = (event) => {
    const targetDbIds = [event.dbId];
    spriteUpdate(event, targetDbIds, { scale: 1.3, color: { r: 1, g: 0, b: 0 } });
    console.log(`Sprite clicked:${targetDbIds}`);
  };

  // 熱點取消點擊
  const onSpriteClickedOut = (event) => {
    const targetDbIds = [event.dbId];
    spriteUpdate(event, targetDbIds, { scale: 1, color: { r: 1.0, g: 1.0, b: 1.0 } });
    console.log(`Sprite clickedout:${targetDbIds}`);
  }

  // 進入系統監控頁面，出現熱點
  useEffect(() => {
    if (sprites.length !== 0 && viewer && dataVizExtn) {
      // const filterSprites = sprites.map;
      dataVizExtn.removeAllViewables();
      sprites.forEach(async ({ device_coordinate_3d, forge_dbid }, index) => {
        const viewableType = DataVizCore.ViewableType.SPRITE;
        const spriteColor = new THREE.Color(0xffffff);
        const spriteIconUrl = hotspot;
        const style = new DataVizCore.ViewableStyle(viewableType, spriteColor, spriteIconUrl);
        const viewableData = new DataVizCore.ViewableData();
        viewableData.spriteSize = 24;
        if (forge_dbid && device_coordinate_3d) {
          const dbId = 10 + index;
          const position = JSON.parse(device_coordinate_3d);
          const viewable = new DataVizCore.SpriteViewable(position, style, dbId);
          viewable.myContextData = {
            manufacturer: "MJM Co. Ltd.",
          };
          viewableData.addViewable(viewable);
        };
        await viewableData.finish();
        dataVizExtn.addViewables(viewableData);
      });
      viewer.addEventListener(DataVizCore.MOUSE_CLICK, onSpriteClicked);
      viewer.addEventListener(DataVizCore.MOUSE_CLICK_OUT, onSpriteClickedOut);
    }

    return () => {
      if (sprites.length !== 0 && viewer && dataVizExtn) {
        viewer.removeEventListener(DataVizCore.MOUSE_CLICK, onSpriteClicked);
        viewer.removeEventListener(DataVizCore.MOUSE_CLICK_OUT, onSpriteClickedOut);
      }
    };
  }, [sprites, dataVizExtn, viewer]);

  return <div ref={viewerEl} id="forgeViewer" style={{ height: forgeHeight }}></div>;
}

export default ForgeModel;