import { useEffect, useRef } from 'react';
// import { CustomOverlay, Polygon } from 'react-bmapgl';
import CooglMap from '@/components/CooglMap';

import { colorConfig } from '@/pages/SecurityServiceOverview/SafetyMap';
import styles from './index.less';
const DetMap = ({ data }: { data: any }) => {
  const MapRef = useRef<any>();

  useEffect(() => {
    if (data) {
      MapRef?.current?.flyTo({
        destination: {
          x: Number(data?.longitude),
          y: Number(data?.latitude),
          z: 239,
        },

        // orientation: {
        //   heading: 6.283185307179586,
        //   pitch: -1.568627330287271,
        //   roll: 0,
        // },
      });
    }
  }, [data]);
  if (!data) {
    return;
  }
  return (
    <div className={styles.container}>
      <CooglMap.MapView
        zoom={13}
        ref={MapRef}
        center={{ x: 104, y: 30.75 }}
        showCustomComponent={false}
      >
        <>
          <CooglMap.CustomOverlay
            position={[Number(data?.longitude), Number(data?.latitude)]}
            onSet={() => {
              // setDetailModalOpt({
              //   open: true,
              //   eventId: item?.riskId,
              //   ...item,
              // });
            }}
          >
            <img
              data-event-key="set"
              src={colorConfig[data?.risklevel!]?.icon}
              alt=""
              style={{ width: 52, height: 52, zIndex: 999 }}
            />
          </CooglMap.CustomOverlay>
        </>
      </CooglMap.MapView>
    </div>
  );
};

export default DetMap;
