import React, {Component} from 'react';
import {Platform, StyleSheet, Text, View, Button, TextInput, ScrollView, Picker, Alert, FlatList, TouchableOpacity, 
  ActivityIndicator, Image, RefreshControl, SwipeView } from 'react-native';
import { createAppContainer, createStackNavigator, StackActions, NavigationActions } from 'react-navigation';
import Icon from 'react-native-ionicons';
import PushNotification from 'react-native-push-notification';
import PushController from './PushController.js';


export default class ProfileScreen extends React.Component {

  constructor(props) {
    super(props)
    this.state = {
      data: 'My Original Text',
      loading: false,
      dataSource: [],
      isFetching: false,
      text: '',
    };
  }

  componentWillMount(){  fetch('http://compsci02.snc.edu/cs460/2019/khoral/mysql/get_encouragement_user.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);
  });}

  addQuote(){
    if (this.state.text == '')
    {
      Alert.alert(
        'Please type in a quote.',
        [
          {
            text: 'OK', 
            onPress: () => this.refs.QuoteInput.focus()
          },
        ],
        {cancelable: false},
      );
    }
    else{
      const { navigation } = this.props;
      const user = navigation.getParam('user', 'test');
      fetch('http://compsci02.snc.edu/cs460/2019/khoral/mysql/insert_custom_quote.php', {
      method: 'POST',
      headers: {
        'Accept': 'application/json',
        'Content-Type': 'application/json',
      },
      body: JSON.stringify({

        username: user,
        quote: this.state.text

    })

  }).then((response) => response.json())
  .then((responseJson) => {
    this.fetchData();

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

  ListEmpty = () => {
    return (
      //View to show when list is empty
      <View style={styles.MainContainer}>
      <Text style={{ textAlign: 'center', fontSize:25, paddingTop:50 }}>No quotes.</Text>
      </View>
      );
  };

  onRefresh() {
    this.setState({ isFetching: true }, function() { this.fetchData() });
  }

componentDidMount() {this.fetchData();} //GETS THE QUOTES FROM THE DATABASE
fetchData = () => {this.setState({loading: true});

const { navigation } = this.props;
const user = navigation.getParam('user', 'test');

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

    username: user

    }) //This is a test to see if branch worked
  
})
.then(response => response.json())
.then(responseJson => {
  console.log(responseJson);
  responseJson = responseJson.map(item => {

    item.isSelect = false;
    item.selectedClass = styles.list;


    return item;
  });
  this.setState({
    loading: false,
    dataSource: responseJson,
    isFetching: false,
  });
}).catch(error => {this.setState({loading: false});
});
};
//renderItem={item => this.renderItem(item)}

FlatListItemSeparator = () => <View style={styles.line} />;

selectItem = data => { 
  console.log("I'm here!");
  console.log(data.item);
  console.log(data.item.quotes);
  PushNotification.cancelLocalNotifications({ id : data.item.quotes});

  const { navigation } = this.props;
  const user = navigation.getParam('user', 'test');

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

      key: data.item.quotes,
      username: user,

    })

  }).then((response) => response.json())
  .then((responseJson) => {
    this.fetchData();

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

//goToStore = () =>this.props.navigation.navigate("Expenses", {selected: this.state.selected,});
renderItem = data => //HANDLES THE DATA BEFORE IT GOES INTO THE FLATELIST
<View style={{flexDirection:"row"}}>
  <View style={styles.leftContainer}>
    <Text style={styles.lightText}> {data.item.quotes}  </Text>
  </View>
  <View style={styles.rightContainer}>
    <Icon
      onPress={() => this.selectItem(data)}
      name="trash" 
      color="cornflowerblue"
    /> 
  </View>
</View>

render() {
  const itemNumber = this.state.dataSource.filter(item => item.isSelect).length;
  if (this.state.loading) {return (
    <View style={styles.loader}>
      <ActivityIndicator size="large" color="purple" />
    </View>
    );
  }

  return (
    <View style={styles.container}>
      <View style={{alignItems:"center"}}>
        <Text style={styles.title}>{this.state.data}</Text>
      </View>
      <View style={{alignItems:"center"}}>
        <TextInput
          style={{height: 40, borderBottomColor: 'white', borderBottomWidth:1, width:350, textAlign:'center', color:'white', paddingTop:15}}
          onChangeText={(text) => this.setState({text})}
          multiline
          value={this.state.text}
          ref='QuoteInput'
        />
        <Button
          style={{color:"white", paddingTop:15}}
          onPress={this.addQuote.bind(this)}
          title="Add Quote"
        /> 
      </View>
      <FlatList
        style={styles.flatlistStyle}
        data={this.state.dataSource}
        ItemSeparatorComponent={this.FlatListItemSeparator}
        renderItem={item => this.renderItem(item)}
        keyExtractor={item => item.quotes}
        extraData={this.state}
        ListEmptyComponent={this.ListEmpty}
        onRefresh={() => this.onRefresh()}
        refreshing={this.state.isFetching}
      />
      <PushController />
    </View>
  );}
}

const styles = StyleSheet.create({
  flatlistStyle: {
    fontSize:12,
  },
  leftContainer: {
    flex: 1,
    flexDirection: 'row',
    justifyContent: 'flex-start',
    paddingTop:5,
    paddingBottom:5,
  },
  rightContainer: {
    flex: 1,
    flexDirection: 'row',
    justifyContent: 'flex-end',
    alignItems: 'center',
    paddingRight:25,
  },
  timestyles: {
    color: "white",
    fontSize: 35,
    paddingBottom: 25,
  },
   container1: {
  flex: .2,
  paddingVertical: 15,
  position: "relative",
  height:50,
  flexDirection:"row",
 },
  viewStyle: {
    alignItems: 'center',
  },
  container: {
    flex: 1,
    backgroundColor: "#192338",
    paddingVertical: 50,
    position: "relative"
  },
  title: {
    fontSize: 35,
    textAlign: 'center',
    color: 'white',
    paddingBottom: 15,
  },
  loader: {
    flex: 1, 
    justifyContent: "center",
    alignItems: "center",
    backgroundColor: "#fff"
  },
  list: {
    paddingVertical: 5,
    margin: 3,
    flexDirection: "row",
    backgroundColor: "#192338",
    justifyContent: "flex-start",
    alignItems: "center",
    zIndex: -1
  },
  MainContainer: {
    justifyContent: 'center',
    flex: 1,
    margin: 10,
  },
  lightText: {
    color: "#f7f7f7",
    width: 500,
    paddingLeft: 15,
    fontSize: 16,
    justifyContent: "center",
    paddingTop:15,
    paddingBottom:5,
  },
  line: {
    height: 0.5,
    width: "100%",
    backgroundColor:"rgba(255,255,255,0.5)"
  },
  icon: {
    position: "absolute",  
    bottom: 20,
    width: "100%", 
    left: 290, 
    zIndex: 1
  },
   container1: {
  flex: .2,
  paddingVertical: 15,
  position: "relative",
  height:50,
  flexDirection:"row",
 },
  numberBox: {
    position: "absolute",
    bottom: 75,
    width: 30,
    height: 30,
    borderRadius: 15,  
    left: 330,
    zIndex: 3,
    backgroundColor: "#e3e3e3",
    justifyContent: "center",
    alignItems: "center"
  },
  number: {fontSize: 14,color: "#000"},
  selected: {backgroundColor: "#FA7B5F"},
});