import pipeMapCheck from '@/assets/images/pipe-map-check.png';
import pipeMapMarker from '@/assets/images/pipe-map-marker.png';
import CooglMap from '@/components/CooglMap';
import { useDeepCompareEffect } from 'ahooks';
import React, { Fragment, useRef, useState } from 'react';
import styles from './index.less';

const MapSection: React.FC<{
  pipelineInfo: any;
  coordData: any;
}> = (props) => {
  const { coordData, pipelineInfo } = props;
  const mapRef = useRef<any>();

  const [mapInitialized, setMapInitialized] = useState(false);

  useDeepCompareEffect(() => {
    const startP = coordData.processedCoordinates[0];
    if (mapRef.current) {
      setTimeout(() => {
        mapRef.current?.flyTo?.({
          destination: {
            x: Number(startP[0]),
            y: Number(startP[1]),
            z: 2000,
          },
        });
      }, 1000);
    }
  }, [mapInitialized, coordData]);
  // 绘制管廊路线
  const drawPipelinesFromCoord = (item: any) => {
    const type = pipelineInfo?.lx;

    const startP = item.processedCoordinates[0];
    const endP = item.processedCoordinates.at(-1);
    const color =
      type === '干线'
        ? '#AD6BFF'
        : type === '支线'
        ? '#FDFFC6'
        : type === '小型'
        ? '#6FDCFF'
        : '#4874FF';

    return (
      <Fragment>
        <CooglMap.CustomOverlay position={startP}>
          <div
            className={styles.point}
            style={{
              backgroundColor: color,
            }}
          >
            起
          </div>
        </CooglMap.CustomOverlay>
        <CooglMap.Polyline
          key={item.id}
          points={item.processedCoordinates}
          lineColor={color}
          width={3}
        />
        <CooglMap.CustomOverlay position={endP}>
          <div
            className={styles.point}
            style={{
              backgroundColor: color,
            }}
          >
            终
          </div>
        </CooglMap.CustomOverlay>
      </Fragment>
    );
  };
  return (
    <div className={styles.container}>
      <div className={styles.mapWrapper}>
        <div className={styles.header}>
          <div className={styles.title}>管廊分布</div>
        </div>

        <CooglMap.MapView
          ref={(ref) => {
            mapRef.current = ref;
            setMapInitialized(true);
          }}
          zoom={8}
          center={{ x: 103.96, y: 30.658842 }}
          mode="3D"
        >
          {drawPipelinesFromCoord(coordData)}
        </CooglMap.MapView>

        <div className={styles.legend}>
          <div className={styles.legendTitle}>图层图例</div>
          <div className={styles.legendItem}>
            <img src={pipeMapCheck} alt="监控中心" />
            <span>监控中心</span>
          </div>
          <div className={styles.legendItem}>
            <img src={pipeMapMarker} alt="总控中心" />
            <span>总控中心</span>
          </div>
          <div className={styles.legendItem}>
            <img src={pipeMapMarker} alt="分控中心" />
            <span>分控中心</span>
          </div>
        </div>
      </div>
    </div>
  );
};

export default MapSection;
