import React, {Component} from 'react';
import {Platform, StyleSheet, Text, View, Button, TextInput, ScrollView, Picker, Alert, FlatList, TouchableOpacity, 
  ActivityIndicator, Image, RefreshControl, SwipeView, Switch } 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 TimeScreen extends React.Component {

  constructor(props) {
    super(props)
    this.state = {
      loading: false,
      dataSource: [],
      isFetching: false,
      switchValue: false,
    };
  }

  _CancelTime()
  {
    console.log(data.item.isSelect);
  }

  swipedLeft()
  {
    alert("SWIPED!");
  }

  ListEmpty = () => {
    return (
      //View to show when list is empty
      <View style={styles.MainContainer}>
      <Text style={{ textAlign: 'center', fontSize:25, paddingTop:50 }}>No Alarms</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_times.php', {
  method: 'POST',
  headers: {
    'Accept': 'application/json',
    'Content-Type': 'application/json',
  },
  body: JSON.stringify({

    user: 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.time_display);
  PushNotification.cancelLocalNotifications({ id : data.item.time_key});

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

      key: data.item.time_display,

    })

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

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

toggleSwitch = (value) => {
  this.setState({switchValue: value})
  
  if (value == true)
  {
    var date = new Date();
    date.setHours(9, 0, 0, 0);
    PushNotification.scheduleLocalNotification({
          alertBody: responseJson,
          fireDate: date,
          repeatInterval: 'day',
          userInfo: { id : "random1" }
        });
    date.setHours(12, 0, 0, 0);
    PushNotification.scheduleLocalNotification({
          alertBody: responseJson,
          fireDate: date,
          repeatInterval: 'day',
          userInfo: { id : "random2" }
        });
    date.setHours(4, 0, 0, 0);
    PushNotification.scheduleLocalNotification({
          alertBody: responseJson,
          fireDate: date,
          repeatInterval: 'day',
          userInfo: { id : "random3" }
        });
    date.setHours(7, 0, 0, 0);
    PushNotification.scheduleLocalNotification({
          alertBody: responseJson,
          fireDate: date,
          repeatInterval: 'day',
          userInfo: { id : "random4" }
        });
  }
  else{
    PushNotification.cancelLocalNotifications({ id : "random1"});
    PushNotification.cancelLocalNotifications({ id : "random2"});
    PushNotification.cancelLocalNotifications({ id : "random3"});
    PushNotification.cancelLocalNotifications({ id : "random4"});
  }

}
//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.time_display.charAt(0).toUpperCase() + data.item.time_display.slice(1)}  </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>
    );
  }
  
  const { navigation } = this.props;
  const user = navigation.getParam('user', 'test');

  return (
    <View style={styles.container}>
      <View style={{alignItems:"center"}}>
        <Text style={styles.timestyles}>Notification Times</Text>
      </View>
      <FlatList
        style={styles.flatlistStyle}
        data={this.state.dataSource}
        ItemSeparatorComponent={this.FlatListItemSeparator}
        renderItem={item => this.renderItem(item)}
        keyExtractor={item => item.time_key.toString()}
        extraData={this.state}
        ListEmptyComponent={this.ListEmpty}
        onRefresh={() => this.onRefresh()}
        refreshing={this.state.isFetching}
      />
      <View style={styles.viewStyle}>
      <Icon
        onPress={() => this.props.navigation.navigate('AddTimes', {user: user})}
        name="add-circle-outline" 
        color="cornflowerblue"
      />  
      </View>
      <View style={styles.viewStyle}>
      <Text style={styles.random}>Random Times</Text>
        <Switch
          style={{marginTop:10}}
          onValueChange = {this.toggleSwitch}
          value = {this.state.switchValue}/>
      </View>
      <PushController />
    </View>
  );}
}

const styles = StyleSheet.create({
  random:{
    color:"white",
    fontSize: 16,
    paddingTop:35,
  },
  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,
  },
  viewStyle: {
    alignItems: 'center',
  },
  container: {
    flex: 1,
    backgroundColor: "#192338",
    paddingVertical: 50,
    position: "relative"
  },
  title: {
    fontSize: 20,
    color: "#fff",
    textAlign: "center",
    marginBottom: 10
  },
  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: 25,
    justifyContent: "center",
    paddingTop:5,
    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
  },
  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"},
});