"use strict";

Object.defineProperty(exports, "__esModule", {
  value: true
});
exports.defaultBackgroundList = exports.default = void 0;
var _reactNative = require("react-native");
var _Ionicons = _interopRequireDefault(require("react-native-vector-icons/Ionicons"));
var _themed = require("@rneui/themed");
var _react = _interopRequireWildcard(require("react"));
var _MapContext = require("../modules/MapContext");
var _MSlot = _interopRequireDefault(require("./slots/MSlot"));
var _config = require("../config");
function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function (e) { return e ? t : r; })(e); }
function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != typeof e && "function" != typeof e) return { default: e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && {}.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n.default = e, t && t.set(e, n), n; }
function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
const screenWidth = _reactNative.Dimensions.get('window').width;
const itemWidth = screenWidth * 0.25; // 25% 的屏幕宽度

/**
 * Background props
 *
 * @category Props
 */

const defaultBackgroundList = exports.defaultBackgroundList = [{
  id: 'AmapVector',
  name: '高德矢量',
  style: {
    version: '1.0.0',
    name: 'AMap',
    constants: {},
    sources: {
      amap: {
        type: 'raster',
        tiles: ['https://webrd04.is.autonavi.com/appmaptile?lang=zh_cn&size=1&scale=1&style=7&x={x}&y={y}&z={z}']
      }
    },
    sprite: '',
    glyphs: '',
    layers: [{
      id: 'amap',
      source: 'amap',
      type: 'raster'
    }]
  },
  logoUrl: 'https://play-lh.googleusercontent.com/l3jypy2cfNXc6R3vWstSgWHqZz-WKn5K3HyDSjDehwoh8rrsXan1byG45TQzDTkZ3azG'
}, {
  id: 'AmapSatellite',
  name: '高德卫星',
  style: {
    version: '1.0.0',
    name: 'AMap',
    constants: {},
    sources: {
      amap: {
        type: 'raster',
        tiles: ['https://webst04.is.autonavi.com/appmaptile?style=6&x={x}&y={y}&z={z}']
      }
    },
    sprite: '',
    glyphs: '',
    layers: [{
      id: 'amap',
      source: 'amap',
      type: 'raster'
    }]
  },
  logoUrl: 'https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcRyXY77AHfx3UBMxU9HqeskpBqswohYCjMLmtR2NpA1dw&s'
}, {
  id: 'MapboxVector',
  name: 'mapbox矢量',
  style: 'mapbox://styles/mapbox/dark-v10'
}, {
  id: 'Satellite',
  name: 'mapbox卫星',
  style: 'mapbox://styles/mapbox/satellite-v9'
}];

/**
 * 背景图层组件
  @category Component
 */
const Background = /*#__PURE__*/(0, _react.forwardRef)((props, ref) => {
  const {
    style = 'right'
  } = props;
  const [detailVisible, setDetailVisible] = (0, _react.useState)(false);
  const onOpen = async () => {
    setDetailVisible(true);
  };
  const onClose = () => {
    setDetailVisible(false);
  };
  const {
    list = defaultBackgroundList,
    backgroundId = defaultBackgroundList[0].id
  } = props;
  const {
    map
  } = (0, _react.useContext)(_MapContext.MapContext);
  const [currentBg, setCurrentBg] = (0, _react.useState)(backgroundId);
  (0, _react.useEffect)(() => {
    setCurrentBg(backgroundId);
  }, [backgroundId]);

  // 背景组件初始化时、根据默认选中的value、修改mapview的style
  (0, _react.useEffect)(() => {
    const target = list.filter(item => item.id === backgroundId)?.[0];
    if (!target) {
      return;
    }
    map.updateStyle(target.style);
  }, [list, backgroundId, map]);
  const backDropClickHandle = () => {
    // 点击背景、需要关闭bottomsheet
    setDetailVisible(false);
  };
  const close = () => {
    setDetailVisible(false);
  };
  const open = () => {
    setDetailVisible(true);
  };

  // 切换背景
  const changeBg = id => {
    const target = list?.filter(item => item.id === id)[0];
    if (!target) {
      return;
    }
    map.updateStyle(target.style);
    setCurrentBg(id);
  };

  // 获取当前背景
  const getCurrentBg = () => {
    return currentBg;
  };
  (0, _react.useImperativeHandle)(ref, () => {
    return {
      close,
      open,
      changeBg,
      getCurrentBg
    };
  });
  const updateCurrentBg = id => {
    const target = list?.filter(item => item.id === id)[0];
    if (!target) {
      return;
    }
    map.updateStyle(target.style);
    setCurrentBg(id);
  };
  const childrenWithProps = _react.default.Children.map(props.children, child => {
    if (!child) {
      return child;
    }
    return /*#__PURE__*/_react.default.cloneElement(child, {
      ...child.props,
      list,
      operation: {
        open,
        close,
        changeBg,
        getCurrentBg
      }
    });
  });
  return /*#__PURE__*/_react.default.createElement(_reactNative.View, null, /*#__PURE__*/_react.default.createElement(_MSlot.default, {
    style: style
  }, /*#__PURE__*/_react.default.createElement(_themed.Button, {
    type: "outline",
    style: backgroundPanelStyles.button,
    size: "md",
    onPress: onOpen
  }, /*#__PURE__*/_react.default.createElement(_Ionicons.default, {
    name: "layers-outline",
    size: _config.buttonSize
  }))), /*#__PURE__*/_react.default.createElement(_themed.BottomSheet, {
    onBackdropPress: backDropClickHandle,
    modalProps: {},
    isVisible: detailVisible,
    containerStyle: styles.containerStyle
  }, props.children ? childrenWithProps : /*#__PURE__*/_react.default.createElement(BackgroundPanel, {
    list: list,
    renderItem: props.renderItem || undefined,
    backgroundId: backgroundId,
    currentBg: currentBg,
    setCurrentBg: updateCurrentBg,
    onClose: onClose
  })));
});
var _default = exports.default = Background;
const styles = _reactNative.StyleSheet.create({
  containerStyle: {
    height: '100%',
    position: 'relative'
  },
  icon: {
    fontSize: 26,
    width: 26,
    height: 26
  }
});
const RenderItemWrapperHoc = (render, item, currentBg, onClick) => {
  return /*#__PURE__*/_react.default.createElement(_reactNative.Pressable, {
    key: item.id,
    onPress: () => onClick(item.id)
  }, /*#__PURE__*/_react.default.createElement(_reactNative.View, null, render?.(item, currentBg === item.id)));
};

