import { View, StyleSheet, Text, Image, FlatList } from 'react-native';
import { globalStyles } from '../../modules/styles';
import { normalizeDistance } from '../../utils/unit';
import { Divider } from '@rneui/themed';
/**
 * POIDetail props
 *
 * @category Props
 */

/**
  @category Component
 */
const POIDetail = props => {
  const {
    poi
  } = props;
  const distance = normalizeDistance(poi.distance);
  return /*#__PURE__*/React.createElement(View, {
    pointerEvents: 'box-none',
    style: styles.container
  }, /*#__PURE__*/React.createElement(View, {
    pointerEvents: 'box-none',
    style: styles.empty
  }), /*#__PURE__*/React.createElement(View, {
    pointerEvents: 'auto',
    style: styles.detail
  }, /*#__PURE__*/React.createElement(View, {
    style: [globalStyles.rowPadding]
  }, /*#__PURE__*/React.createElement(Text, {
    style: [{
      fontSize: 16,
      marginBottom: 5
    }]
  }, poi.name), /*#__PURE__*/React.createElement(Text, {
    style: [globalStyles.tipText]
  }, poi.type?.split(';')?.slice(1, 2)?.join('/') || '')), /*#__PURE__*/React.createElement(Divider, {
    style: [globalStyles.rowMargin]
  }), /*#__PURE__*/React.createElement(View, {
    style: [{
      marginBottom: 5
    }]
  }, /*#__PURE__*/React.createElement(Text, null, "\u8DDD\u4F60", distance.value, distance.unit)), /*#__PURE__*/React.createElement(View, {
    style: []
  }, /*#__PURE__*/React.createElement(Text, {
    style: [globalStyles.tipText]
  }, poi.address)), /*#__PURE__*/React.createElement(Divider, {
    style: [globalStyles.rowMargin]
  }), /*#__PURE__*/React.createElement(FlatList, {
    data: poi.photos,
    numColumns: 2,
    keyExtractor: e => e.url,
    renderItem: img => /*#__PURE__*/React.createElement(Image, {
      style: styles.image,
      source: {
        uri: img.item.url
      }
    })
  })));
};
export default POIDetail;
const styles = StyleSheet.create({
  container: {
    height: '90%'
  },
  empty: {
    flex: 1
  },
  detail: {
    backgroundColor: '#fff',
    maxHeight: '50%',
    paddingHorizontal: 5,
    borderTopLeftRadius: 5,
    borderTopRightRadius: 5
  },
  header: {},
  image: {
    aspectRatio: 1,
    flex: 1
  }
});
//# sourceMappingURL=POIDetail.js.map