"use strict";

Object.defineProperty(exports, "__esModule", {
  value: true
});
exports.default = void 0;
var _reactNative = require("react-native");
var _MapContext = require("../../modules/MapContext");
var _react = require("react");
var _themed = require("@rneui/themed");
var _lodash = _interopRequireDefault(require("lodash"));
var _POIList = _interopRequireDefault(require("./POIList"));
var _maps = require("@rnmapbox/maps");
var _POIDetail = _interopRequireDefault(require("./POIDetail"));
var _modules = require("../../modules");
var _base = require("../../types/amap/base");
function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
// import { AMapPOI } from '../../modules/POI';
var POIModeEnum = /*#__PURE__*/function (POIModeEnum) {
  POIModeEnum[POIModeEnum["Default"] = 0] = "Default";
  POIModeEnum[POIModeEnum["Search"] = 1] = "Search";
  POIModeEnum[POIModeEnum["Detail"] = 2] = "Detail";
  return POIModeEnum;
}(POIModeEnum || {});
/**
 * POIFinder props
 *
 * @category Props
 */
/**
 *
 *
 * https://blog.csdn.net/qq_34273059/article/details/98943840
 * 实现方案：根据手势信息更新面板位置
 * 1.搜索框默认显示在下部，当获取焦点后，设置搜索面板visible为true
 * 2.当拖拽搜索面板时，根据手势信息实时更新搜索面板的大小、位置
 * 3.在拖拽过程中地图组件位置需要跟着调整，当拖拽到屏幕50%时，地图组件全部隐藏
 *
 * 计划：
 * 优先实现搜索功能，先搜索框固定在底部，获取焦点搜索面板100%窗口显示，点击回退按钮再返回到原始状态。
 *
  @category Component
 */
