/**
 * Sample React Native App
 * https://github.com/facebook/react-native
 * @flow
 */

import React, { Component } from 'react';
import {
  AppRegistry,
  Text,
  View,
  TabBarIOS,
  ListView,
  Modal,
  TouchableHighlight,
} from 'react-native';

import List from './List';

export default class tvTabBar extends Component {

	_tabItems: Array<{ key: string }> = [
		{ key: 'TAB 1' },
		{ key: 'TAB 2' },
		{ key: 'TAB 3' },
		{ key: 'TAB 4' },
	];

	constructor(props) {
		super(props);
		this.state = {
			activeTab: 'TAB 1',
			showModal: false,
		};
	}

	_getTabItem = (key: string) => {
		switch (key) {
			case 'TAB 1':
				return (
					<View style={{ flex: 1, top: 140, borderColor: 'red', borderWidth: 10, padding: 200 }}>
						<Modal 
							visible={this.state.showModal}
							transparent={true}
						>
							<List closeModal={this.closeModal} />

						</Modal>
						<TouchableHighlight onPress={() => {
								console.log('MODAL SHOW', this.state.showModal);
								this.setState({ showModal: true });
							}}
							underlayColor={'orange'}
						>
							<Text style={{ fontSize: 30 }}>Open Modal</Text>
						</TouchableHighlight>
					</View>
				);
			case 'TAB 2':
				return (
					<View style={{ flex: 1, top: 140, borderColor: 'green', borderWidth: 20 }}>
						<Text style={{ fontSize: 30 }}>TAB 2</Text>
					</View>
				);
			case 'TAB 3':
				return (
					<View style={{ flex: 1, top: 140, borderColor: 'darkblue', borderWidth: 30 }}>
						<Text style={{ fontSize: 30 }}>TAB 3</Text>
					</View>
				);
			case 'TAB 4':
				return (
					<View style={{ flex: 1, top: 140, borderColor: 'deeppink', borderWidth: 40 }}>
						<Text style={{ fontSize: 30 }}>TAB 4</Text>
					</View>
				);
			default:
				return null;
		}
	}

	closeModal = () => {
		this.setState({ showModal: false });
	}

	_setTab(key) {
		return () => {
			console.log('Selecting tab: ', key);
			if (this.state.activeTab !== key) {
				this.setState({ activeTab: key });
			}
		};
	}

	render() {
		return (
			<TabBarIOS>
				{
					this._tabItems.map((tabItem) => {
						return (
							<TabBarIOS.Item
								key={tabItem.key}
								onPress={this._setTab(tabItem.key)}
								title={tabItem.key}
								selected={tabItem.key === this.state.activeTab}
							>
								{ this._getTabItem(tabItem.key) }
							</TabBarIOS.Item>
						);
					})
				}
			</TabBarIOS>
		);
	}
}

AppRegistry.registerComponent('tvTabBar', () => { return tvTabBar; });

/**
 * Sample React Native App
 * https://github.com/facebook/react-native
 * @flow
 */

import React, { Component } from 'react';
import {
  Text,
  View,
  ListView,
  FlatList,
  TouchableHighlight,
} from 'react-native';

export default class List extends Component {

	
	constructor(props) {
		super(props);

		this.ds = new ListView.DataSource({ rowHasChanged: (r1: Object, r2: Object) => { return r1 !== r2; } });

		this.state = {
			dataSource: this.ds.cloneWithRows([{ value: 1 }]),
			data: [{ value: 1 }, { value: 2 }],
		}
	};

	_renderRow(rowData) {
		console.log('RenderRow: ', rowData.value);
		return (
			<View>
				<Text>{rowData.value}</Text>
			</View>
		)
	}
	
	_renderFlatListItem = ({ item }) => {
		return this._renderRow(item);
	}
	
	componentDidMount() {
		setTimeout(() => {
			const data = Array.from({ length: 2000 }).map((_, index) => {
				return { value: index };
			})
			this.setState({
				dataSource: this.ds.cloneWithRows(data),
				// data: data,
			})
		}, 3000)
	}

	componentWillUnmount() {
		console.log('List.js: componentWillUnmount');
	}
	
	render() {
		console.log('Render List');
		return (
			<View style={{ backgroundColor: 'blue', padding: 500 }}>
				<FlatList
					data={this.state.data}
					renderItem={this._renderFlatListItem}
					keyExtractor={(item) => { return item.value }}
				/>
				<TouchableHighlight onPress={() => {
						this.props.closeModal();
					}}
					underlayColor={'orange'}
				>
					<Text style={{ fontSize: 30 }}>Close Modal</Text>
				</TouchableHighlight>
			</View>
		);
	}
}