text: import React, { useEffect, useState } from 'react';
  import { FlatList, StyleSheet, Text } from 'react-native';
  import PropTypes from 'prop-types';
  
  import { withTheme } from '../theme';
  import RocketChat from '../lib/rocketchat';
  import { themes } from '../constants/colors';
  import openLink from '../utils/openLink';
  import I18n from '../i18n';
  import debounce from '../utils/debounce';
  import sharedStyles from './Styles';
  import * as List from '../containers/List';
  import SafeAreaView from '../containers/SafeAreaView';
  
  const styles = StyleSheet.create({
  	noResult: {
  		fontSize: 16,
  		paddingVertical: 56,
  		...sharedStyles.textAlignCenter,
  		...sharedStyles.textSemibold
  	}
  });
  
  const Item = ({ item }) => (
  	<List.Item
  		title={item.navigation?.page?.title || I18n.t('Empty_title')}
  		onPress={() => openLink(item.navigation?.page?.location?.href)}
  		translateTitle={false}
  	/>
  );
  Item.propTypes = {
  	item: PropTypes.object
  };
  
  const VisitorNavigationView = ({ route, theme }) => {
  	let offset;
  	let total = 0;
  	const [pages, setPages] = useState([]);
  
  	const getPages = async() => {
  		const rid = route.params?.rid;
  		if (rid) {
  			try {
  				const result = await RocketChat.getPagesLivechat(rid, offset);
  				if (result.success) {
  					setPages(result.pages);
  					offset = result.pages.length;
  					({ total } = result);
  				}
  			} catch {
  				// do nothig
  			}
  		}
  	};
  
  	useEffect(() => { getPages(); }, []);
  
  	const onEndReached = debounce(() => {
  		if (pages.length <= total) {
  			getPages();
  		}
  	}, 300);
  
  	return (
  		<SafeAreaView>
  			<FlatList
  				data={pages}
  				renderItem={({ item }) => <Item item={item} theme={theme} />}
  				ItemSeparatorComponent={List.Separator}
  				ListFooterComponent={List.Separator}
  				ListHeaderComponent={List.Separator}
  				contentContainerStyle={List.styles.contentContainerStyleFlatList}
  				ListEmptyComponent={() => <Text style={[styles.noResult, { color: themes[theme].titleText }]}>{I18n.t('No_results_found')}</Text>}
  				keyExtractor={item => item}
  				onEndReached={onEndReached}
  				onEndReachedThreshold={5}
  			/>
  		</SafeAreaView>
  	);
  };
  VisitorNavigationView.propTypes = {
  	theme: PropTypes.string,
  	route: PropTypes.object
  };
  VisitorNavigationView.navigationOptions = {
  	title: I18n.t('Navigation_history')
  };
  
  export default withTheme(VisitorNavigationView);
  