import Mapbox from '@rnmapbox/maps';
import { Dimensions, StyleSheet, View } from 'react-native';
import { useEffect, useImperativeHandle, useLayoutEffect, useRef, useState } from 'react';
import { ContainerSlotContext, MapContext } from '../modules/MapContext';
import { styleFormat } from '../config/style';
import React from 'react';
import { Map } from '../modules/Map';
import LeftSlot from './slots/LeftSlot';
import BottomSlot from './slots/BottomSlot';
import RightSlot from './slots/RightSlot';

/**
 * MapView Props
 *
 * @category Props
 */

/**
 * @example
 * ```
 * import Mapa from 'react-native-mapa';
 * // 或者import { MapView, Camera } from 'react-native-mapa';
 *
 * <Mapa.MapView>
 *  <Mapa.Camera pitch={60} />
 * </Mapa.MapView>
 * ```
 *
 * @category Component
 */
const MapView = /*#__PURE__*/React.forwardRef((props, ref) => {
  const {
    children,
    style = 'MapboxVector',
    projection = 'mercator',
    onPress,
    onLongPress,
    onMapIdle
  } = props;
  const mapInsRef = useRef(null);
  const [customStyles, setStyle] = useState(() => {
    return styleFormat(style);
  });
  const containerSlotValue = useRef({
    leftSlotChildren: [],
    rightSlotChildren: [],
    bottomSlotChildren: []
  });
  const [lChildren, setLChildren] = useState([]);
  const [rChildren, setRChildren] = useState([]);
  const [bChildren, setBChildren] = useState([]);
  const mapRef = useRef(new class extends Map {
    constructor() {
      super(null);
    }
    updateStyle(stl) {
      setStyle(styleFormat(stl));
    }
  }());
  // mapView pix layout
  const [pixLayoutInfo, setLayoutInfo] = useState({
    width: Dimensions.get('window').width,
    height: Dimensions.get('window').height
  });
  const onMapPress = e => {
    onPress?.(e);
    mapRef.current.emit('onPress', e);
  };
  useImperativeHandle(ref, () => mapRef.current);

  // 获取地图的像素尺寸, 默认地图全屏！！改代码！！
  const getMapDimensions = () => {
    const {
      width,
      height
    } = Dimensions.get('window');
    setLayoutInfo({
      width,
      height
    });
  };
  useEffect(() => {
    setStyle(styleFormat(style));
  }, [style]);
  useLayoutEffect(() => {
    mapRef.current?.setMap(mapInsRef.current);
  }, []);
  return /*#__PURE__*/React.createElement(View, {
    style: styles.page
  }, /*#__PURE__*/React.createElement(View, {
    style: styles.container
  }, /*#__PURE__*/React.createElement(Mapbox.MapView, {
    ref: mapInsRef,
    styleURL: customStyles.styleURL,
    styleJSON: customStyles.styleJSON,
    projection: projection,
    attributionEnabled: false,
    logoEnabled: false,
    zoomEnabled: true,
    compassEnabled: false,
    scaleBarEnabled: false,
    rotateEnabled: true // 允许地图旋转
    ,
    onLayout: getMapDimensions,
    onPress: onMapPress,
    onLongPress: onLongPress,
    onMapIdle: onMapIdle,
    onCameraChanged: (...args) => mapRef.current?.emit('cameraChanged', ...args),
    onDidFinishLoadingMap: (...args) => mapRef.current?.emit('loaded', ...args),
    style: styles.map
  }, /*#__PURE__*/React.createElement(MapContext.Provider, {
    value: {
      map: mapRef.current,
      pixLayoutInfo
    }
  }, /*#__PURE__*/React.createElement(ContainerSlotContext.Provider, {
    value: {
      ...containerSlotValue.current,
      setLChildren,
      setRChildren,
      setBChildren
    }
  }, children, /*#__PURE__*/React.createElement(LeftSlot, {
    children: lChildren
  }), /*#__PURE__*/React.createElement(RightSlot, {
    children: rChildren
  }), /*#__PURE__*/React.createElement(BottomSlot, {
    children: bChildren
  }))))));
});
export default MapView;
const styles = StyleSheet.create({
  page: {
    flex: 1,
    justifyContent: 'center',
    alignItems: 'center',
    backgroundColor: '#F5FCFF'
  },
  container: {
    height: '100%',
    width: '100%',
    backgroundColor: 'tomato'
  },
  map: {
    flex: 1
  }
});
//# sourceMappingURL=MapView.js.map