import React, { Component } from 'react';
import _ from 'lodash';
import {
	View,
	FlatList,
	TouchableOpacity,
	BackHandler,
} from 'react-native';
import { connect } from 'react-redux';
import {
	Text,
	NixplayIcon as Icon,
} from 'nixplay-ui-kit';
import PropTypes from 'prop-types';
import i18n from '~/locale/i18n';
import lifeStatus from '~/store/lifeStatusOpts.json';
import { styles } from './styles';

import { color as basicColor } from '~/styles/variables'

export class OccupationSelection extends Component {
	static navigationOptions = ({ navigation }) => {
		const { getParam } = navigation;
		return {
			title: 'Select Classification',
			headerTransparent: false,
			hideBackButton: true,
			leftButtons: [{
				icon: 'close',
				onPress: () => { getParam('onPressBack')(); },
			}],
		};
	}

	static propTypes = {
		navigation: PropTypes.object.isRequired,
	}

	constructor(props) {
		super(props);

		// provinces
		const { occupationList } = lifeStatus;

		this.state = {
			safeAreaInsets: {
				top: 0, left: 0, bottom: 0, right: 0,
			},
			provinceFilter: '',
			options: occupationList,
			occupation: this.props.navigation.getParam('selected', ''),
			txtInput: '',
			onUpdate: this.props.navigation.getParam('onUpdate', () => {}),
		};

		this.debounceOnPressBack = _.debounce(this.onPressBack, 3000, {
			leading: true,
			trailing: false,
		});
		this.didFocusSubscription = props.navigation.addListener('didFocus', () =>
			BackHandler.addEventListener('hardwareBackPress', this.onBackButtonPressAndroid));
		this.willBlurSubscription = this.props.navigation.addListener('willBlur', () =>
			BackHandler.removeEventListener('hardwareBackPress', this.onBackButtonPressAndroid));
		this.props.navigation.setParams({
			onPressBack: this.debounceOnPressBack,
		});
	}

	componentWillUnmount() {
		if (!_.isEmpty(this.didFocusSubscription)) this.didFocusSubscription.remove();
		if (!_.isEmpty(this.willBlurSubscription)) this.willBlurSubscription.remove();
	}

	onBackButtonPressAndroid = () => {
		this.debounceOnPressBack();
		return true;
	};

	onPressBack = (selected) => {
		if (!_.isEmpty(selected)) {
			this.state.onUpdate(selected);
		}
		this.props.navigation.goBack();
	}

	getSafeMargin() {
		return {
			marginBottom: this.state.safeAreaInsets.bottom,
			marginLeft: this.state.safeAreaInsets.left,
			marginRight: this.state.safeAreaInsets.right,
		};
	}

	selectItem = (item = {}) => {
		if (!_.isEmpty(item)) {
			this.debounceOnPressBack(item);
		}
	}

	render() {
		const { options, occupation } = this.state;
		return (
			<View style={[styles.container, this.getSafeMargin()]}>
				<FlatList
					ref={(ref) => { this.flatListRef = ref; }}
					style={styles.listContainer}
					data={options}
					keyExtractor={(option) => `${option}`}
					inverted={false}
					renderItem={({ item, index }) => {
						const isSelected = (_.isEqual(item, occupation));
						return (
							<TouchableOpacity
								style={[
									styles.option,
									index === options.length - 1 && styles.lastOption,
								]}
								key={item}
								onPress={() => { this.selectItem(item); }}
								disabled={_.isEqual(item, i18n.t('common.noResult'))}
							>
								{/* {isSelected && <Icon name="check" testID="Check" color={basicColor.wrikeGreen2} size={15} />} */}
								<View style={[
									styles.optionLabel,
								]}
								>
									<Text
										textStyle="subhead"
										color={isSelected ? basicColor.wrikeGreen2 : basicColor.wrikeBg }
										numberOfLines={2}
									>{item}
									</Text>
									{!_.isEmpty(item.withIcon) &&
										<Icon name={item.withIcon} color={isSelected ? 'textBlue' : 'textMistBlue'} style={styles.optionIcon} />}
								</View>
							</TouchableOpacity>
						);
					}}
				/>
			</View>
		);
	}
}

export default connect(null, null)(OccupationSelection);