const POIFinder = props => {
  const {
    map
  } = (0, _react.useContext)(_MapContext.MapContext);
  const {
    placeholder,
    akey,
    debounceDuraton = 100,
    request = new _modules.AmapPOIRequest({
      key: props.akey
    })
  } = props;
  const {
    listEle: ListEle = _POIList.default,
    detailEle: DetailEle = _POIDetail.default
  } = props;
  let {
    radius = 5000
  } = props;
  if (radius > _base.searchMaxRadius) {
    radius = 5000;
  }
  const searchRef = (0, _react.useRef)();
  const [text, setText] = (0, _react.useState)('');
  const [poiData, setPoiData] = (0, _react.useState)();
  const [selectedPOI, setSelectedPOI] = (0, _react.useState)();
  const [currentMode, setCurrentMode] = (0, _react.useState)(POIModeEnum.Default);
  const onFocus = () => {
    setCurrentMode(POIModeEnum.Search);
  };
  const onCancel = () => {
    if (text) {
      setText('');
    } else {
      setCurrentMode(POIModeEnum.Default);
      searchRef.current?.blur();
    }
  };
  const searchNear = _lodash.default.debounce(async keyboards => {
    const location = await map.getCenter();
    const result = await request.searchByDistance({
      key: akey,
      keywords: keyboards,
      location: location,
      radius
    });
    if (result.status) {
      setPoiData(result);
    }
  }, debounceDuraton);
  const onChangeText = async val => {
    setText(val);
    if (currentMode === POIModeEnum.Search) {
      // val && searchNear(val);
    }
  };
  const onSearchSubmit = e => {
    text && searchNear(text);
  };
  const onClosePress = async () => {
    setText('');
    setCurrentMode(POIModeEnum.Search);
  };
  const onPOIPress = async poi => {
    if (poi) {
      searchRef.current?.blur();
      setSelectedPOI(poi);
      setText(poi.name);
      console.log('poi', poi);
      setCurrentMode(POIModeEnum.Detail);
      // 将坐标显示到屏幕y轴1/5处
      const viewPosition = await map.getPointInView(poi.location);
      const newLocation = await map.getCoordinateFromView([viewPosition[0], viewPosition[1] + screen.height / 5]);
      map.setCenter(newLocation);
    }
  };
  return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(_reactNative.View, {
    pointerEvents: 'box-none',
    style: [styles.container, currentMode === POIModeEnum.Search && styles.containerFull, currentMode === POIModeEnum.Detail && styles.containerDetail]
  }, /*#__PURE__*/React.createElement(_themed.SearchBar, {
    ref: searchRef,
    containerStyle: styles.searchbar,
    inputContainerStyle: styles.input,
    value: text,
    showCancel: false,
    placeholder: placeholder,
    onFocus: onFocus,
    onChangeText: onChangeText,
    onSubmitEditing: onSearchSubmit,
    readOnly: currentMode === POIModeEnum.Detail
    // rightIcon={
    //     currentMode === POIModeEnum.Detail ? (
    //         <Icon onPress={onClosePress as any} name="close" type="font-awesome" />
    //     ) : undefined
    // }
    ,
    clearIcon: currentMode === POIModeEnum.Detail ? /*#__PURE__*/React.createElement(_themed.Icon, {
      onPress: onClosePress,
      name: "close",
      type: "font-awesome"
    }) : /*#__PURE__*/React.createElement(_themed.Icon, {
      style: {
        display: 'none'
      },
      onPress: onClosePress,
      name: "plus",
      type: "font-awesome"
    }),
    searchIcon: currentMode === POIModeEnum.Search ? /*#__PURE__*/React.createElement(_themed.Icon, {
      onPress: onCancel,
      name: "chevron-left",
      type: "font-awesome"
    }) : currentMode === POIModeEnum.Default ? /*#__PURE__*/React.createElement(_themed.Icon, {
      name: "search",
      type: "font-awesome"
    }) : /*#__PURE__*/React.createElement(_themed.Icon, {
      name: "location-outline",
      type: "ionicon"
    })
  }), currentMode === POIModeEnum.Search && /*#__PURE__*/React.createElement(_reactNative.View, {
    style: styles.searchcard
  }, /*#__PURE__*/React.createElement(ListEle, {
    keyboards: text,
    count: poiData?.count || 0,
    pois: poiData?.pois || [],
    onPOIPress: onPOIPress
  })), currentMode === POIModeEnum.Detail && /*#__PURE__*/React.createElement(_reactNative.View, {
    pointerEvents: 'box-none',
    style: styles.searchcard
  }, /*#__PURE__*/React.createElement(DetailEle, {
    poi: selectedPOI
  }))), currentMode == POIModeEnum.Detail && /*#__PURE__*/React.createElement(_maps.MarkerView, {
    coordinate: selectedPOI.location
  }, /*#__PURE__*/React.createElement(_reactNative.Text, null, /*#__PURE__*/React.createElement(_themed.Icon, {
    size: 40,
    color: '#00F',
    name: "location",
    type: "ionicon"
  }))));
};
var _default = exports.default = POIFinder;
const screen = _reactNative.Dimensions.get('screen');
const styles = _reactNative.StyleSheet.create({
  container: {
    display: 'flex',
    flexDirection: 'column',
    position: 'absolute',
    bottom: 5,
    // margin: 5,
    width: '100%',
    alignItems: 'stretch'
  },
  containerFull: {
    height: screen.height - 10,
    bottom: undefined,
    top: 5
  },
  containerDetail: {
    backgroundColor: 'transparent',
    height: screen.height - 10,
    bottom: undefined,
    top: 5
  },
  searchbar: {
    backgroundColor: '#fff',
    borderWidth: 0,
    marginHorizontal: 5,
    borderRadius: 5,
    marginBottom: 5,
    borderBlockColor: '#FFF'
  },
  input: {
    backgroundColor: '#fff'
  },
  searchcard: {
    flex: 1,
    width: '100%'
  }
});
//# sourceMappingURL=POIFinder.js.map