import React, {Component} from 'react';
import {Platform, StyleSheet, Text, View, Button, TextInput, ScrollView, Picker, Alert, FlatList, TouchableOpacity, ActivityIndicator, Image } from 'react-native';
import { createAppContainer, createStackNavigator, StackActions, NavigationActions } from 'react-navigation';
import Icon from 'react-native-ionicons';


export default class QuotesScreen extends React.Component {

constructor(props) {
  super(props)
  this.state = {
    loading: false,
    dataSource: [],
    dataSourceCategory: [],
    loadingCategory: false,
    text: 'Add your own quote!',
   };
}

componentDidMount() {this.fetchData(); this.fetchCategories();} //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/test.php', {
    method: 'POST',
    headers: {
      'Accept': 'application/json',
      'Content-Type': 'application/json',
    },
    body: JSON.stringify({
  
      name: user
  
    })
  
  })
.then(response => response.json())
.then(responseJson => {
  console.log(responseJson);
  responseJson = responseJson.map(item => {
    if (item.selected == 0)
    {
      item.isSelect = false;
      item.selectedClass = styles.list;
    }
    else{
      item.isSelect = true;
      item.selectedClass = styles.selected;
    }

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

fetchCategories = () => {this.setState({loadingCategory: true});

    fetch('http://compsci02.snc.edu/cs460/2019/khoral/mysql/get_categories.php', {
    method: 'POST',
    headers: {
      'Accept': 'application/json',
      'Content-Type': 'application/json',
    },
    body: JSON.stringify({
  
      name: this.state.data
  
    })
  
  })
.then(response => response.json())
.then(responseJson => {
  console.log(responseJson);
  responseJson = responseJson.map(item => {
    if (item.select == 0)
    {
      item.isSelect = false;
      item.selectedClass = styles.list;
    }
    else{
      item.isSelect = true;
      item.selectedClass = styles.selected;
    }


  return item;
});
this.setState({
  loadingCategory: false,
  dataSourceCategory: responseJson,
});
}).catch(error => {this.setState({loadingCategory: false});
});
};



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

selectItemCategory = data => { //HANDLES SELECTED/UNSELECTED ITEMS
  console.log("here");
  console.log(data.item);

  var add;

  if (data.item.isSelect === false)
  {
      add = 1;
  }
  else
  {
    add = 0;
  }
  console.log("category " + data.item.category);

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

  fetch('http://compsci02.snc.edu/cs460/2019/khoral/mysql/add_selected_category.php', {
    method: 'POST',
    headers: {
      'Accept': 'application/json',
      'Content-Type': 'application/json',
    },
    body: JSON.stringify({
      username: user,
      add: add,
      category: data.item.category,
    })
  
  }).then((response) => response.json())
        .then((responseJson) => {
  // Showing response message coming from server after inserting records.
  console.log(responseJson);
          if (responseJson == "Success!")
          {
            //Alert.alert("Welcome, success ");
            console.log("success");
          }
          else{
            //Alert.alert(responseJson);
            console.log("error");
            return;
          }
  
        }).catch((error) => {
          console.error(error);
        });


data.item.isSelect = !data.item.isSelect;
data.item.selectedClass = data.item.isSelect?
              styles.selected: styles.list;
const index = this.state.dataSource.findIndex(
  item => data.item.id === item.id
);
this.state.dataSource[index] = data.item;
this.setState({
  dataSource: this.state.dataSource,
});
};



selectItem = data => { //HANDLES SELECTED/UNSELECTED ITEMS
  console.log("here");
  console.log(data.item);

  var add;

  if (data.item.isSelect === false)
  {
      add = 1;
  }
  else
  {
    add = 0;
  }

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

  fetch('http://compsci02.snc.edu/cs460/2019/khoral/mysql/add_selected_quote.php', {
    method: 'POST',
    headers: {
      'Accept': 'application/json',
      'Content-Type': 'application/json',
    },
    body: JSON.stringify({
      username: user,
      add: add,
      quote: data.item.you_are,
    })
  
  }).then((response) => response.json())
        .then((responseJson) => {
  // Showing response message coming from server after inserting records.
          if (responseJson == "Success!")
          {
            //Alert.alert("Welcome, success ");
            console.log("success");
          }
          else{
            //Alert.alert(responseJson);
            console.log("error");
            return;
          }
  
        }).catch((error) => {
          console.error(error);
        });


data.item.isSelect = !data.item.isSelect;
data.item.selectedClass = data.item.isSelect?
              styles.selected: styles.list;
const index = this.state.dataSource.findIndex(
  item => data.item.id === item.id
);
this.state.dataSource[index] = data.item;
this.setState({
  dataSource: this.state.dataSource,
});
};

renderItemCategory = data =>
  <TouchableOpacity
    style={[styles.list, data.item.selectedClass]}      
    onPress={() => this.selectItemCategory(data)}
  >
  <Text style={styles.lightText}>  {data.item.category}  </Text>
</TouchableOpacity>

//RenderItem Fcn - First list
renderItem = data => 
  <TouchableOpacity
    style={[styles.list, data.item.selectedClass]}      
    onPress={() => this.selectItem(data)}
  >
  <Text style={styles.lightText}>  {data.item.you_are.charAt(0).toUpperCase() + data.item.you_are.slice(1)}  </Text>
</TouchableOpacity>

render() {
const itemNumber = this.state.dataSource.filter(item => item.isSelect).length;
const itemNumberCategory = this.state.dataSourceCategory.filter(item => item.isSelect).length;
if (this.state.loading) {return (
<View style={styles.loader}>
 <ActivityIndicator size="large" color="purple" />
</View>
);
}
if (this.state.loadingCategory) {return (
<View style={styles.loader}>
 <ActivityIndicator size="large" color="purple" />
</View>
);
}
  return (
  <View style={styles.main}>
    <View style={styles.container}>
    <Text style={styles.customize}>Customize your quotes.</Text>
      <Text style={styles.titles}>Choose from the list below.</Text>
      <FlatList
        data={this.state.dataSource}
        ItemSeparatorComponent={this.FlatListItemSeparator}
        renderItem={item => this.renderItem(item)}
        keyExtractor={item => item.id.toString()}
        extraData={this.state}
      />
    </View>
    <View style={styles.container2}>
      <Text style={styles.titles}>Choose categories of quotes you'd like to see.</Text>
      <FlatList
        data={this.state.dataSourceCategory}
        ItemSeparatorComponent={this.FlatListItemSeparator}
        renderItem={item => this.renderItemCategory(item)}
        keyExtractor={item => item.category.toString()}
        extraData={this.state}
      />
    </View>
  </View>
  );
}
}


const styles = StyleSheet.create({
customize: {
  fontSize:30,
  color:"white",
  paddingBottom:15,
},
titles: {
  fontSize:20,
  color:"white",
  paddingBottom:5,
},
main: {
  flex: 1,
  backgroundColor: "#192338",   
},
container: {
  flex: .5,
  paddingVertical: 15,
  position: "relative",
  height:50,
 },
 container1: {
  flex: .2,
  paddingVertical: 15,
  position: "relative",
  height:50,
  flexDirection:"row",
 },
container2: {
  flex: .3,
  paddingVertical: 10,
  position: "relative",
  height:50,
 },
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
},
lightText: {
  color: "#f7f7f7",
  width: 200,
  paddingLeft: 15,
  fontSize: 12
 },
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"},
});