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/sy2.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+4}" style="position:absolute;top:0;left:0" src="${process.env.PUBLIC_URL}/assets/mapicon/sy.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+4}" style="position:absolute;top:0;left:0" src="${process.env.PUBLIC_URL}/assets/mapicon/sy.png"   alt="" className="panel-icon" />
      </div>
    `
  }
}

function SYMarker({ data, dispatch, setting, zoom }) {
  const [ show, setShow ] = useState(true)
  
  useEffect(() => {
    const width = 16;

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

    let svgMarker = ''
    const hdswDataItem = setting?.filter(o=>o.stcd===data.stcd)//当前Marker对应的data
    if( Array.isArray(setting) && Array.isArray(hdswDataItem) && hdswDataItem.length === 0){
      //不显示
      placeholder.innerHTML = '';
      setShow(false)
      return
    }else{
      setShow(true)
      //显示
      if(setting===null){
        svgMarker = renderMarker(data, { width: width });
      }else{
        svgMarker = renderMarker(hdswDataItem[0], { width: width });
      }
    }
    placeholder.innerHTML = svgMarker;

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

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

  

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

export default React.memo(SYMarker);