import { View, StyleSheet, Image, Pressable, Dimensions } from 'react-native';
import Icon from 'react-native-vector-icons/Ionicons';
import { BottomSheet, Text, Header, Button, Avatar } from '@rneui/themed';
import React, { useState, useContext, useEffect, useImperativeHandle, forwardRef } from 'react';
import { MapContext } from '../modules/MapContext';
import MSlot from './slots/MSlot';
import { buttonSize } from '../config';
const screenWidth = Dimensions.get('window').width;
const itemWidth = screenWidth * 0.25; // 25% 的屏幕宽度

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

export const 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__*/forwardRef((props, ref) => {
  const {
    style = 'right'
  } = props;
  const [detailVisible, setDetailVisible] = useState(false);
  const onOpen = async () => {
    setDetailVisible(true);
  };
  const onClose = () => {
    setDetailVisible(false);
  };
  const {
    list = defaultBackgroundList,
    backgroundId = defaultBackgroundList[0].id
  } = props;
  const {
    map
  } = useContext(MapContext);
  const [currentBg, setCurrentBg] = useState(backgroundId);
  useEffect(() => {
    setCurrentBg(backgroundId);
  }, [backgroundId]);

  // 背景组件初始化时、根据默认选中的value、修改mapview的style
  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;
  };
  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.Children.map(props.children, child => {
    if (!child) {
      return child;
    }
    return /*#__PURE__*/React.cloneElement(child, {
      ...child.props,
      list,
      operation: {
        open,
        close,
        changeBg,
        getCurrentBg
      }
    });
  });
  return /*#__PURE__*/React.createElement(View, null, /*#__PURE__*/React.createElement(MSlot, {
    style: style
  }, /*#__PURE__*/React.createElement(Button, {
    type: "outline",
    style: backgroundPanelStyles.button,
    size: "md",
    onPress: onOpen
  }, /*#__PURE__*/React.createElement(Icon, {
    name: "layers-outline",
    size: buttonSize
  }))), /*#__PURE__*/React.createElement(BottomSheet, {
    onBackdropPress: backDropClickHandle,
    modalProps: {},
    isVisible: detailVisible,
    containerStyle: styles.containerStyle
  }, props.children ? childrenWithProps : /*#__PURE__*/React.createElement(BackgroundPanel, {
    list: list,
    renderItem: props.renderItem || undefined,
    backgroundId: backgroundId,
    currentBg: currentBg,
    setCurrentBg: updateCurrentBg,
    onClose: onClose
  })));
});
export default Background;
const styles = StyleSheet.create({
  containerStyle: {
    height: '100%',
    position: 'relative'
  },
  icon: {
    fontSize: 26,
    width: 26,
    height: 26
  }
});
const RenderItemWrapperHoc = (render, item, currentBg, onClick) => {
  return /*#__PURE__*/React.createElement(Pressable, {
    key: item.id,
    onPress: () => onClick(item.id)
  }, /*#__PURE__*/React.createElement(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.createElement(View, {
    style: backgroundPanelStyles.container
  }, /*#__PURE__*/React.createElement(Header, {
    style: backgroundPanelStyles.header,
    backgroundColor: '#f7f7f7',
    leftComponent: /*#__PURE__*/React.createElement(Text, {
      style: backgroundPanelStyles.headerText
    }, "\u56FE\u5C42"),
    rightComponent: /*#__PURE__*/React.createElement(Button, {
      type: "clear",
      size: "sm",
      onPress: closeHandle
    }, /*#__PURE__*/React.createElement(Icon, {
      style: backgroundPanelStyles.headerCloseBtn,
      name: "close-outline"
    }))
  }), /*#__PURE__*/React.createElement(View, {
    style: backgroundPanelStyles.backgroundItemList
  }, props?.list?.map(item => {
    return renderItem ? RenderItemWrapperHoc(renderItem, item, currentBg, clickHandle) : /*#__PURE__*/React.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.createElement(View, null, props.children));
};
const ImageWithText = props => {
  return /*#__PURE__*/React.createElement(Pressable, {
    onPress: () => props?.onClick(props.id)
  }, /*#__PURE__*/React.createElement(View, {
    style: {
      ...ImageWithTextStyles.wrapper,
      ...props.style
    }
  }, props.imgUrl ? /*#__PURE__*/React.createElement(Image, {
    style: props.highlight ? {
      ...ImageWithTextStyles.image,
      ...ImageWithTextStyles.imageHightlight
    } : ImageWithTextStyles.image,
    resizeMode: "contain",
    source: {
      uri: props.imgUrl
    }
  }) : /*#__PURE__*/React.createElement(Avatar, {
    title: props.text,
    size: 40,
    containerStyle: props.highlight ? {
      ...ImageWithTextStyles.avatarContainer,
      ...ImageWithTextStyles.avatarHighlight
    } : ImageWithTextStyles.avatarContainer
  }), /*#__PURE__*/React.createElement(Text, {
    style: props.highlight ? {
      ...ImageWithTextStyles.text,
      ...ImageWithTextStyles.textHighlight
    } : ImageWithTextStyles.text
  }, props.text)));
};
const ImageWithTextStyles = 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 = 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