import React, {useState} from 'react';
import { View, Text, Pressable, StyleSheet, Alert} from 'react-native';
import DropDownPicker from 'react-native-dropdown-picker';
import { Table, TableWrapper, Row, Rows, Col, Cols, Cell } from 'react-native-table-component';
import { parse } from 'json2csv'
//import {styles} from "./styles"
  
  
var allData
var allTitle
  
const styles = StyleSheet.create({
	
	buttons: {
		flexDirection: 'row',
		justifyContent: 'center',
		marginTop: 40,
		marginBottom: 30,
		margin: 30,
		borderColor: "grey",
		borderRadius: 8,
		padding: (30, 16),
		backgroundColor: "black",
		marginTop: 0,
	}, 
	navContainer: {
	  flexDirection: 'row',
	  justifyContent: "space-evenly",
	  borderColor: "black",
	  borderWidth: 5,
	  borderRadius: 8,
	  paddingTop: 20,
	  backgroundColor: "gray",
	  marginTop: 5,
  }, 
	buttonContainer: {
	  flexDirection: 'column',
	  backgroundColor: '#f0f8ff',
	  alignItems: 'center',
	  justifyContent: 'center',
	  paddingTop:100,
	  marginTop: 40,
	},
	container: {
	  flexDirection: 'column',
	  justifyContent: 'center',
	  backgroundColor: '#f0f8ff',
	  alignItems: 'center',
	  justifyContent: 'center',
	  paddingTop:20,
	  marginTop: 20,
	},
	containerbackground:{
	  
	  backgroundColor: '#f0f8ff'
	},
	intro: {
		fontWeight: "bold",
		color:"#black",
		fontSize: 30,
	},
  
	sub: {
	  color:"#black",  
	  fontWeight: "bold",
	  fontSize: 15,
	  paddingBottom:10,
  },
  
	Navsub: {
		color:"#black",  
		fontWeight: "bold",
		fontSize: 30,
		paddingBottom:10,
	},
	scrollView:{
		marginHorizontal: 20
	},
	listItem:{
		fontSize: 30,
		color: "white",
		textDecorationLines: "underline"
	},
	listButtons:{
		fontSize: 15,
		color: "white",
		textDecorationLines: "underline"  
	},
	buttonsVer: {
		flexDirection: 'column',
		justifyContent: 'center',
		marginTop: 40,
		marginBottom: 30,
		margin: 30,
		borderColor: "grey",
	},
	bottom: {
	  flex: 0.3,
	  backgroundColor: "gray",
	  borderWidth: 5,
	  alignItems: 'center',
	  borderBottomLeftRadius: 20,
	  borderBottomRightRadius: 20,
	
  },text: {
	  fontSize: 16,
	  lineHeight: 21,
	  fontWeight: 'bold',
	  letterSpacing: 0.25,
	  color: 'white',
	},
	tablecontainer: { flex: 1, padding: 16, paddingTop: 30, backgroundColor: '#fff' },
	head: {  height: 40,  backgroundColor: '#f1f8ff'  },
	wrapper: { flexDirection: 'row' },
	title: { flex: 1, backgroundColor: '#f6f8fa' },
	row: {  height: 28  },
	tabletext: { textAlign: 'center' }
  });  
var table = ""
var pueblo = ""

//where data will be stored
var information

