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

import Accordion from 'react-native-collapsible/Accordion';


const { width } = Dimensions.get('screen');
const thumbMeasure = (width - 48 - 32) / 3;
const SECTIONS = [
  {
    title: 'First',
    content: 'Lorem ipsum...',
  },
  {
    title: 'Second',
    content: 'Lorem ipsum...',
  },
];

class AccordionView extends Component {
    state = {
      activeSections: [],
    };

    _renderSectionTitle = section => {
      return (
        <View style={styles.content}>
          <Text>{section.content}</Text>
        </View>
      );
    };

    _renderHeader = section => {
      return (
        <View style={styles.header}>
          <Text style={styles.headerText}>{section.title}</Text>
        </View>
      );
    };

    _renderContent = section => {
      return (
        <View style={styles.content}>
          <Text>{section.content}</Text>
        </View>
      );
    };

    _updateSections = activeSections => {
      this.setState({ activeSections });
    };
    render() {
      return (
        <Collapsible
          sections={SECTIONS}
          activeSections={this.state.activeSections}
          renderSectionTitle={this._renderSectionTitle}
          renderHeader={this._renderHeader}
          renderContent={this._renderContent}
          onChange={this._updateSections}
        />
      );
    }
  }

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,
        }}
        />
          <Collapsible collapsed={this.state.isCollapsed}>
              <View style={styles.screenContainer}>
              <Text style={styles.textContainer}> {products[3].tags[0]} </Text>
            </View>
         </Collapsible>
        <Text> Take Me There! </Text>
        <AccordionView>
        </AccordionView>
      </ScrollView>
    );}
  } 

export default Activity;
