text: import React from 'react';
  import PropTypes from 'prop-types';
  import {
  	View,
  	FlatList,
  	BackHandler,
  	ActivityIndicator,
  	Text,
  	ScrollView,
  	Keyboard,
  	Dimensions
  } from 'react-native';
  import { connect } from 'react-redux';
  import { isEqual, orderBy } from 'lodash';
  import SafeAreaView from 'react-native-safe-area-view';
  import Orientation from 'react-native-orientation-locker';
  import { Q } from '@nozbe/watermelondb';
  
  import database from '../../lib/database';
  import RocketChat from '../../lib/rocketchat';
  import RoomItem, { ROW_HEIGHT } from '../../presentation/RoomItem';
  import styles from './styles';
  import log from '../../utils/log';
  import I18n from '../../i18n';
  import SortDropdown from './SortDropdown';
  import ServerDropdown from './ServerDropdown';
  import {
  	toggleSortDropdown as toggleSortDropdownAction,
  	openSearchHeader as openSearchHeaderAction,
  	closeSearchHeader as closeSearchHeaderAction,
  	roomsRequest as roomsRequestAction
  } from '../../actions/rooms';
  import { appStart as appStartAction } from '../../actions';
  import debounce from '../../utils/debounce';
  import { isIOS, isAndroid } from '../../utils/deviceInfo';
  import RoomsListHeaderView from './Header';
  import {
  	DrawerButton,
  	CustomHeaderButtons,
  	Item
  } from '../../containers/HeaderButton';
  import StatusBar from '../../containers/StatusBar';
  import ListHeader from './ListHeader';
  import { selectServerRequest as selectServerRequestAction } from '../../actions/server';
  import { animateNextTransition } from '../../utils/layoutAnimation';
  
  const SCROLL_OFFSET = 56;
  
  const shouldUpdateProps = [
  	'searchText',
  	'loadingServer',
  	'showServerDropdown',
  	'showSortDropdown',
  	'sortBy',
  	'groupByType',
  	'showFavorites',
  	'showUnread',
  	'useRealName',
  	'StoreLastMessage',
  	'appState'
  ];
  const getItemLayout = (data, index) => ({
  	length: ROW_HEIGHT,
  	offset: ROW_HEIGHT * index,
  	index
  });
  const keyExtractor = item => item.rid;
  
  class RoomsListView extends React.Component {
  	static navigationOptions = ({ navigation }) => {
  		const searching = navigation.getParam('searching');
  		const cancelSearchingAndroid = navigation.getParam(
  			'cancelSearchingAndroid'
  		);
  		const onPressItem = navigation.getParam('onPressItem', () => {});
  		const initSearchingAndroid = navigation.getParam(
  			'initSearchingAndroid',
  			() => {}
  		);
  
  		return {
  			headerLeft: searching ? (
  				<CustomHeaderButtons left>
  					<Item
  						title='cancel'
  						iconName='cross'
  						onPress={cancelSearchingAndroid}
  					/>
  				</CustomHeaderButtons>
  			) : (
  				<DrawerButton
  					navigation={navigation}
  					testID='rooms-list-view-sidebar'
  				/>
  			),
  			headerTitle: <RoomsListHeaderView />,
  			headerRight: searching ? null : (
  				<CustomHeaderButtons>
  					{isAndroid ? (
  						<Item
  							title='search'
  							iconName='magnifier'
  							onPress={initSearchingAndroid}
  						/>
  					) : null}
  					<Item
  						title='new'
  						iconName='edit-rounded'
  						onPress={() => navigation.navigate('NewMessageView', {
  							onPressItem
  						})}
  						testID='rooms-list-view-create-channel'
  					/>
  				</CustomHeaderButtons>
  			)
  		};
  	};
  
  	static propTypes = {
  		navigation: PropTypes.object,
  		userId: PropTypes.string,
  		username: PropTypes.string,
  		token: PropTypes.string,
  		baseUrl: PropTypes.string,
  		server: PropTypes.string,
  		searchText: PropTypes.string,
  		loadingServer: PropTypes.bool,
  		showServerDropdown: PropTypes.bool,
  		showSortDropdown: PropTypes.bool,
  		sortBy: PropTypes.string,
  		groupByType: PropTypes.bool,
  		showFavorites: PropTypes.bool,
  		showUnread: PropTypes.bool,
  		useRealName: PropTypes.bool,
  		StoreLastMessage: PropTypes.bool,
  		appState: PropTypes.string,
  		toggleSortDropdown: PropTypes.func,
  		openSearchHeader: PropTypes.func,
  		closeSearchHeader: PropTypes.func,
  		appStart: PropTypes.func,
  		roomsRequest: PropTypes.func
  	};
  
  	constructor(props) {
  		super(props);
  		console.time(`${ this.constructor.name } init`);
  		console.time(`${ this.constructor.name } mount`);
  
  		const { width } = Dimensions.get('window');
  		this.state = {
  			searching: false,
  			search: [],
  			loading: true,
  			allChats: [],
  			chats: [],
  			unread: [],
  			favorites: [],
  			discussions: [],
  			channels: [],
  			privateGroup: [],
  			direct: [],
  			width
  		};
  		Orientation.unlockAllOrientations();
  		this.willFocusListener = props.navigation.addListener('willFocus', () => {
  			// Check if there were changes while not focused (it's set on sCU)
  			if (this.shouldUpdate) {
  				// animateNextTransition();
  				this.forceUpdate();
  				this.shouldUpdate = false;
  			}
  		});
  		this.didFocusListener = props.navigation.addListener('didFocus', () => {
  			BackHandler.addEventListener(
  				'hardwareBackPress',
  				this.handleBackPress
  			);
  		});
  		this.willBlurListener = props.navigation.addListener('willBlur', () => BackHandler.addEventListener(
  			'hardwareBackPress',
  			this.handleBackPress
  		));
  	}
  
  	componentDidMount() {
  		this.getSubscriptions();
  		const { navigation } = this.props;
  		navigation.setParams({
  			onPressItem: this._onPressItem,
  			initSearchingAndroid: this.initSearchingAndroid,
  			cancelSearchingAndroid: this.cancelSearchingAndroid
  		});
  		Dimensions.addEventListener('change', this.onDimensionsChange);
  		console.timeEnd(`${ this.constructor.name } mount`);
  	}
  
  	componentWillReceiveProps(nextProps) {
  		const { loadingServer, searchText } = this.props;
  
  		if (nextProps.server && loadingServer !== nextProps.loadingServer) {
  			if (nextProps.loadingServer) {
  				this.internalSetState({ loading: true });
  			} else {
  				this.getSubscriptions();
  			}
  		} else if (searchText !== nextProps.searchText) {
  			this.search(nextProps.searchText);
  		}
  	}
  
  	shouldComponentUpdate(nextProps, nextState) {
  		const { allChats } = this.state;
  		// eslint-disable-next-line react/destructuring-assignment
  		const propsUpdated = shouldUpdateProps.some(key => nextProps[key] !== this.props[key]);
  		if (propsUpdated) {
  			return true;
  		}
  
  		// Compare changes only once
  		const chatsNotEqual = !isEqual(nextState.allChats, allChats);
  
  		// If they aren't equal, set to update if focused
  		if (chatsNotEqual) {
  			this.shouldUpdate = true;
  		}
  
  		// Abort if it's not focused
  		if (!nextProps.navigation.isFocused()) {
  			return false;
  		}
  
  		const {
  			loading,
  			searching,
  			width,
  			search
  		} = this.state;
  		if (nextState.loading !== loading) {
  			return true;
  		}
  		if (nextState.searching !== searching) {
  			return true;
  		}
  		if (nextState.width !== width) {
  			return true;
  		}
  		if (!isEqual(nextState.search, search)) {
  			return true;
  		}
  		// If it's focused and there are changes, update
  		if (chatsNotEqual) {
  			this.shouldUpdate = false;
  			return true;
  		}
  		return false;
  	}
  
  	componentDidUpdate(prevProps) {
  		const {
  			sortBy,
  			groupByType,
  			showFavorites,
  			showUnread,
  			appState,
  			roomsRequest
  		} = this.props;
  
  		if (
  			!(
  				prevProps.sortBy === sortBy
  				&& prevProps.groupByType === groupByType
  				&& prevProps.showFavorites === showFavorites
  				&& prevProps.showUnread === showUnread
  			)
  		) {
  			this.getSubscriptions();
  		} else if (
  			appState === 'foreground'
  			&& appState !== prevProps.appState
  		) {
  			roomsRequest();
  		}
  	}
  
  	componentWillUnmount() {
  		if (this.getSubscriptions && this.getSubscriptions.stop) {
  			this.getSubscriptions.stop();
  		}
  		if (this.querySubscription && this.querySubscription.unsubscribe) {
  			this.querySubscription.unsubscribe();
  		}
  		if (this.willFocusListener && this.willFocusListener.remove) {
  			this.willFocusListener.remove();
  		}
  		if (this.didFocusListener && this.didFocusListener.remove) {
  			this.didFocusListener.remove();
  		}
  		if (this.willBlurListener && this.willBlurListener.remove) {
  			this.willBlurListener.remove();
  		}
  		Dimensions.removeEventListener('change', this.onDimensionsChange);
  		console.countReset(`${ this.constructor.name }.render calls`);
  	}
  
  	onDimensionsChange = ({ window: { width } }) => this.setState({ width });
  
  	// eslint-disable-next-line react/sort-comp
  	internalSetState = (...args) => {
  		const { navigation } = this.props;
  		if (navigation.isFocused()) {
  			animateNextTransition();
  		}
  		this.setState(...args);
  	};
  
  	getSubscriptions = debounce(async() => {
  		if (this.querySubscription && this.querySubscription.unsubscribe) {
  			this.querySubscription.unsubscribe();
  		}
  
  		const {
  			sortBy,
  			showUnread,
  			showFavorites,
  			groupByType
  		} = this.props;
  
  		const db = database.active;
  		const observable = await db.collections
  			.get('subscriptions')
  			.query(
  				Q.where('archived', false),
  				Q.where('open', true),
  				Q.where('t', Q.notEq('l'))
  			)
  			.observeWithColumns(['room_updated_at', 'unread', 'alert', 'user_mentions', 'f', 't']);
  
  		this.querySubscription = observable.subscribe((data) => {
  			let chats = [];
  			let unread = [];
  			let favorites = [];
  			let discussions = [];
  			let channels = [];
  			let privateGroup = [];
  			let direct = [];
  			if (sortBy === 'alphabetical') {
  				chats = orderBy(data, ['name'], ['asc']);
  			} else {
  				chats = orderBy(data, ['roomUpdatedAt'], ['desc']);
  			}
  
  			// it's better to map and test all subs altogether then testing them individually
  			const allChats = data.map(item => ({
  				alert: item.alert,
  				unread: item.unread,
  				userMentions: item.userMentions,
  				isRead: this.getIsRead(item),
  				favorite: item.f,
  				lastMessage: item.lastMessage,
  				name: this.getRoomTitle(item),
  				_updatedAt: item.roomUpdatedAt,
  				key: item._id,
  				rid: item.rid,
  				type: item.t,
  				prid: item.prid
  			}));
  
  			// unread
  			if (showUnread) {
  				unread = chats.filter(s => s.unread > 0 || s.alert);
  			} else {
  				unread = [];
  			}
  
  			// favorites
  			if (showFavorites) {
  				favorites = chats.filter(s => s.f);
  			} else {
  				favorites = [];
  			}
  
  			// type
  			if (groupByType) {
  				discussions = chats.filter(s => s.prid);
  				channels = chats.filter(s => s.t === 'c' && !s.prid);
  				privateGroup = chats.filter(s => s.t === 'p' && !s.prid);
  				direct = chats.filter(s => s.t === 'd' && !s.prid);
  			} else if (showUnread) {
  				chats = chats.filter(s => !s.unread && !s.alert);
  			}
  
  			this.internalSetState({
  				allChats,
  				chats,
  				unread,
  				favorites,
  				discussions,
  				channels,
  				privateGroup,
  				direct,
  				loading: false
  			});
  		});
  	}, 300, true);
  
  	initSearchingAndroid = () => {
  		const { openSearchHeader, navigation } = this.props;
  		this.setState({ searching: true });
  		navigation.setParams({ searching: true });
  		openSearchHeader();
  	};
  
  	cancelSearchingAndroid = () => {
  		if (isAndroid) {
  			const { closeSearchHeader, navigation } = this.props;
  			this.setState({ searching: false });
  			navigation.setParams({ searching: false });
  			closeSearchHeader();
  			this.internalSetState({ search: [] });
  			Keyboard.dismiss();
  		}
  	};
  
  	handleBackPress = () => {
  		const { searching } = this.state;
  		const { appStart } = this.props;
  		if (searching) {
  			this.cancelSearchingAndroid();
  			return true;
  		}
  		appStart('background');
  		return false;
  	};
  
  	// eslint-disable-next-line react/sort-comp
  	search = debounce(async(text) => {
  		const result = await RocketChat.search({ text });
  		this.internalSetState({
  			search: result
  		});
  	}, 300);
  
  	getRoomTitle = (item) => {
  		const { useRealName } = this.props;
  		return ((item.prid || useRealName) && item.fname) || item.name;
  	};
  
  	goRoom = (item) => {
  		this.cancelSearchingAndroid();
  		const { navigation } = this.props;
  		navigation.navigate('RoomView', {
  			rid: item.rid,
  			name: this.getRoomTitle(item),
  			t: item.t,
  			prid: item.prid,
  			room: item
  		});
  	};
  
  	_onPressItem = async(item = {}) => {
  		if (!item.search) {
  			return this.goRoom(item);
  		}
  		if (item.t === 'd') {
  			// if user is using the search we need first to join/create room
  			try {
  				const { username } = item;
  				const result = await RocketChat.createDirectMessage(username);
  				if (result.success) {
  					return this.goRoom({
  						rid: result.room._id,
  						name: username,
  						t: 'd'
  					});
  				}
  			} catch (e) {
  				log(e);
  			}
  		} else {
  			return this.goRoom(item);
  		}
  	};
  
  	toggleSort = () => {
  		const { toggleSortDropdown } = this.props;
  
  		const offset = isAndroid ? 0 : SCROLL_OFFSET;
  		if (this.scroll.scrollTo) {
  			this.scroll.scrollTo({ x: 0, y: offset, animated: true });
  		} else if (this.scroll.scrollToOffset) {
  			this.scroll.scrollToOffset({ offset });
  		}
  		setTimeout(() => {
  			toggleSortDropdown();
  		}, 100);
  	};
  
  	toggleFav = async(rid, favorite) => {
  		try {
  			const db = database.active;
  			const result = await RocketChat.toggleFavorite(rid, !favorite);
  			if (result.success) {
  				const subCollection = db.collections.get('subscriptions');
  				await db.action(async() => {
  					try {
  						const subRecord = await subCollection.find(rid);
  						await subRecord.update((sub) => {
  							sub.f = !favorite;
  						});
  					} catch (e) {
  						log(e);
  					}
  				});
  			}
  		} catch (e) {
  			log(e);
  		}
  	};
  
  	toggleRead = async(rid, isRead) => {
  		try {
  			const db = database.active;
  			const result = await RocketChat.toggleRead(isRead, rid);
  			if (result.success) {
  				const subCollection = db.collections.get('subscriptions');
  				await db.action(async() => {
  					try {
  						const subRecord = await subCollection.find(rid);
  						await subRecord.update((sub) => {
  							sub.alert = isRead;
  						});
  					} catch (e) {
  						log(e);
  					}
  				});
  			}
  		} catch (e) {
  			log(e);
  		}
  	};
  
  	hideChannel = async(rid, type) => {
  		try {
  			const db = database.active;
  			const result = await RocketChat.hideRoom(rid, type);
  			if (result.success) {
  				const subCollection = db.collections.get('subscriptions');
  				await db.action(async() => {
  					try {
  						const subRecord = await subCollection.find(rid);
  						await subRecord.destroyPermanently();
  					} catch (e) {
  						log(e);
  					}
  				});
  			}
  		} catch (e) {
  			log(e);
  		}
  	};
  
  	goDirectory = () => {
  		const { navigation } = this.props;
  		navigation.navigate('DirectoryView');
  	};
  
  	getScrollRef = ref => (this.scroll = ref);
  
  	renderListHeader = () => {
  		const { search } = this.state;
  		const { sortBy } = this.props;
  		return (
  			<ListHeader
  				searchLength={search.length}
  				sortBy={sortBy}
  				onChangeSearchText={this.search}
  				toggleSort={this.toggleSort}
  				goDirectory={this.goDirectory}
  			/>
  		);
  	};
  
  	getIsRead = (item) => {
  		let isUnread = item.archived !== true && item.open === true; // item is not archived and not opened
  		isUnread = isUnread && (item.unread > 0 || item.alert === true); // either its unread count > 0 or its alert
  		return !isUnread;
  	};
  
  	renderItem = ({ item }) => {
  		const { width } = this.state;
  		const {
  			userId,
  			username,
  			token,
  			baseUrl,
  			StoreLastMessage
  		} = this.props;
  		const id = item.rid.replace(userId, '').trim();
  
  		return (
  			<RoomItem
  				alert={item.alert}
  				unread={item.unread}
  				userMentions={item.userMentions}
  				isRead={this.getIsRead(item)}
  				favorite={item.f}
  				avatar={item.name}
  				lastMessage={item.lastMessage}
  				name={this.getRoomTitle(item)}
  				_updatedAt={item.roomUpdatedAt}
  				key={item._id}
  				id={id}
  				userId={userId}
  				username={username}
  				token={token}
  				rid={item.rid}
  				type={item.t}
  				baseUrl={baseUrl}
  				prid={item.prid}
  				showLastMessage={StoreLastMessage}
  				onPress={() => this._onPressItem(item)}
  				testID={`rooms-list-view-item-${ item.name }`}
  				width={width}
  				toggleFav={this.toggleFav}
  				toggleRead={this.toggleRead}
  				hideChannel={this.hideChannel}
  			/>
  		);
  	};
  
  	renderSectionHeader = header => (
  		<View style={styles.groupTitleContainer}>
  			<Text style={styles.groupTitle}>{I18n.t(header)}</Text>
  		</View>
  	);
  
  	renderSection = (data, header) => {
  		const { showUnread, showFavorites, groupByType } = this.props;
  
  		if (header === 'Unread' && !showUnread) {
  			return null;
  		} else if (header === 'Favorites' && !showFavorites) {
  			return null;
  		} else if (
  			[
  				'Discussions',
  				'Channels',
  				'Direct_Messages',
  				'Private_Groups'
  			].includes(header)
  			&& !groupByType
  		) {
  			return null;
  		} else if (header === 'Chats' && groupByType) {
  			return null;
  		}
  		if (data && data.length > 0) {
  			return (
  				<FlatList
  					data={data}
  					extraData={data}
  					keyExtractor={keyExtractor}
  					style={styles.list}
  					renderItem={this.renderItem}
  					ListHeaderComponent={() => this.renderSectionHeader(header)}
  					getItemLayout={getItemLayout}
  					enableEmptySections
  					removeClippedSubviews={isIOS}
  					keyboardShouldPersistTaps='always'
  					initialNumToRender={12}
  					windowSize={7}
  				/>
  			);
  		}
  		return null;
  	};
  
  	renderList = () => {
  		const {
  			search,
  			chats,
  			unread,
  			favorites,
  			discussions,
  			channels,
  			direct,
  			privateGroup
  		} = this.state;
  
  		if (search.length > 0) {
  			return (
  				<FlatList
  					data={search}
  					extraData={search}
  					keyExtractor={keyExtractor}
  					style={styles.list}
  					renderItem={this.renderItem}
  					getItemLayout={getItemLayout}
  					enableEmptySections
  					removeClippedSubviews={isIOS}
  					keyboardShouldPersistTaps='always'
  					initialNumToRender={12}
  					windowSize={7}
  				/>
  			);
  		}
  
  		return (
  			<View style={styles.container}>
  				{this.renderSection(unread, 'Unread')}
  				{this.renderSection(favorites, 'Favorites')}
  				{this.renderSection(discussions, 'Discussions')}
  				{this.renderSection(channels, 'Channels')}
  				{this.renderSection(direct, 'Direct_Messages')}
  				{this.renderSection(privateGroup, 'Private_Groups')}
  				{this.renderSection(chats, 'Chats')}
  			</View>
  		);
  	};
  
  	renderScroll = () => {
  		const { loading } = this.state;
  
  		if (loading) {
  			return <ActivityIndicator style={styles.loading} />;
  		}
  
  		const { showUnread, showFavorites, groupByType } = this.props;
  		if (!(showUnread || showFavorites || groupByType)) {
  			const { chats, search } = this.state;
  			return (
  				<FlatList
  					ref={this.getScrollRef}
  					data={search.length ? search : chats}
  					extraData={search.length ? search : chats}
  					contentOffset={isIOS ? { x: 0, y: SCROLL_OFFSET } : {}}
  					keyExtractor={keyExtractor}
  					style={styles.list}
  					renderItem={this.renderItem}
  					ListHeaderComponent={this.renderListHeader}
  					getItemLayout={getItemLayout}
  					removeClippedSubviews={isIOS}
  					keyboardShouldPersistTaps='always'
  					initialNumToRender={9}
  					windowSize={9}
  				/>
  			);
  		}
  
  		return (
  			<ScrollView
  				ref={this.getScrollRef}
  				contentOffset={isIOS ? { x: 0, y: SCROLL_OFFSET } : {}}
  				keyboardShouldPersistTaps='always'
  				testID='rooms-list-view-list'
  			>
  				{this.renderListHeader()}
  				{this.renderList()}
  			</ScrollView>
  		);
  	};
  
  	render = () => {
  		console.count(`${ this.constructor.name }.render calls`);
  		const {
  			sortBy,
  			groupByType,
  			showFavorites,
  			showUnread,
  			showServerDropdown,
  			showSortDropdown
  		} = this.props;
  
  		return (
  			<SafeAreaView
  				style={styles.container}
  				testID='rooms-list-view'
  				forceInset={{ vertical: 'never' }}
  			>
  				<StatusBar />
  				{this.renderScroll()}
  				{showSortDropdown ? (
  					<SortDropdown
  						close={this.toggleSort}
  						sortBy={sortBy}
  						groupByType={groupByType}
  						showFavorites={showFavorites}
  						showUnread={showUnread}
  					/>
  				) : null}
  				{showServerDropdown ? <ServerDropdown /> : null}
  			</SafeAreaView>
  		);
  	};
  }
  
  const mapStateToProps = state => ({
  	userId: state.login.user && state.login.user.id,
  	username: state.login.user && state.login.user.username,
  	token: state.login.user && state.login.user.token,
  	server: state.server.server,
  	baseUrl: state.settings.baseUrl || state.server ? state.server.server : '',
  	searchText: state.rooms.searchText,
  	loadingServer: state.server.loading,
  	showServerDropdown: state.rooms.showServerDropdown,
  	showSortDropdown: state.rooms.showSortDropdown,
  	sortBy: state.sortPreferences.sortBy,
  	groupByType: state.sortPreferences.groupByType,
  	showFavorites: state.sortPreferences.showFavorites,
  	showUnread: state.sortPreferences.showUnread,
  	useRealName: state.settings.UI_Use_Real_Name,
  	appState: state.app.ready && state.app.foreground ? 'foreground' : 'background',
  	StoreLastMessage: state.settings.Store_Last_Message
  });
  
  const mapDispatchToProps = dispatch => ({
  	toggleSortDropdown: () => dispatch(toggleSortDropdownAction()),
  	openSearchHeader: () => dispatch(openSearchHeaderAction()),
  	closeSearchHeader: () => dispatch(closeSearchHeaderAction()),
  	appStart: () => dispatch(appStartAction()),
  	roomsRequest: () => dispatch(roomsRequestAction()),
  	selectServerRequest: server => dispatch(selectServerRequestAction(server))
  });
  
  export default connect(mapStateToProps, mapDispatchToProps)(RoomsListView);
  