import React from 'react';
import { map } from '../mapContext';
import { Popover } from 'antd';
import IconFont from '../../../themeComponents/IconFont';
import '../style/map-reset.less';

@map
class MapResetTools extends React.Component {
  constructor(props) {
    super(props);
    this.state = {};
  }

  render() {
    const { mapReset, mapZoom } = this.props;
    return <MapResetLayout {...this.props} mapReset={mapReset} mapZoom={mapZoom} />;
  }
}

function MapResetLayout({ mapReset, mapZoom, className = '' }) {
  return (
    <div className={`map-reset-tool ${className}`}>
      <Popover placement="left" content="复位" overlayClassName="map-rest-tools-popup">
        <div className="map-reset map-tool-icon" onClick={mapReset}>
          <IconFont type="icon-S_Bar_Reduction" />
        </div>
      </Popover>

      <div className="map-zoom">
        <Popover placement="left" content="放大" overlayClassName="map-rest-tools-popup">
          <div className="map-tool-icon" onClick={() => mapZoom(1)}>
            <IconFont type="icon-S_Edit_LinePlus" />
          </div>
        </Popover>
        <Popover placement="left" content="缩小" onClick={() => mapZoom(-1)} overlayClassName="map-rest-tools-popup">
          <div className="map-tool-icon">
            <IconFont type="icon-S_Edit_LineMinus" />
          </div>
        </Popover>
      </div>
    </div>
  );
}

export default MapResetTools;
