/** @format */

import '../../../baseComponents/Modal/style/iconfont.css';

import _ from 'lodash';
import React, { useEffect, useRef, useState } from 'react';
import styled from 'styled-components';

import { loadScript } from '../../../utils';
import Basic2DMap from '../Basic2DMap/index';
import Basic2DMapAreaPolygon from '../Basic2DMapAreaPolygon/index';
import Basic2DMapLabel from '../Basic2DMapLabel/index';
import Basic2DMapMarker from '../Basic2DMapMarker/index';
import { Container } from './styled';

interface AmapBoxProps {
  model: any;
  features: string[];
  size?: Record<string, any>;
  parentId: string;
  isShowSatelliteLayer: boolean;
  isShowRoadNetLayer: boolean;
}

if (!window.__map2d) {
  window.__map2d = {};
}

const AmapBox = (props: AmapBoxProps) => {
  const {
    model = { value: 'normal' },
    features = ['bg', 'road', 'building', 'point'],
    parentId = '1',
    isShowSatelliteLayer = false,
    isShowRoadNetLayer = false,
  } = props;
  const [loadState, setLoadState] = useState(true);
  const [map, setMap] = useState(null);
  const [satelliteLayer, setSatelliteLayer] = useState();
  const [roadNetLayer, setRoadNetLayer] = useState();
  const [size, setSize] = useState();
  const ref = useRef(null);
  // useEffect(() => {
  //   loadScript([
  //     'https://cache.amap.com/lbs/static/es5.min.js',
  //     'https://webapi.amap.com/maps?v=2.0&key=514d1119d69e5230b435c975369b9a1d&plugin=AMap.Geocoder,AMap.Scale,AMap.InfoWindow,AMap.Pixel',
  //   ]).then(() => {
  //     setLoadState(true);
  //   });
  // }, []);
  // console.log('props', props);

  useEffect(() => {
    if (!loadState) return;
    const map = new AMap.Map(ref.current, {
      resizeEnable: true, //是否监控地图容器尺寸变化
      zoom: 8, //初始地图级别
      center: [120.153576, 29.29],
      mapStyle: 'amap://styles/dark',
    });
    window.__map2d[parentId] = {
      map: map,
      setInfoWindowFunc: setInfoWindowFunc,
    };
    const satelliteLayer = new AMap.TileLayer.Satellite();
    const roadNetLayer = new AMap.TileLayer.RoadNet();
    setSatelliteLayer(satelliteLayer);
    setRoadNetLayer(roadNetLayer);
    setMap(map);
    return () => {
      map.destroy();
    };
  }, [loadState]);

  useEffect(() => {
    if (!map) return;
    if (isShowSatelliteLayer) {
      map.add(satelliteLayer);
    } else {
      map.remove(satelliteLayer);
    }
  }, [isShowSatelliteLayer, satelliteLayer]);

  useEffect(() => {
    if (!map) return;
    if (isShowRoadNetLayer) {
      map.add(roadNetLayer);
    } else {
      map.remove(roadNetLayer);
    }
  }, [isShowRoadNetLayer, roadNetLayer]);

  useEffect(() => {
    if (!loadState) return;
    map &&
      model &&
      model.value &&
      setTimeout(function() {
        setMapStyle(model.value);
      });
  }, [model, map]);

  useEffect(() => {
    if (!loadState) return;
    features && map && setMapFeature(features);
  }, [features, map]);

  useEffect(() => {
    setSize(window.__map2d[parentId]?.size);
  }, [window.__map2d[parentId]?.size]);

  // 设置主题
  function setMapStyle(value: string) {
    const styleName = 'amap://styles/' + value;
    map?.setMapStyle(styleName);
  }

  // 设置地图显示要素  ['bg', 'road', 'building', 'point']
  function setMapFeature(features: string[]) {
    map.setFeatures(features);
  }

  // 设置弹窗
  function setInfoWindowFunc(window: any) {
    // console.log(window);
  }
  return (
    <Container>
      <div ref={ref} style={size ? size : { width: 500, height: 500 }}></div>
      {/* {loadState ? <Basic2DMapMarker /> : null} */}
      {/* {loadState ? <Basic2DMapAreaPolygon /> : null} */}
      {/* {loadState ? <Basic2DMapLabel /> : null} */}
      {/* {loadState ? <Basic2DMap /> : null} */}
    </Container>
  );
};
``;
export default AmapBox;