import React, {Component} from "react";
import { ScrollView, StyleSheet, ImageBackground, TouchableWithoutFeedback, Dimensions, Image, View, ActionSheetIOS, Picker, Platform, TouchableOpacity, TouchableHighlight, Animated} from "react-native";
// Add Text and Image
import { connect } from 'react-redux';
import { increment, increment_other } from '../../actions';
import { AsyncStorage } from "react-native";
import styles from "./style";
import friends  from './friends';
import reviews  from './reviews';
import products  from './products';
import Stars from 'react-native-stars';


import { LinearGradient } from 'expo-linear-gradient';

import { Button, Block, Text, Input, theme } from 'galio-framework';
//import Collapsible from 'react-native-collapsible';

const { width } = Dimensions.get('screen');
const thumbMeasure = (width - 48 - 32) / 3;


class Activity extends React.Component {
  static navigationOptions = {headerShown: false, gesturesEnabled: false};
  constructor(props) {
    super(props);
    this.state = {
      //'displayText': products[3].title,
      'numExtraFriends': null,
      preferences: this.props.navigation.getParam("prefArrayParam"),
      activityIndex: this.props.navigation.getParam("indexParam"),
      visitedList: this.props.navigation.getParam("visitedList"),
      avoidList: this.props.navigation.getParam("avoidList"),
      calendarSync: this.props.navigation.getParam("calendarSync"),
      matchScore: this.props.navigation.getParam("matchParam"), 
      friendExpand: false, 
      reviewExpand: true,
      defaultStar: 0,
    }
    console.log(this.state.calendarSync)
    this.loadData = this.loadData.bind(this);
    this.renderFriendList = this.renderFriendList.bind(this);
    this.renderAllFriends = this.renderAllFriends.bind(this);
  }

  goThere(){
    this.props.navigation.navigate("GoogleMaps", {preferences: this.state.preferences, calendarSync: this.state.calendarSync, activityIndex: this.state.activityIndex, visitedList: this.state.visitedList, avoidList: this.state.avoidList})
  }

    loadData() {
      var numExtraFriends = this.computeExtraFriends()
      this.setState({
        'numExtraFriends': numExtraFriends
      });
      
    }


      computeExtraFriends(){
        console.log("computing extra friends")
        numToReturn = products[this.state.activityIndex].numFriends - 3
        console.log(numToReturn)
        return numToReturn
      }

  //window.displayNum = 3

    componentDidMount() {
        this.loadData();
    }

    renderSpecificFriend(friendImages, index, friendIndex){
        if (index == products[this.state.activityIndex].numFriends - 1){
          console.log('ldoaesdsdasdasddasfsgasa');
          return (<View key={index} style={{marginBottom: 20, left: 22, flex: 1, flexDirection: 'row', alignItems: 'center'}}>
          <Image style={styles.circleImage} source={friendImages[friendIndex]}/>
          <Text style={{marginLeft: 16, fontSize: 16}}>
            {friends[friendIndex].name}
          </Text>
        </View>);
        } else {
          return (<View key={index} style={{marginBottom: 8, left: 22, flex: 1, flexDirection: 'row', alignItems: 'center'}}>
          <Image style={styles.circleImage} source={friendImages[friendIndex]}/>
          <Text style={{marginLeft: 16, fontSize: 16}}>
            {friends[friendIndex].name}
          </Text>
        </View>);
        }
    }

    renderAllFriends(friendImages){
      friendIndices = products[this.state.activityIndex].friendIndices
      allFriends = []
      for (let i = 0; i < friendIndices.length; i++){
        allFriends[i] = this.renderSpecificFriend(friendImages, i, friendIndices[i])
      }
      return allFriends
    }

    renderFriendList(friendImages){
      if (this.state.friendExpand === true){
        return(
          <TouchableOpacity onPress={() => this.setState({friendExpand: false})}>
            <View style={{flex: 1}}>
                <Text style={styles.miniHeader}>Friends who've visited</Text>
                <Image style={styles.reverseChevron} source={require('../chevron.png')}/>
            </View>
            {this.renderAllFriends(friendImages)}
          </TouchableOpacity>
        );
      } else {
        return (
          <TouchableOpacity style={{flex: 1}} onPress={() => this.setState({friendExpand: true})}>
              <Text style={styles.miniHeader}>Friends who've visited</Text>
              <Image style={styles.chevron} source={require('../chevron.png')}/>
            <View
              style={{
                flexDirection: 'row',
                marginLeft: 25,
                marginBottom: 20
              }}
            >
              <View style={styles.friendContainer}>
                <Image
                     style={styles.circleImage}
                     source={friendImages[products[this.state.activityIndex].friendIndices[0]]}
                   />
              </View>
              <View style={styles.friendContainer}>
                <Image
                     style={styles.circleImage}
                     source={friendImages[products[this.state.activityIndex].friendIndices[1]]}
                   />
              </View>
              <View style={styles.friendContainer}>
                <Image
                     style={styles.circleImage}
                     source={friendImages[products[this.state.activityIndex].friendIndices[2]]}
                   />
              </View>
              <View style={styles.moreFriendsContainer}>
                  <Text style={styles.moreFriendsTextContainer}>+{this.state.numExtraFriends}</Text>
              </View>
              <View style={styles.friendTextContainer}>
                <Text style={styles.friendText}>{friends[products[this.state.activityIndex].friendIndices[0]].name}, {friends[products[this.state.activityIndex].friendIndices[1]].name}, {friends[products[this.state.activityIndex].friendIndices[2]].name} and more...</Text>
              </View>
            </View>
          </TouchableOpacity>
        );
      }
    }

