/**
 * 鼠标坐标
 */
import Tools from "../../Tools";
import { getCoordinateSystem } from "../../Global/global";
import MouseEvent from '../../Event/index'

let event
let MouseCoordinateElm
let requestAnimationFrameEventId

const MouseCoordinate = (sdk, status) => {
  let tools = new Tools(sdk)
  if (status) {
    if (event) {
      event.destroy()
    }
    event = new MouseEvent(sdk)
    let position = {
      x: '',
      y: '',
      z: ''
    }
    let contentElm
    if (MouseCoordinateElm) {
      contentElm = MouseCoordinateElm
    }
    else {
      contentElm = document.createElement('div');
      contentElm.style.position = 'absolute';
      contentElm.style['z-index'] = 777;
      contentElm.style.color = '#ff0000';
      contentElm.style.left = '0px';
      contentElm.style.top = '0px';
      contentElm.style.width = '100%';
      contentElm.style.height = '100%';
      contentElm.style['font-size'] = '12px';
      contentElm.style['pointer-events'] = 'none';
      contentElm.style.background = `url(${tools.getSourceRootPath()}/img/cross.png) no-repeat 100% 100%`;
      contentElm.style['background-size'] = `200% 200%`;
      MouseCoordinateElm = contentElm
    }
    sdk.viewer._element.appendChild(contentElm)
    let tmovement
    event.mouse_move((movement, cartesian) => {
      tmovement = { ...movement }
    })

    const getPosition = () => {
      if(!tmovement) {
        return
      }
      let canvas = sdk.viewer._element.getElementsByTagName('canvas')[0]
      let left = tmovement.endPosition.x;
      let top = tmovement.endPosition.y;
      let cartesian = event.getcartesian(tmovement)
      contentElm.style['background-position-x'] = `${-canvas.width + left + 4}px`;
      contentElm.style['background-position-y'] = `${-canvas.height + top - 2}px`;
      // this.entity.position = cartesian
      if (cartesian) {
        let degrees = tools.cartesian3Towgs84(cartesian, sdk.viewer)
        let coordinateSystem = getCoordinateSystem()
        if (coordinateSystem === 'EPSG:4326') {
          position = {
            x: degrees.lng,
            y: degrees.lat,
            z: degrees.alt
          }
          contentElm.innerHTML = `<div style='width: 150px;position: absolute; z-index: 777; color: #ff0000; font-size: 12px; left:${left + 20}px; top:${top + 10}px;'><p style='margin: 0;'>经度：${degrees.lng.toFixed(6)}°</p><p style='margin: 0;'>维度：${degrees.lat.toFixed(6)}°</p><p style='margin: 0;'>海拔：${degrees.alt.toFixed(2)} m</p></div>`
        }
        else {
          let result = tools.convert([{ x: degrees.lng, y: degrees.lat, z: degrees.alt }], 'EPSG:4326', coordinateSystem)
          position = result.points[0]
          contentElm.innerHTML = `<div style='width: 150px;position: absolute; z-index: 777; color: #ff0000; font-size: 12px; left:${left + 20}px; top:${top + 10}px;'><p style='margin: 0;'>x：${position.x.toFixed(6)}</p><p style='margin: 0;'>y：${position.y.toFixed(6)}</p><p style='margin: 0;'>z：${position.z.toFixed(6)}</p></div>`
        }
      }
      else {
        let coordinateSystem = getCoordinateSystem()
        if (coordinateSystem === 'EPSG:4326') {
          contentElm.innerHTML = `<div style='width: 150px;position: absolute; z-index: 777; color: #ff0000; font-size: 12px; left:${left + 20}px; top:${top + 10}px;'><p style='margin: 0;'>经度：-</p><p style='margin: 0;'>维度：-</p><p style='margin: 0;'>海拔：-</p></div>`
        }
        else {
          contentElm.innerHTML = `<div style='width: 150px;position: absolute; z-index: 777; color: #ff0000; font-size: 12px; left:${left + 20}px; top:${top + 10}px;'><p style='margin: 0;'>x：-</p><p style='margin: 0;'>y：-</p><p style='margin: 0;'>z：-</p></div>`
        }
      }

    }

    animateUpdate()
    function animateUpdate() {
      requestAnimationFrameEventId = requestAnimationFrame(
        animateUpdate
      )
      getPosition()
    }
  }
  else {
    if (event) {
      event.destroy()
      event = undefined
    }
    if (MouseCoordinateElm) {
      sdk.viewer._element.removeChild(MouseCoordinateElm)
      MouseCoordinateElm = undefined
    }
    if (requestAnimationFrameEventId) {
      cancelAnimationFrame(requestAnimationFrameEventId)
    }
  }
}

export { MouseCoordinate }