import React, { useEffect, useState } from 'react';
import { zindexmarker } from '../zindex';


const {
  css,
  physics,
} = window.popmotionXL;


function renderMarker({ rzWarning, rzState, status }, { width }) {

  if(status===0){
    return `
      <div style="position:relative">
        <svg t="1616148185046" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="4230" width="${width}">
        </svg>
        <img width="${width}" style="position:absolute;top:0;left:0" src="${process.env.PUBLIC_URL}/assets/mapicon/wy2.png" alt="" className="panel-icon" />
      </div>
      `
  }else if(status===2){
    return `
      <div style="position:relative">
        <svg t="1616148185046" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="4230" width="${width}">
        </svg>
        <img width="${width}" style="position:absolute;top:0;left:0" src="${process.env.PUBLIC_URL}/assets/mapicon/wy3.png" alt="" className="panel-icon" />
      </div>
      `
  }else{
    return `
      <div style="position:relative">
        <svg t="1616148185046" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="4230" width="${width}">
        </svg>
        <img width="${width}" style="position:absolute;top:0;left:0" src="${process.env.PUBLIC_URL}/assets/mapicon/wy.png" alt="" className="panel-icon" />
      </div>
      `
  }

}

function WYMarker({ data, dispatch, setting, zoom }) {
  const [ show, setShow ] = useState(true)

  useEffect(() => {
    const width = 15;

    const placeholder = document.getElementById(`marker_weiyi_${data.id}`);
    if (!placeholder) {
      return;
    }

    let svgMarker = renderMarker(data, { width: width });

    placeholder.innerHTML = svgMarker;

    return () => {
      placeholder.innerHTML = '';
    }
  }, [setting]);

  const showPop = () => {
    dispatch.runtime.setFeaturePop({
      id: data.id,
      type: 'weiyi',
      data,
      lgtd: data.lgtd,
      lttd: data.lttd,
      elev: data.elev,
    })
  }


  return (
    <>
      <div
        id={`marker_weiyi_${data.id}`}
        style={{
          position: 'absolute',
          bottom: 0,
          left: 0,
          transformOrigin: 'bottom center',
          transform: 'translateX(-50%) scale(1.5)',
          lineHeight: 1,
          zIndex: zindexmarker.wy,
          cursor:"pointer"
        }}
        onClick={showPop}
      ></div>
      {
        zoom > 12 && (
          <div
            className="markerLabel2 markerLabelNew"
            style={{
              padding: 4,
              borderRadius: 4,
              fontSize: 10,
              lineHeight: 1,
              minWidth:"50px",
              top: 0,
              left: 0,
              transform: 'translateX(-50%)',
              zIndex: zindexmarker.wyLabel
            }}>
            {data.cdNm}
          </div>
        )
      }
    </>
  )
}

export default React.memo(WYMarker);