    renderReviews(friendImages){
      if (this.state.reviewExpand === true){
        return(
        <View>
          <TouchableOpacity onPress={() => this.setState({reviewExpand: false})}>
          <View style={{flex: 1}}>
              <Text style={styles.miniHeader}>Reviews from Friends</Text>
              <Image style={styles.chevron} source={require('../chevron.png')}/>
          </View>
        </TouchableOpacity>
          <View
          style={{
            flexDirection: 'row',
            marginLeft: 25,
            alignItems:'center',
          }}
        >
        <View style={styles.friendContainer}>
        <Image
             style={styles.circleImage}
             source={friendImages[products[this.state.activityIndex].friendIndices[0]]}
           />
        </View>
        <Text style={{marginLeft: 10}}> {friends[products[this.state.activityIndex].friendIndices[0]].name} </Text>
        <Text style={{marginLeft: 'auto', marginRight: 25}}> {reviews[products[this.state.activityIndex].reviewIndices[0]].date} </Text>
        </View>
        <View style={{alignItems:'flex-start', marginLeft:25, marginTop:10}}>
          <Stars
              default={this.state.defaultStar}
              spacing={10}
              count={5}
              fullStar={<Image source={require('../star.png')} style={styles.fullStar}/>}
              emptyStar={<Image source={require('../star.png')} style={styles.emptyStar}/>}
          />
        </View>
        <Text style={{marginLeft: 25, marginTop: 10, marginBottom: 10}}> {reviews[products[this.state.activityIndex].reviewIndices[0]].review} </Text>
        </View>
        );
      } else {
        return (
        <View>
          <TouchableOpacity onPress={() => this.setState({reviewExpand: true})}>
            <View style={{flex: 1}}>
                <Text style={styles.miniHeader}>Reviews from Friends</Text>
                <Image style={styles.reverseChevron} source={require('../chevron.png')}/>
            </View>
          </TouchableOpacity>
          <View
          style={{
            flexDirection: 'row',
            marginLeft: 25,
            alignItems:'center',
          }}
        >
        <View style={styles.friendContainer}>
        <Image
             style={styles.circleImage}
             source={friendImages[products[this.state.activityIndex].friendIndices[0]]}
           />
        </View>
        <Text style={{marginLeft: 10}}> {friends[products[this.state.activityIndex].friendIndices[0]].name} </Text>
        <Text style={{marginLeft: 'auto', marginRight: 25}}> {reviews[products[this.state.activityIndex].reviewIndices[0]].date} </Text>
        </View>
        <View style={{alignItems:'flex-start', marginLeft:25, marginTop:10}}>
          <Stars
              default={this.state.defaultStar}
              spacing={10}
              count={5}
              fullStar={<Image source={require('../star.png')} style={styles.fullStar}/>}
              emptyStar={<Image source={require('../star.png')} style={styles.emptyStar}/>}
          />
        </View>
        <Text style={{marginLeft: 25, marginRight: 25, marginTop: 10, marginBottom: 10}}> {reviews[products[this.state.activityIndex].reviewIndices[0]].review} </Text>
        
         <View
          style={{
            flexDirection: 'row',
            marginLeft: 25,
            alignItems:'center',
          }}
        >
        <View style={styles.friendContainer}>
        <Image
             style={styles.circleImage}
             source={friendImages[products[this.state.activityIndex].friendIndices[1]]}
           />
        </View>
        <Text style={{marginLeft: 10}}> {friends[products[this.state.activityIndex].friendIndices[1]].name} </Text>
        <Text style={{marginLeft: 'auto', marginRight: 25}}> {reviews[products[this.state.activityIndex].reviewIndices[1]].date} </Text>
        </View>

        <View style={{alignItems:'flex-start', marginLeft:25, marginTop:10}}>
          <Stars
              default={this.state.defaultStar}
              spacing={10}
              count={5}
              fullStar={<Image source={require('../star.png')} style={styles.fullStar}/>}
              emptyStar={<Image source={require('../star.png')} style={styles.emptyStar}/>}
          />
        </View>
        <Text style={{marginLeft: 25,marginRight: 25, marginTop: 10, marginBottom: 10}}> {reviews[products[this.state.activityIndex].reviewIndices[1]].review} </Text>

        <View
          style={{
            flexDirection: 'row',
            marginLeft: 25,
            alignItems:'center',
          }}
        >
        <View style={styles.friendContainer}>
        <Image
             style={styles.circleImage}
             source={friendImages[products[this.state.activityIndex].friendIndices[2]]}
           />
        </View>
        <Text style={{marginLeft: 10}}> {friends[products[this.state.activityIndex].friendIndices[2]].name} </Text>
        <Text style={{marginLeft: 'auto', marginRight: 25}}> {reviews[products[this.state.activityIndex].reviewIndices[2]].date} </Text>
        </View>
        
        <View style={{alignItems:'flex-start', marginLeft:25, marginTop:10}}>
          <Stars
              default={this.state.defaultStar}
              spacing={10}
              count={5}
              fullStar={<Image source={require('../star.png')} style={styles.fullStar}/>}
              emptyStar={<Image source={require('../star.png')} style={styles.emptyStar}/>}
          />
        </View>
        <Text style={{marginLeft: 25, marginRight: 25, marginTop: 10, marginBottom: 10}}> {reviews[products[this.state.activityIndex].reviewIndices[2]].review} </Text>
        </View>
        );
      }
    }