function Picker() {    

    //table to pick from
  
  
  const [openTable, setOpenTable] = useState(false);
  const [valueTable, setValueTable] = useState(null);
  const [table, setTable] = useState([
    {label:'DP02PR', value: 'DP02PR'},
    {label:'DP03', value: 'DP03'},
	{label:'DP04', value: 'DP04'},
    {label:'DP05', value: 'DP05'},
  ]);
    
  //cambiar pueblo
  
  
  //pueblo
  const [openPueblo, setOpenPueblo] = useState(false);
  const [valuePueblo, setValuePueblo] = useState(null);
  const [pueblo, setPueblo] = useState([
    {label: 'Adjuntas', value: '001'},
    {label: 'Aguada', value: '003'},
	{label: 'Aguadillas', value: '005'},
    {label: 'Aguas Buenas', value: '007'},
	{label: 'Aibonito', value: '009'},
    {label: 'Añasco', value: '011'},
	{label: 'Arecibo', value: '013'},
    {label: 'Arroyo', value: '015'},
	{label: 'Barceloneta', value: '017'},
    {label: 'Barranquitas', value: '019'},
	{label: 'Bayamón', value: '021'},
    {label: 'Cabo Rojo', value: '023'},
	{label: 'Caguas', value: '025'},
    {label: 'Camuy', value: '027'},
	{label: 'Canóvanas', value: '029'},
	{label: 'Carolina', value: '031'},
	{label: 'Cataño', value: '033'},
	{label: 'Cayey', value: '035'},
	{label: 'Ceiba', value: '037'},
	{label: 'Ciales', value: '039'},
	{label: 'Cidra', value: '041'},
	{label: 'Coamo', value: '043'},
	{label: 'Comerío', value: '045'},
	{label: 'Corozal', value: '047'},
	{label: 'Culebra', value: '049'},
	{label: 'Dorado', value: '051'},
	{label: 'Fajardo', value: '053'},
	{label: 'Florida', value: '054'},
	{label: 'Guánica', value: '055'},
	{label: 'Guayama', value: '057'},
	{label: 'Guayanilla', value: '059'},
	{label: 'Guaynabo', value: '061'},	
	{label: 'Gurabo', value: '063'},
	{label: 'Hatillo', value: '065'},
	{label: 'Hormigueros', value: '067'},
	{label: 'Humacao', value: '069'},
	{label: 'Isabela', value: '071'},
	{label: 'Jayuya', value: '073'},
	{label: 'Juana Díaz', value: '075'},
	{label: 'Juncos', value: '077'},
	{label: 'Lajas', value: '079'},
	{label: 'Lares', value: '081'},
	{label: 'Las Marías', value: '083'},
	{label: 'Las Piedras', value: '085'},
	{label: 'Loíza', value: '087'},
	{label: 'Luquillo', value: '089'},
	{label: 'Manatí', value: '091'},
	{label: 'Maricao', value: '093'},
	{label: 'Maunabo', value: '095'},
	{label: 'Mayagüez', value: '097'},
	{label: 'Moca', value: '099'},
	{label: 'Morovis', value: '101'},
	{label: 'Naguabo', value: '103'},
	{label: 'Naranjito', value: '105'},
	{label: 'Orocovis', value: '107'},
	{label: 'Patillas', value: '109'},
	{label: 'Peñuelas', value: '111'},
	{label: 'Ponce', value: '113'},
	{label: 'Quebradillas', value: '115'},
	{label: 'Rincón', value: '117'},
	{label: 'Río Grande', value: '119'},
	{label: 'Sabana Grande', value: '121'},
	{label: 'Salinas', value: '123'},
	{label: 'San Germán', value: '125'},
	{label: 'San Juan', value: '127'},
	{label: 'San Lorenzo', value: '129'},
	{label: 'San Sebastián', value: '131'},
	{label: 'Santa Isabel', value: '133'},
	{label: 'Toa Alta', value: '135'},
	{label: 'Toa Baja', value: '137'},
	{label: 'Trujillo Alto', value: '139'},
	{label: 'Utuado', value: '141'},
	{label: 'Vega Alta', value: '143'},
	{label: 'Vega Baja', value: '145'},
	{label: 'Vieques', value: '147'},
	{label: 'Villalba', value: '149'},
	{label: 'Yabucoa', value: '151'},
	{label: 'Yauco', value: '153'}
  ]);
  

    return (
        <View>
            <DropDownPicker
                open={openTable}
                value={valueTable}
                items={table}
                setOpen={setOpenTable}
                setValue={setValueTable}
                setItems={setTable}
                onChangeValue = {(valueTable) => {
                    updateTable(valueTable);
                }}
                onOpen = {() => {setOpenPueblo(false)}}
                zIndex={3000}
                zIndexInverse={1000}
                placeholder="Tabla de Datos"
            />

                
            <DropDownPicker
                searchable={true}
                open={openPueblo}
                value={valuePueblo}
                items={pueblo}
                setOpen={setOpenPueblo}
                setValue={setValuePueblo}
                setItems={setPueblo}
                onChangeValue = {(valuePueblo) => {
                    updatePueblo(valuePueblo);
                }}
                onOpen = {() => {setOpenTable(false)}}
                zIndex={1000}
                zIndexInverse={3000}
                placeholder="Pueblo"
                searchPlaceholder="Busqueda..."
            />
                
        </View>

    );
}


        
function updateTable(value){
    table = value
}
        
