/**
 * Created by zack on 2018/4/27.
 */
import {
	View,
	Text,
	StyleSheet,
	TouchableOpacity,
	Platform,
	Image
} from 'react-native'
import React, {Component} from 'react'
import {NavigationBarHeight, TabBarHeight, ScreenDimensions} from '../../../utils/DimensionsTools'

export default class VocabularyTextView extends Component {
	constructor(props) {
		super(props)
		this.state = {
			selectedIndex: -1,
			correctIndex: props.correctIndex,
			isVerified: props.isVerified
		}
	}

	componentWillReceiveProps(props) {
		this.setState({
			correctIndex: props.correctIndex,
			isVerified: props.isVerified
		})
	}

	renderItems() {
		let itemTitles = [{text: '单词', noun: 'dān  cí '},
			{text: '单词', noun: 'dān  cí '},
			{text: '单词', noun: 'dān  cí '},
			{text: '单词', noun: 'dān  cí '}]
		let items = []

		let deselectImageSource = require('../../../resources/images/TabBar/Learn/btn_normal.png')
		let selectImageSource = require('../../../resources/images/TabBar/Learn/btn_seleted.png')
		let selectCorrectedImageSource = require('../../../resources/images/TabBar/Learn/btn_correct.png')

		for (let i =0; i < itemTitles.length; i ++) {
			let imageSource = null

			if (!this.state.isVerified) { //还没有进行验证
				if (i === this.state.selectedIndex) {
					imageSource = selectCorrectedImageSource
				}else {
					imageSource = deselectImageSource
				}
			}else { //已经验证了
				if (this.state.selectedIndex === this.state.correctIndex) { // 答对了
					if (i === this.state.selectedIndex) {
						imageSource = selectCorrectedImageSource
					}else {
						imageSource = deselectImageSource
					}
				}else { //回答错误了
					if (i === this.state.selectedIndex) {
						imageSource = selectImageSource
					}else if (i === this.state.correctIndex) {
						imageSource = selectCorrectedImageSource
					}else {
						imageSource = deselectImageSource
					}
				}
			}

			let item = (
				<TouchableOpacity style={styles.ItemBgView} onPress={() => {
					this.props.didSelectedItem(i)
					this.setState({selectedIndex: i})
				}} key = {i} >
					<Image source={imageSource} style={styles.ImageView} />
					<Text style={styles.Text}>{itemTitles[i].text}</Text>
					<Text style={styles.Text}>{itemTitles[i].noun}</Text>
				</TouchableOpacity>
			)

			items.push(item)
		}

		return items
	}
	render() {
		return (
			<View style={styles.View}>
				{this.renderItems()}
			</View>
		);
	}
}

const styles = StyleSheet.create({
	View: {
		width: ScreenDimensions.width,
		height: 208,
		justifyContent: 'space-between',
		alignItems: 'center'
	},
	ItemBgView: {
		flexDirection: 'row',
		alignItems: 'center',
	},
	ImageView: {
		width: 22,
		height: 22,
	},
	Text: {
		fontSize: 16,
		marginLeft: 8,
		color: '#333333'
	}
})