/**
 * BackgroundPanelProps props
 *
 * @category Props
 */

const BackgroundPanel = props => {
  const {
    currentBg,
    setCurrentBg,
    onClose,
    renderItem
  } = props;
  const closeHandle = () => {
    onClose();
  };
  const clickHandle = id => {
    setCurrentBg(id);
  };
  return /*#__PURE__*/_react.default.createElement(_reactNative.View, {
    style: backgroundPanelStyles.container
  }, /*#__PURE__*/_react.default.createElement(_themed.Header, {
    style: backgroundPanelStyles.header,
    backgroundColor: '#f7f7f7',
    leftComponent: /*#__PURE__*/_react.default.createElement(_themed.Text, {
      style: backgroundPanelStyles.headerText
    }, "\u56FE\u5C42"),
    rightComponent: /*#__PURE__*/_react.default.createElement(_themed.Button, {
      type: "clear",
      size: "sm",
      onPress: closeHandle
    }, /*#__PURE__*/_react.default.createElement(_Ionicons.default, {
      style: backgroundPanelStyles.headerCloseBtn,
      name: "close-outline"
    }))
  }), /*#__PURE__*/_react.default.createElement(_reactNative.View, {
    style: backgroundPanelStyles.backgroundItemList
  }, props?.list?.map(item => {
    return renderItem ? RenderItemWrapperHoc(renderItem, item, currentBg, clickHandle) : /*#__PURE__*/_react.default.createElement(ImageWithText, {
      key: item.id,
      id: item.id,
      onClick: clickHandle,
      style: backgroundPanelStyles.backgroundItem,
      highlight: currentBg === item.id,
      imgUrl: item.logoUrl,
      text: item.name
    });
  })), /*#__PURE__*/_react.default.createElement(_reactNative.View, null, props.children));
};
const ImageWithText = props => {
  return /*#__PURE__*/_react.default.createElement(_reactNative.Pressable, {
    onPress: () => props?.onClick(props.id)
  }, /*#__PURE__*/_react.default.createElement(_reactNative.View, {
    style: {
      ...ImageWithTextStyles.wrapper,
      ...props.style
    }
  }, props.imgUrl ? /*#__PURE__*/_react.default.createElement(_reactNative.Image, {
    style: props.highlight ? {
      ...ImageWithTextStyles.image,
      ...ImageWithTextStyles.imageHightlight
    } : ImageWithTextStyles.image,
    resizeMode: "contain",
    source: {
      uri: props.imgUrl
    }
  }) : /*#__PURE__*/_react.default.createElement(_themed.Avatar, {
    title: props.text,
    size: 40,
    containerStyle: props.highlight ? {
      ...ImageWithTextStyles.avatarContainer,
      ...ImageWithTextStyles.avatarHighlight
    } : ImageWithTextStyles.avatarContainer
  }), /*#__PURE__*/_react.default.createElement(_themed.Text, {
    style: props.highlight ? {
      ...ImageWithTextStyles.text,
      ...ImageWithTextStyles.textHighlight
    } : ImageWithTextStyles.text
  }, props.text)));
};
const ImageWithTextStyles = _reactNative.StyleSheet.create({
  wrapper: {
    display: 'flex',
    alignItems: 'center'
  },
  image: {
    width: 40,
    height: 40,
    borderRadius: 4
  },
  imageHightlight: {
    borderWidth: 0.8,
    borderColor: '#40a6f9'
  },
  avatarContainer: {
    backgroundColor: '#BDBDBD',
    borderRadius: 4
  },
  avatarHighlight: {
    borderStyle: 'solid',
    borderWidth: 0.8,
    borderColor: '#40a6f9'
  },
  text: {
    textAlign: 'center',
    fontSize: 14,
    marginTop: 4
  },
  textHighlight: {
    color: '#008dff'
  }
});
const backgroundPanelStyles = _reactNative.StyleSheet.create({
  container: {
    backgroundColor: '#f7f7f7'
  },
  header: {
    display: 'flex',
    justifyContent: 'space-between'
  },
  headerText: {
    fontWeight: '300',
    fontSize: 18
  },
  headerCloseBtn: {
    fontSize: 18
  },
  backgroundItemList: {
    flexDirection: 'row',
    flexWrap: 'wrap',
    backgroundColor: '#fff',
    borderRadius: 10,
    paddingTop: 10
  },
  backgroundItem: {
    width: itemWidth,
    marginBottom: 10
  },
  button: {
    backgroundColor: '#fff'
  }
});
//# sourceMappingURL=Background.js.map