import React, {Component} from 'react';
import {Platform, StyleSheet, Text, View, Button, TextInput, ScrollView, Alert, 
  ImageBackground, TouchableOpacity, Share, Animated } from 'react-native';
import { createAppContainer, createStackNavigator, StackActions, NavigationActions } from 'react-navigation';
import Icon from 'react-native-ionicons';
import ViewShot from "react-native-view-shot";
import { captureScreen } from "react-native-view-shot";

class FadeInView extends React.Component {
  state = {
    fadeAnim: new Animated.Value(0),  // Initial value for opacity: 0
  }

  componentDidMount() {
    Animated.timing(                  // Animate over time
      this.state.fadeAnim,            // The animated value to drive
      {
        toValue: 1,                   // Animate to opacity: 1 (opaque)
        duration: 1000,              // Make it take a while
      }
    ).start();                        // Starts the animation
  }

  render() {
    let { fadeAnim } = this.state;

    return (
      <Animated.View                 // Special animatable View
        style={{
          ...this.props.style,
          opacity: fadeAnim,         // Bind opacity to animated value
        }}
      >
        {this.props.children}
      </Animated.View>
    );
  }
}


//default class
export default class MainScreen extends React.Component {

  constructor() {
    super()
    this.state = {
     data: 'My Original Text',
     pic: require('./images/beach_water.png'),
     cnt: 0,
     iconHeart: 'heart-empty',
   }
 }

 componentWillMount(){
  fetch('http://compsci02.snc.edu/cs460/2019/khoral/mysql/get_quote.php', {
    method: 'POST',
    headers: {
      'Accept': 'application/json',
      'Content-Type': 'application/json',
    },
    body: JSON.stringify({

      name: this.state.data

    })

  }).then((response) => response.json())
  .then((responseJson) => {
    this.setState({data: responseJson})

  }).catch((error) => {
    console.error(error);
  });
}

_onPressButton()
{
    //this.setState({pic: require('./images/.png')});
    console.log(this.state.cnt);
    if (this.state.cnt == 0)
    {
      this.setState({pic: require('./images/cactus.png')});
      this.setState({cnt: this.state.cnt + 1});
    }
    else if(this.state.cnt == 1)
    {
      this.setState({pic: require('./images/sky.png')});
      this.setState({cnt: this.state.cnt + 1});
    }
    else if (this.state.cnt == 2)
    {
      this.setState({pic: require('./images/green.png')});
      this.setState({cnt: this.state.cnt + 1});
    }
    else if (this.state.cnt == 3)
    {
      this.setState({pic: require('./images/beach.png')});
      this.setState({cnt: this.state.cnt + 1});
    }
    else if (this.state.cnt == 4)
    {
      this.setState({pic: require('./images/lighthouse.png')});
      this.setState({cnt: this.state.cnt + 1});
    }
    else if (this.state.cnt == 5)
    {
      this.setState({pic: require('./images/mountains.png')});
      this.setState({cnt: this.state.cnt + 1});
    }
    else if (this.state.cnt == 6)
    {
      this.setState({pic: require('./images/beach_water.png')});
      this.setState({cnt: 0});
    }


    fetch('http://compsci02.snc.edu/cs460/2019/khoral/mysql/get_quote.php', {
      method: 'POST',
      headers: {
        'Accept': 'application/json',
        'Content-Type': 'application/json',
      },
      body: JSON.stringify({

        name: this.state.data

      })

    }).then((response) => response.json())
    .then((responseJson) => {
      this.setState({data: responseJson})

    }).catch((error) => {
      console.error(error);
    });
  }

  handlerLongClick()
  {
    Share.share(
    {
      message: this.state.data
    })
    .then(result => console.log(result))
    .catch(err => console.log(err));
  }


  addToFavorites(){
    this.setState({iconHeart: "heart"});
  }

  render() {
    return (
      <ImageBackground style={ styles.imgBackground } 
        resizeMode='cover' 
        source={this.state.pic}>
        <TouchableOpacity onPress={this._onPressButton.bind(this)} onLongPress={this.handlerLongClick.bind(this)}>
          <View style={styles.container}>
          <FadeInView>
            <Text style={styles.title}>{this.state.data}</Text>
          </FadeInView>
          </View>
        </TouchableOpacity>
      </ImageBackground>
    );
  }
}

const styles = StyleSheet.create({
  iconshare:{
    flex: 1,
    justifyContent: 'flex-end',
    marginBottom: 10
  },
  container: {
    paddingTop: 60,
    alignItems: 'center',
    justifyContent: 'center',
    height: 500
  },
  imgBackground: {
    width: '100%',
    height: '100%',
    flex: 1 
  },
  title: {
    fontSize: 35,
    fontWeight: 'bold',
    textAlign: 'center',
  },
  activeTitle: {
    color: 'red',
  },
});