function updatePueblo(value){
    pueblo = value
}
        
//calls data query
function loadDoc(query) {
	console.log("load")
    var xhttp = new XMLHttpRequest();
    xhttp.onreadystatechange = function() {
        if (this.readyState == 4) {
            information = this.responseText;
			
			if(this.status == 200){console.log("received response");organize()}
            }
        }
        xhttp.open("GET", query, true);
        xhttp.send(null);  
        }
        
		
function fetchData() {
            
        var query = "https://api.census.gov/data/2020/acs/acs5/profile?get=group" + "(" + table + ")&for=county:" + pueblo + "&in=state:72"
        if(pueblo && table)
        {loadDoc(query)}

        else
        {Alert.alert("Please fill every parameter before calling!")}
            
    }



function DataTable() {
    let tableHead = ['Variable', 'Estimate', 'MoE']
    let tableTitle = allTitle
    let tableData = allData
    return (
      <View style={styles.tablecontainer}>
        <Table borderStyle={{borderWidth: 1}}>
          <Row data={tableHead} flexArr={[1, 2, 1, 1]} style={styles.head} textStyle={styles.tabletext}/>
          <TableWrapper style={styles.wrapper}>
            <Col data={tableTitle} style={styles.title} heightArr={[28,28]} textStyle={styles.tabletext}/>
            <Rows data={tableData} flexArr={[2, 1, 1]} style={styles.row} textStyle={styles.tabletext}/>
          </TableWrapper>
        </Table>
      </View>
    )
}

//organize data make it pretty
//add loading thing while this organizes all the data !!!

function organize(){
	
	let bigData = JSON.parse(information)
	bigData = parse(bigData)
	var variables = []
	var estimates = []
	var moe = []
	
	let divData = bigData.split(",")
	let num = Math.floor(divData.length/3) + 1
	for(let i = num; i < Math.floor(divData.length/3*2); i++){
		variables.push(divData[i])
		estimates.push(divData[i+num])
		moe.push(divData[i+num*1.5])
		
	}
	
	//console.log(variables)
	//console.log(estimates)
	//console.log(moe)
	let tableContents = []
	for(let i = 0; i < estimates.length; i++)
	{
		tableContents.push([estimates[i],moe[i]])
	}
	
	allTitle = variables
	allData = tableContents
	
	information = <DataTable />
	
	
	/*
	var stringDiv = JSON.stringify(information)
	stringDiv = stringDiv.replace('[[', '');
	stringDiv = stringDiv.replace(']]', '');
	stringDiv = stringDiv.split(',')
	//create smaller array variables
	let variables = []
	let value = []
	let est = []
	
	
	//theres a better way to do this but im not fixing it rn
	for(let i = 0; i<stringDiv.length; i++){

		if(i<stringDiv.length/3)
		    {variables.push(stringDiv[i])}
		else if(i<stringDiv.length/3*2)
		    {value.push(stringDiv[i])}
		else
            {est.push(stringDiv[i])}
	}
	
	//anyways this to format it
	
	console.log("vars:",variables)
	console.log("val:",value)
	console.log("est:",est)
	*/

	
}




function json_2_csv(information){

	const csv = parse(obj);
	console.log(csv);
}

//fix

DropDownPicker.setListMode("SCROLLVIEW")


//data parsing goes here
function getInfo(){
	return information
}

//data display

class DataButton extends React.Component{
	
	
	state = {
		updated: 1,
		notUpdated: 0
	}
	
	pullData = () => {fetchData(); this.setState({current: 1})}
	
	
	//the reason you need to press the button twice is bc the http request doesnt finish in time
	//for information to be updated before its rerendered
	componentDidUpdate(){
		if(this.state.current == 1){
			this.setState({current: 0})
		}
	}
	
	state = {current: 0}
	
	render() {
		return(
            <View style = {styles.container}>
                    
                    <Pressable style={styles.buttons} onPress = {this.pullData}>
                        <Text style={styles.text}> Fetch Data</Text>
                    </Pressable>
                   
                        <Text style={styles.sub}>{information}</Text> 
                    
            </View>
	    );
    }	
}

export { Picker, updateTable, updatePueblo,loadDoc,fetchData,DataButton};