/* 
TODO 修改完成
*/
import React from 'react'
import { map } from '../mapContext'
import { Popover } from 'antd'
import '../style/map-reset.less'
import IconFont from '../../../themeComponents/IconFont';

@map
class MapResetTools extends React.Component {
  componentDidMount() {
    this.props.init && this.props.init(this)
  }
  mapReset = () => {
    if (this.props.mapReset) {
      this.props.mapReset()
    } else {
      const { mapMethods } = this.props
      mapMethods.mapReset()
    }
  }
  mapZoom = zoom => {
    if (this.props.mapZoom) {
      this.props.mapZoom(zoom)
    } else {
      const { map } = this.props
      map.setZoom(map.getZoom() + zoom)
    }
  }
  render() {
    return <MapResetLayout {...this.props} mapReset={this.mapReset} mapZoom={this.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
