import React, { FC, CSSProperties, useEffect } from 'react';
import classNames from '@pansy/classnames';
import { Map, MapProps } from '@sensoro/react-amap';
import { MAP_CONFIG, MAP_STYLES } from '@/config/map';
import { SystemTheme } from '@/common/types';
import styles from './index.less';

interface AMapProps extends MapProps {
  theme?: SystemTheme;
  style?: CSSProperties;
  className?: string;
}

const AMap: FC<AMapProps> = props => {
  const {
    children,
    theme,
    mapStyle,
    style,
    className,
    events,
    ...rest
  } = props;

  return (
    <div className={classNames(styles.map, className)} style={{ ...style }}>
      <Map
        amapkey={MAP_CONFIG.key}
        version={MAP_CONFIG.version}
        mapStyle={mapStyle || MAP_STYLES.whiteSmoke}
        events={{
          ...events,
        }}
        {...rest}
      >
        {children}
      </Map>
    </div>
  );
};

export default React.memo(AMap);