import React, { Component } from 'react';
import ReactNative from 'ReactNative';
import {
	Text,
	View,
	StyleSheet,
	TouchableHighlight,
	Modal,
} from 'react-native';
import TVEventHandler from 'TVEventHandler';

export default class Events extends Component {

	constructor(props) {
		super(props);

		this.state = {
			modalVisible: false,
		};
		this._tvEventHandler = new TVEventHandler();
	}

	_enableTVEventHandler() {
		this._tvEventHandler.enable(this, (cmp, evt) => {
			const myTag = ReactNative.findNodeHandle(cmp);
			console.log('Event.js TVEventHandler: ', evt.eventType);
			// if (evt.eventType !== 'blur' && evt.eventType !== 'focus') {
			// 	console.log('Event.js TVEventHandler: ', evt.eventType);
			// }
		});
	}

	_disableTVEventHandler() {
		if (this._tvEventHandler) {
			this._tvEventHandler.disable();
			delete this._tvEventHandler;
		}
	}

	componentDidMount() {
		this._enableTVEventHandler();
	}

	componentWillUnmount() {
		this._disableTVEventHandler();
	}

	_renderRow() {
		return (
			<View style={styles.row}>
				{
					Array.from({ length: 7 }).map((_, index) => {
						return (
							<TouchableHighlight
								key={index}
								onPress={() => { this.setState({ modalVisible: !this.state.modalVisible }); }}
							>
								<View style={styles.item}>
									<Text style={styles.itemText}>{ index }</Text>
								</View>
							</TouchableHighlight>
						);
					})
				}
			</View>
		);
	}

	render() {
		return (
			<View style={styles.container}>
				<Modal visible={this.state.modalVisible}>
					<View style={styles.modal}>
						{ this._renderRow() }
						{ this._renderRow() }
					</View>
				</Modal>
				{ this._renderRow() }
				{ this._renderRow() }
			</View>
		);
	}
}

const styles = StyleSheet.create({
	container: {
		flex: 1,
		backgroundColor: 'darkslategrey',
	},
	row: {
		flexDirection: 'row',
		padding: 30,
	},
	item: {
		width: 200,
		height: 100,
		borderColor: 'cyan',
		borderWidth: 2,
		margin: 30,
		alignItems: 'center',
		justifyContent: 'center',
	},
	itemText: {
		fontSize: 40,
		color: 'cyan',
	},
	modal: {
		flex: 1,
		backgroundColor: 'steelblue',
	},
});