import React from 'react';
import PropTypes from 'prop-types';
import { FlatList, StyleSheet } from 'react-native';
import { SafeAreaView } from 'react-navigation';
import { connect } from 'react-redux';

import I18n from '../i18n';
import Separator from '../containers/Separator';
import ListItem from '../containers/ListItem';
import Status from '../containers/Status/Status';
import TextInput from '../containers/TextInput';
import EventEmitter from '../utils/events';
import Loading from '../containers/Loading';
import RocketChat from '../lib/rocketchat';
import log from '../utils/log';

import { LISTENER } from '../containers/Toast';
import { themes } from '../constants/colors';
import { withTheme } from '../theme';
import { withSplit } from '../split';
import { themedHeader } from '../utils/navigation';
import { getUserSelector } from '../selectors/login';
import { CustomHeaderButtons, Item, CancelModalButton } from '../containers/HeaderButton';

const STATUS = [{
	id: 'online',
	name: I18n.t('Online')
}, {
	id: 'busy',
	name: I18n.t('Busy')
}, {
	id: 'away',
	name: I18n.t('Away')
}, {
	id: 'offline',
	name: I18n.t('Invisible')
}];

const styles = StyleSheet.create({
	container: {
		flex: 1
	},
	status: {
		marginRight: 16
	},
	inputContainer: {
		marginTop: 32,
		marginBottom: 32
	},
	inputLeft: {
		position: 'absolute',
		top: 18,
		left: 14
	},
	inputStyle: {
		paddingLeft: 40
	}
});

class StatusView extends React.Component {
	static navigationOptions = ({ navigation, screenProps }) => ({
		title: I18n.t('Edit_Status'),
		headerLeft: <CancelModalButton onPress={navigation.getParam('close', () => {})} />,
		headerRight: (
			<CustomHeaderButtons>
				<Item
					title={I18n.t('Done')}
					onPress={navigation.getParam('submit', () => {})}
					testID='status-view-submit'
				/>
			</CustomHeaderButtons>
		),
		...themedHeader(screenProps.theme)
	})

	static propTypes = {
		user: PropTypes.shape({
			status: PropTypes.string,
			statusText: PropTypes.string
		}),
		theme: PropTypes.string,
		split: PropTypes.bool,
		navigation: PropTypes.object
	}

	constructor(props) {
		super(props);

		const { statusText } = props.user;
		this.state = { statusText, loading: false };

		props.navigation.setParams({ submit: this.submit, close: this.close });
	}

	submit = async() => {
		const { statusText } = this.state;
		const { user } = this.props;
		if (statusText !== user.statusText) {
			await this.setCustomStatus();
		}
		this.close();
	}

	close = () => {
		const { navigation, split } = this.props;
		if (split) {
			navigation.goBack();
		} else {
			navigation.pop();
		}
	}

	setCustomStatus = async() => {
		const { statusText } = this.state;

		this.setState({ loading: true });

		try {
			const result = await RocketChat.setUserStatus(statusText);
			if (result.success) {
				EventEmitter.emit(LISTENER, { message: I18n.t('Status_saved_successfully') });
			} else {
				EventEmitter.emit(LISTENER, { message: I18n.t('error-could-not-change-status') });
			}
		} catch {
			EventEmitter.emit(LISTENER, { message: I18n.t('error-could-not-change-status') });
		}

		this.setState({ loading: false });
	}

	renderSeparator = () => {
		const { theme } = this.props;
		return <Separator theme={theme} />;
	}

	renderHeader = () => {
		const { statusText } = this.state;
		const { user, theme } = this.props;

		return (
			<>
				<TextInput
					theme={theme}
					value={statusText}
					containerStyle={styles.inputContainer}
					onChangeText={text => this.setState({ statusText: text })}
					left={(
						<Status
							testID={`status-view-current-${ user.status }`}
							style={styles.inputLeft}
							status={user.status}
							size={12}
						/>
					)}
					inputStyle={styles.inputStyle}
					placeholder={I18n.t('What_are_you_doing_right_now')}
					testID='status-view-input'
				/>
				<Separator theme={theme} />
			</>
		);
	}

	renderItem = ({ item }) => {
		const { theme, user } = this.props;
		const { id, name } = item;
		return (
			<ListItem
				title={name}
				onPress={async() => {
					if (user.status !== item.id) {
						try {
							await RocketChat.setUserPresenceDefaultStatus(item.id);
						} catch (e) {
							log(e);
						}
					}
				}}
				testID={`status-view-${ id }`}
				left={() => <Status style={styles.status} size={12} status={item.id} />}
				theme={theme}
			/>
		);
	}

	render() {
		const { loading } = this.state;
		const { theme } = this.props;
		return (
			<SafeAreaView
				style={[
					styles.container,
					{ backgroundColor: themes[theme].auxiliaryBackground }
				]}
				forceInset={{ vertical: 'never' }}
				testID='status-view'
			>
				<FlatList
					data={STATUS}
					keyExtractor={item => item.id}
					contentContainerStyle={{ borderColor: themes[theme].separatorColor }}
					renderItem={this.renderItem}
					ListHeaderComponent={this.renderHeader}
					ListFooterComponent={() => <Separator theme={theme} />}
					ItemSeparatorComponent={this.renderSeparator}
				/>
				<Loading visible={loading} />
			</SafeAreaView>
		);
	}
}

const mapStateToProps = state => ({
	user: getUserSelector(state)
});

export default connect(mapStateToProps)(withSplit(withTheme(StatusView)));