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 { 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;

// https://moduscreate.com/blog/expanding-and-collapsing-elements-using-animations-in-react-native/
class Panel extends Component{
    constructor(props){
        super(props);

        this.icons = {     //Step 2
            'up'    : require('./FriendPics/up-icon.png'),
            'down'  : require('./FriendPics/down-icon.png')
        };

        this.state = {       //Step 3
            title       : props.title,
            expanded    : true,
            initialToggle : false,
            animation   : new Animated.Value()
        };
    }

    toggle(){
              //Step 1

      let initialValue    = this.state.expanded? this.state.maxHeight + this.state.minHeight : this.state.minHeight,
          finalValue      = this.state.expanded? this.state.minHeight : this.state.maxHeight + this.state.minHeight;

      this.setState({
          expanded : !this.state.expanded,  //Step 2
          initialToggle: true,
      });

      this.state.animation.setValue(initialValue);  //Step 3
      Animated.spring(     //Step 4
          this.state.animation,
          {
              toValue: finalValue
          }
      ).start();  //Step 5
    }

    _setMaxHeight(event){
        this.setState({
            maxHeight   : event.nativeEvent.layout.height
        });
    }

    _setMinHeight(event){
        this.setState({
            minHeight   : event.nativeEvent.layout.height
        });
    }

    render(){
        let icon = this.icons['down'];

        if(this.state.expanded){
            icon = this.icons['up'];   //Step 4
        }

        //Step 5
        return ( 
            <Animated.View 
            style={[styles.container,{height: this.state.initialToggle ? this.state.animation : 100}]}>
                <View style={styles.titleContainer} onLayout={this._setMinHeight.bind(this)}>
                    <Text style={styles.title}>{this.state.title}</Text>
                    <TouchableHighlight 
                        style={styles.button} 
                        onPress={this.toggle.bind(this)}
                        underlayColor="#f1f1f1">
                        <Image
                            style={styles.buttonImage}
                            source={icon}
                        ></Image>
                    </TouchableHighlight>
                </View>
                
                <View style={styles.body} onLayout={this._setMaxHeight.bind(this)}>
                    {this.props.children}
                </View>

            </Animated.View>
        );
    }
}

class Activity extends React.Component {

  constructor(props) {
    super(props);
    this.state = {
      //'displayText': products[3].title,
      'randomFriends': null,
      'randomReviews': [0, 0, 0],
      'isCollapsed': false,
    }
    this.loadData = this.loadData.bind(this);

  }

  loadData() {
    firstNum = Math.floor(Math.random()*10)
    
    secondNum = Math.floor(Math.random()*10)
    while (secondNum == firstNum) {
       secondNum = Math.floor(Math.random()*10)
    }
    thirdNum = Math.floor(Math.random()*10)
    while ((thirdNum == firstNum) || (thirdNum == secondNum)) {
       thirdNum = Math.floor(Math.random()*10)
    }
    completedArray = [firstNum, secondNum, thirdNum]
    console.log(completedArray)
    this.setState({
      'randomFriends': completedArray,
    });
  }

  //window.displayNum = 3

    componentDidMount() {
        this.loadData();
    }

   render() {
    if (!this.state.randomFriends) {
        return null;
    }
    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>
      <Image
            source={{uri: 'https://anschutzwellness.com/wp-content/uploads/2018/06/Sports-massage.jpg'}}
            style={styles.profileContainer}
            imageStyle={styles.profileImage}>
      </Image>     
      <View style={styles.globeContainer}>
        <Image source={require('./FriendPics/star-rating.jpeg',)} style={styles.globePosition}/>
      </View>
      <Text style={styles.locationText}>San Francisco,CA </Text>
      <Text style={styles.priceText}> {products[3].price} </Text>
      <View
        style={{
          borderBottomColor: 'black',
          borderBottomWidth: 1,
        }}
      />
       <Text style={styles.activityTitle}> {products[3].title} </Text>
       <Text> {products[3].description} </Text>
        <View
        style={{
          borderBottomColor: 'black',
          borderBottomWidth: 1,
        }}
        />
        <Text> Tags from friends </Text>
        <View style={styles.screenContainer}>
          <Text style={styles.textContainer}> {products[3].tags[0]} </Text>
        </View>
        <View
        style={{
          borderBottomColor: 'black',
          borderBottomWidth: 1,
        }}
        />
        <Text> Friends who've visited </Text>
        <Text> {friends[this.state.randomFriends[0]].name}, {friends[this.state.randomFriends[1]].name}, {friends[this.state.randomFriends[2]].name}</Text>
        <Text> and more.... </Text>
        <View
        style={{
          borderBottomColor: 'black',
          borderBottomWidth: 1,
        }}
        />
        <View style={styles.container}>
        <Image
             style={styles.circleImage}
             source={friendImages[this.state.randomFriends[0]]}
           />
        </View>
        <View style={styles.container}>
        <Image
             style={styles.circleImage}
             source={friendImages[this.state.randomFriends[1]]}
           />
        </View>
        <View style={styles.container}>
        <Image
             style={styles.circleImage}
             source={friendImages[this.state.randomFriends[2]]}
           />
        </View>
        <Text> Reviews from Friends </Text>
        <Text> {reviews[3].review} </Text>
        <Text> {reviews[3].date} </Text>
        <View
        style={{
          borderBottomColor: 'black',
          borderBottomWidth: 1,
        }}
        />
        <Panel title="A Panel with long content text">
          <Text>Lorem ipsum dolor sin ameut consectetur adipiscing  
          Lorem ipsum dolor sin ameut consectetur adipiscingLorem ipsum dolor sin ameut consectetur 
          adipiscing Lorem ipsum dolor sin ameut consectetur adipiscing 
          Lorem ipsum dolor sin ameut consectetur a
          dipiscing Lorem ipsum dolor sin ameut consectetur adipiscing</Text>
        </Panel>
        <Text> Take Me There! </Text>
        <Collapsible collapsed={this.isCollapsed}>
          <View style={styles.screenContainer}>
             <Text style={styles.textContainer}> {products[3].tags[0]} </Text>
          </View>
        </Collapsible>
      </ScrollView>
    );}
  } 
  /*
  render() {
    return (
      <Block flex style={styles.profile}>
        <Block flex>
          <ImageBackground
            source={{uri: 'https://anschutzwellness.com/wp-content/uploads/2018/06/Sports-massage.jpg'}}
            style={styles.profileContainer}
            imageStyle={styles.profileImage}>
            <Block flex style={styles.profileDetails}>
              <Block style={styles.profileTexts}>
                <Text color="white" size={28} style={{ paddingBottom: 8 }}>  {this.state.displayText} </Text>
                <Block row space="between">
                  <Block row>
                    <Block middle style={styles.pro}>
                      <Text size={16} color="white">Pro</Text>
                    </Block>
                    <Text color="white" size={16} muted style={styles.seller}>San Francisco,CA </Text>
        
                  </Block>
                  <Block>
                  </Block>
                </Block>
              </Block>
              <LinearGradient colors={['rgba(0,0,0,0)', 'rgba(0,0,0,1)']} style={styles.gradient} />
            </Block>
          </ImageBackground>
        </Block>
        <Block flex style={styles.options}>
          <ScrollView showsVerticalScrollIndicator={false}>
            <Block row space="between" style={{ padding: theme.SIZES.BASE, }}>
              <Block middle>
                <Text bold size={12} style={{marginBottom: 8}}>36</Text>
                <Text muted size={12}>Orders</Text>
              </Block>
              <Block middle>
                <Text bold size={12} style={{marginBottom: 8}}>5</Text>
                <Text muted size={12}>Bids & Offers</Text>
              </Block>
              <Block middle>
                <Text bold size={12} style={{marginBottom: 8}}>2</Text>
                <Text muted size={12}>Messages</Text>
              </Block>
            </Block>
            <Block row space="between" style={{ paddingVertical: 16, alignItems: 'baseline' }}>
              <Text size={16}>Recently viewed</Text>
              <Text size={12} color={theme.COLORS.PRIMARY} onPress={() => this.props.navigation.navigate('Home')}>View All</Text>
            </Block>
          </ScrollView>
        </Block>
      </Block>
    );
  }
}*/

export default Activity;
