import { StatusBar } from 'expo-status-bar';
import 'react-native-gesture-handler';
import { useEffect, useState } from 'react';
import React from 'react';
import { StyleSheet, Text, View, Image, ImageBackground, Button, TouchableOpacity, Platform, Alert, FlatList} from 'react-native';
import { ScrollView } from 'react-native-gesture-handler';

TouchableOpacity.defaultProps = { activeOpacity: 0.8 };

export default function Listas({ navigation }) {
  
  const [data, setData] = useState([]);
  useEffect(() => {
    fetch('https://ada.uprrp.edu/~victor.hernandez17/groceryPolice/viewUserLists.php', {
      method: 'POST',
      mode: 'no-cors',
      headers: {
        Accept: 'application/json',
        'Content-Type': 'application/json'
      },
      body: JSON.stringify({
        uid: 1234
      })
    })
    .then((response) => response.json())
    .then((json) => {
      setData(json);
      console.log(json);

    })
    .catch((error) => {
      console.error(error);
    });
  }, []);


  return (
    <View style = {styles.container} >
      <View style = {styles.pageTitleView}>
        <Text style = {styles.pageTitleText}> Lists </Text>
      </View>
      <View style = {styles.contents}>
        <ScrollView style = {styles.scrollView}>
          <FlatList
            data={data}
            keyExtractor={(list) => list.id}
            renderItem={({ item }) => (
              <TouchableOpacity style={styles.listCards} onPress={() => navigation.navigate('Products', item)} >
                <Text key={item.lid} style={styles.listText}>{item.name_l}</Text>
              </TouchableOpacity>
            )}
          />
        </ScrollView>
      </View>
      <View style = {styles.contentsPlus}>
        <TouchableOpacity style={styles.plusButton} onPress={() => navigation.navigate('NewList', { uid: '1234' })}>
          <Text style={styles.plusText}>+</Text>
        </TouchableOpacity>
      </View>
    </View>
    );
 };

 // STYLING

const styles = StyleSheet.create({
  container: {
    flex: 1,
    backgroundColor: '#2F5597',
  },

  pageTitleView: {
    flex: 1,
    alignContent: 'flex-end',
    justifyContent:  'flex-end'
  },

  contents: {
    flex: 2,
  },

  contentsPlus: {
    flex: 1,
    justifyContent: 'center',
    alignContent: 'center',
    alignItems: 'center'
  },

  pageTitleText: {
    color: 'white',
    fontSize: 45,
    paddingLeft: 10,
    paddingBottom: 30,
    fontFamily: 'Avenir'
  },

  listCards: {
    flexDirection: 'row',
    alignContent: 'flex-start',
    justifyContent: 'flex-start',
    alignItems: 'center',
    backgroundColor: 'rgb(32,56,100)',
    width: '99%',
    borderRadius: 10,
    paddingVertical: 20,
    paddingHorizontal: 10,
    marginBottom: 10,
    shadowColor: 'rgba(0,0,0,.5)',
    shadowOffset: { width: 2, height: 2},
    shadowOpacity: 0.3,
  },

  plusButton: {
    flexDirection: 'row',
    alignContent: 'flex-start',
    justifyContent: 'flex-start',
    alignItems: 'center',
    justifyContent: 'center',
    backgroundColor: 'rgb(255,255,255)',
    width: 90,
    height: 90,
    borderRadius: 45,
    marginBottom: 50,
    shadowColor: 'rgba(0,0,0,.5)',
    shadowOffset: { width: 2, height: 2},
    shadowOpacity: 0.3,
  },

  plusText: {
    color: 'rgb(32,56,100)',
    fontSize: 60,
    fontWeight: '600',
    fontFamily: 'Avenir'

  },

  listText: {
    color: 'white',
    fontSize: 20,
    fontFamily: 'Avenir'

  },

  appButtonText: {
    fontSize: 17,
    color: "#fff",
    alignSelf: "center",
  },

  bContainer: {
    padding: 50,
    paddingTop: -20,
    flex: 2,
    width: '100%',
    justifyContent: "space-evenly",
  },

  scrollView: {
    backgroundColor: 'transparent',
    marginHorizontal: 20,
  },

});