import React, { useContext } from 'react';
import { StyleSheet, View } from 'react-native';
import { MapContext } from '../modules/MapContext';
// import Icon from 'react-native-vector-icons/FontAwesome';
// import Icon from 'react-native-vector-icons/Ionicons';
import { Icon, Button } from '@rneui/themed';
import { buttonSize, zoomStep } from '../config';
import MSlot from './slots/MSlot';

/**
 * ZoomInOut props
 *
 * @category Props
 */

/**
 * 地图放大、缩小组件
 *
 * @category Component
 */
const ZoomInOut = props => {
  const {
    style = 'right'
  } = props;
  const {
    map
  } = useContext(MapContext);
  const onZoomIn = () => {
    // console.log('onZoomIn', map);
    map.zoomTo(zoomStep);
  };
  const onZoomOut = () => {
    map.zoomTo(-zoomStep);
  };

  // 显示位置可通过插槽扩展灵活适配
  /**
   * <MapSlot postion="right-top" style={customStyle}>
   * {{ children }}
   * </MapSlot>
   */

  return /*#__PURE__*/React.createElement(MSlot, {
    style: style
  }, /*#__PURE__*/React.createElement(View, null, /*#__PURE__*/React.createElement(Button, {
    type: "outline",
    style: styles.button,
    size: "md",
    onPress: onZoomIn
  }, /*#__PURE__*/React.createElement(Icon, {
    name: "plus",
    type: 'antdesign',
    size: buttonSize,
    color: "#000"
  })), /*#__PURE__*/React.createElement(Button, {
    type: "outline",
    style: styles.button,
    size: "md",
    onPress: onZoomOut
  }, /*#__PURE__*/React.createElement(Icon, {
    name: "minus",
    type: 'antdesign',
    size: buttonSize,
    color: "#000"
  }))));
};
export default ZoomInOut;
const styles = StyleSheet.create({
  container: {
    position: 'absolute',
    right: 5,
    top: 5
  },
  button: {
    backgroundColor: '#fff',
    marginBottom: 3
  }
});
//# sourceMappingURL=ZoomInOut.js.map