import React, { FC } from 'react';
import { PlusOutlined, MinusOutlined } from '@ant-design/icons';
import Icon from '@sensoro/library/lib/components/icon-font';
import { ExpansionProps, Position } from '@/components/map/types';
import styles from './index.less';

export interface ControlsProps extends ExpansionProps {
  position?: Position;
  onGeoClick?: (position?: Position) => void;
}

const Controls: FC<ControlsProps> = props => {
  const { position, onGeoClick } = props;
  const map = props.__map__;

  const handleGeoClick = () => {
    if (position?.longitude) {
      map?.setCenter([position.longitude, position.latitude]);
      onGeoClick?.(position);
    }
  };

  const handlePlusClick = () => {
    map?.zoomIn();
  };

  const handleMinusClick = () => {
    map?.zoomOut();
  };

  return (
    <div className={styles.controls}>
      <div className={styles.toolbar}>
        <div className={styles.geo} onClick={handleGeoClick}>
          <Icon type="icon-center" />
        </div>
        <div className={styles.zooms}>
          <div className={styles.zoomPlus} onClick={handlePlusClick}>
            <PlusOutlined />
          </div>
          <div className={styles.zoomMinus} onClick={handleMinusClick}>
            <MinusOutlined />
          </div>
        </div>
      </div>
    </div>
  );
};

export default Controls;