import React, {Component} from "react";
import {Image, AsyncStorage, View,ScrollView, Slider, ActionSheetIOS, SafeAreaView, Dimensions, Picker, Text, Platform, TouchableOpacity, Button} from "react-native";
import styles from "./style";
import { connect } from 'react-redux';
import { Card } from 'react-native-elements';
import options from './optionsdata.js';
import { createAppContainer } from 'react-navigation';
import { createStackNavigator } from 'react-navigation-stack';
import ChatBot from '../react-native-chatbot/lib';
import products  from '../Activity/products';

const traits = ['comfortable', 'social', 'inexpensive', 'artistic', 'foody'];

class Survey extends Component {
	static navigationOptions = {headerShown: false, gesturesEnabled: false};
	constructor(props) {
		super(props);
		this.state = {
			currTraitIdx: 0,
			prefArray : this.props.navigation.getParam('prefArrayParam'),
			indexParam: this.props.navigation.getParam('indexParam'),
			avoidList: this.props.navigation.getParam('avoidList'),
			visitedList: this.props.navigation.getParam("visitedList"),
			calendarSync:this.props.navigation.getParam("calendarSync"),
		}
	}

componentDidMount() {
}

loadData() {
}

returnPrevValue(previousValue, steps){
	return 'Awesome, I know that you are now ' + previousValue;
}


initTwoQsTrigger(value, steps){
	if (value == 'I\'m unsatisfied...'){
		return 'unsatTop';
	} else {
		return 'wdykTop';
	}
}

initTwoQsRestartTrigger(value, steps){
	if (value == 'I\'m unsatisfied...'){
		return 'wdykTop';
	} else {
		return 'unsatTop';
	}
}

genWDYKMsg(previousValue, steps){
	if (this.state.currTraitIdx < (traits.length)){
		strModifier = '';
		if (this.state.prefArray[this.state.currTraitIdx] < 1){
			strModifier = 'don\'t really';
		} else if (this.state.prefArray[this.state.currTraitIdx] >= 1 && this.state.prefArray[this.state.currTraitIdx] <= 3){
			strModifier = 'somewhat';
		} else if (this.state.prefArray[this.state.currTraitIdx] > 3) {
			strModifier = 'really';
		}
		this.setState({currTraitIdx: this.state.currTraitIdx + 1});
		return 'I think that you ' + strModifier + ' like ' + traits[this.state.currTraitIdx - 1] + ' places. How does that sound to you? Do you like ' + traits[this.state.currTraitIdx - 1] +' places more or less than what I think?'; // hacky
	} else {
		return 'Thanks for updating your preferences!';
	}
}

genRespTrigger(value, steps){
	if (this.state.currTraitIdx < (traits.length)){
		return 'wdykIter'
	} else {
		this.setState({currTraitIdx: 0});
		return 'initRestart';
	}
}

WDYKTrigger(value, steps) {
	moreStr = 'More';
	lessStr = 'Less';

	if (value == 'Sounds good'){
		return 'wdykRegResp';

	} else if (value == 'More'){
		this.state.prefArray[this.state.currTraitIdx - 1] = Math.min(this.state.prefArray[this.state.currTraitIdx - 1] + 10, 100);
		return 'wdykModResp';
	} else if (value == 'Less'){
		this.state.prefArray[this.state.currTraitIdx - 1] = Math.max(this.state.prefArray[this.state.currTraitIdx - 1] - 10, 0);
		return 'wdykModResp';
	}
}

valUpdateTrigger(value, steps){
	if (this.state.currTraitIdx > traits.length){
		return 'initRestart';
	} else {
		return 'wdykIterUserChg';
	}
}

unsatTrigger(value, steps){
	if (value == 'I want options like...'){
		return 'unsatMoreOf';
	} else if (value == 'I\'m feeling...'){
		return 'unsatFeeling';

	} else if (value == 'I dislike an option...'){
		return 'unsatLessOf';
	}
}

unsatMoreUser(previousValue, steps){
	return 'unsatMoreUserResp';

}

unsatLessUser(previousValue, steps){
	idx = null;
	for(i = 0; i < products.length; i++){ 
		console.log(products[i].title);
		if(products[i].title == previousValue){
			idx = i;
		}
    }
    console.log('idx');
    console.log(idx);
    if (idx){
    	this.state.avoidList.push(idx);
    }
	return 'unsatLessUserResp';

}

unsatFeelingUser(previousValue, steps){
	if (previousValue == 'Hungry'){
		this.state.prefArray[4] = Math.min(this.state.prefArray[4] + 10, 100);
	} else if (previousValue == 'Bored'){
		this.state.prefArray[1] = Math.min(this.state.prefArray[1] + 10, 100);

	} else if (previousValue == 'Tired'){
		this.state.prefArray[0] = Math.min(this.state.prefArray[0] + 10, 100);
	}
	return 'unsatFeelingUserResp';
}

restartTrigger(value, steps){
	if (value == 'I\'m unsatisfied...'){
		return 'unsatTop';
	} else if (value == 'See changes'){
		return 'finish';
	} else if (value == 'What do you know about me?'){
		return 'wdykTop';
	}
}

render() {
	// prefArray = this.props.navigation.getParam('prefArrayParam');
	// indexParam = this.props.navigation.getParam('indexParam');
	const screenWidth = Dimensions.get('window').width;
	console.disableYellowBox = true;
	const steps = [
		{
		  id: 'start',
		  message: 'Hi! \nTell me anything, and I\'ll improve my recs for you!',
		  trigger: 'initTwoQs',
		},
		{
		  id: 'finish',
		  message: 'Thanks for chatting with me!',
		  end: true
		},
		{
		  id: 'initRestart',
		  user: true,
		  trigger: ({value, steps}) => this.restartTrigger(value, steps)
		},
		{
		  id: 'initTwoQs',
		  user: true,
		  trigger: ({value, steps}) => this.initTwoQsTrigger(value, steps),
		},
		{
		  id: 'initTwoQsRestart',
		  user: true,
		  trigger: ({value, steps}) => this.initTwoQsRestartTrigger(value, steps),
		},
		{
		  id: 'unsatTop',
		  user: false,
		  message: 'I\'m sorry to hear that! Please click one of the options below to update your preferences or change your recommendations:',
		  trigger: 'unsatUserInput'
		},
		{
		  id: 'unsatUserInput',
		  user: true,
		  trigger: ({value, steps}) => this.unsatTrigger(value, steps),
		},
		{
		  id: 'unsatMoreOf',
		  user: false,
		  message: 'Please select which option you\'d like to see more of: ',
		  trigger: 'unsatMoreUser'
		},
		{
		  id: 'unsatLessOf',
		  user: false,
		  message: 'No problem! Please select which option you\'d like to see less of: ',
		  trigger: 'unsatLessUser'
		},
		{
		  id: 'unsatFeeling',
		  user: false,
		  message: 'Please select how you\'re feeling from the options below: ',
		  trigger: 'unsatFeelingUser'
		},
		{
		  id: 'unsatFeelingUser',
		  user: true,
		  trigger: ({value, steps}) => this.unsatFeelingUser(value, steps)
		},
		{
		  id: 'unsatMoreUser',
		  user: true,
		  trigger: ({value, steps}) => this.unsatMoreUser(value, steps)
		},
		{
		  id: 'unsatLessUser',
		  user: true,
		  trigger: ({value, steps}) => this.unsatLessUser(value, steps)
		},
		{
		  id: 'unsatFeelingUserResp',
		  user: false,
		  message: 'Thanks for telling me! Go back and check out my new recommendations.',
		  trigger: 'initRestart'
		},
		{
		  id: 'unsatMoreUserResp',
		  user: false,
		  message: 'Thanks for telling me! Go back and check out my new recommendations.',
		  trigger: 'initRestart'
		},
		{
		  id: 'unsatLessUserResp',
		  user: false,
		  message: 'Thanks for telling me! Go back and check out my new recommendations.',
		  trigger: 'initRestart'
		},

		{
		  id: 'wdykTop',
		  user: false,
		  message: 'Here\'s what I\'ve learned about you so far:',
		  trigger: 'wdykIter'
		},
		{
		  id: 'wdykIter',
		  user: false,
		  message: ({previousValue, steps}) => this.genWDYKMsg(previousValue, steps),
		  trigger: ({value, steps}) => this.valUpdateTrigger(value, steps)
		},
		{
		  id: 'wdykIterUserChg',
		  user: true,
		  trigger: ({value, steps}) => this.WDYKTrigger(value, steps),
		},
		{
		  id: 'wdykRegResp',
		  user: false,
		  message: 'Great!',
		  trigger: ({value, steps}) => this.genRespTrigger(value, steps),
		},
		{
		  id: 'wdykModResp',
		  user: false,
		  message: 'Noted! Just updated my records.',
		  trigger: ({value, steps}) => this.genRespTrigger(value, steps),
		},
	];
	//https://github.com/ReactNativeSchool/react-native-quiz/blob/master/App/data/computers.js
	//https://stackoverflow.com/questions/51629192/react-native-horizontal-scroll-on-button-click
	return (
		<View style={styles.topLevelContainer}>
			<View style={styles.header}>
			<TouchableOpacity style={styles.prevButton} onPress={() => {this.props.navigation.navigate('Home', {preferences: this.state.prefArray, visitedList: this.state.visitedList, calendarSync: this.state.calendarSync, avoidList: this.state.avoidList})}}>
			   <Image source={require('../chevron_reverse.png')} style={styles.prevObject}/>
			 </TouchableOpacity>
			</View>
			<ScrollView horizontal={false} scrollEnabled={true} pagingEnabled={true} showsVerticalScrollIndicator={true} ref={(node) => this.scroll = node}>
				<View>
					<ChatBot navigation={this.props.navigation} prefArray={this.state.prefArray} calendarSync={this.state.calendarSync} visitedList={this.state.visitedList} avoidList={this.state.avoidList} indexParam={this.state.indexParam} steps={steps} />
				</View>
			</ScrollView>
		</View>
		);
	}
}

export default Survey;
