import React, { FC } from 'react';
import classNames from '@pansy/classnames';
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 {
  className?: string;
  position?: Position;
  onGeoClick?: (position?: Position) => void;
  showGeo?: boolean;
}

const Controls: FC<ControlsProps> = props => {
  const { className, position, showGeo, 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={classNames(className, styles.controls)}>
      {showGeo && (
        <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>
  );
};

Controls.defaultProps = {
  showGeo: false,
};

export default Controls;