   render() {
    if (!this.state.numExtraFriends) {
        return null;
    }
    console.log("Review Expands: ")
    console.log(this.state.reviewExpand)
    var friendImages =   [
            require('./FriendPics/lexi-pic.jpeg'),
            require('./FriendPics/greg-pic.jpeg'),
            require('./FriendPics/jessica-pic.jpeg'),
            require('./FriendPics/soraya-pic.jpeg'),
            require('./FriendPics/jennifer-pic.jpeg'),
            require('./FriendPics/reid-pic.jpeg'),
            require('./FriendPics/grant-pic.jpeg'),
            require('./FriendPics/liz-pic.jpeg'),
            require('./FriendPics/kristen-pic.jpeg'),
            require('./FriendPics/samuel-pic.jpeg'),
          ];

    return(
      <ScrollView>

      <View>
        <Image
          source={{uri: products[this.state.activityIndex].image }}
          style={styles.mainImageContainer}
          imageStyle={styles.mainImage}>
        </Image>
        <TouchableOpacity style={styles.prevButton} onPress={() => { this.props.navigation.navigate("Home", {prefArrayParam: this.state.preferences})}}>
          <Image source={require('./FriendPics/left.png')} style={styles.prevObject}/>
        </TouchableOpacity>
      </View>


      <View
        style={{
          flexDirection: 'row',
        }}
      >
      <View style={styles.starRatingContainer}>
        <Image source={require('./FriendPics/star-rating.jpeg',)} style={styles.starRatingPosition}/>
      </View>

      <View
        style={{
          flexDirection: 'column',
        }}
      >
      <Text style={styles.locationText}>Marina District,</Text>
      <Text style={styles.locationText}>San Francisco</Text>
      <Text style={styles.priceText}>{products[this.state.activityIndex].price}</Text>
      </View>
      </View>


      <View
        style={{
          borderBottomColor: '#B7BABC',
          borderBottomWidth: 1,
        }}
      />


      <View
          style={{
            flexDirection: 'row',
          }}
        >
        <View style={styles.titleTextContainer}>
          <Text style={styles.activityTitle}>{products[this.state.activityIndex].title}</Text>
        </View>
       <View style={styles.matchContainer}>
            <Text style={styles.matchTextContainer}>{this.state.matchScore}% match</Text>
        </View>

        </View>
       <Text style={styles.activityDescription}>{products[this.state.activityIndex].description}</Text>

        <View
        style={{
          borderBottomColor: '#B7BABC',
          borderBottomWidth: 1,
        }}
        />


        <Text style={styles.miniHeader}>Tags from friends</Text>
        <View
          style={{
            flexDirection: 'row',
            justifyContent: 'center'
          }}
        >
        <View style={styles.tagContainer}>
            <Text style={styles.tagTextContainer}> {products[this.state.activityIndex].tags[0]} </Text>
        </View>
        <View style={styles.tagContainer}>
            <Text style={styles.tagTextContainer}> {products[this.state.activityIndex].tags[1]} </Text>
        </View>
        <View style={styles.tagContainer}>
            <Text style={styles.tagTextContainer}> {products[this.state.activityIndex].tags[2]} </Text>
        </View>
        </View>
        <View
        style={{
          borderBottomColor: '#B7BABC',
          borderBottomWidth: 1,
        }}
        />


        {this.renderFriendList(friendImages)}
        

        <View
        style={{
          borderBottomColor: '#B7BABC',
          borderBottomWidth: 1,
        }}
        />
        {this.renderReviews(friendImages)}

        <View
        style={{
          borderBottomColor: '#B7BABC',
          borderBottomWidth: 1,
        }}
        />
        <TouchableOpacity style={styles.takeMeContainer} onPress={() => this.goThere()}>
          <Text style={styles.takeMeTextContainer}> Take Me There! </Text>
        </TouchableOpacity>
        <View style={{height: 50}}>
        </View>
      </ScrollView>
    );}
  } 

export default Activity;
