import { StatusBar } from 'expo-status-bar';
import React, { useEffect } from 'react';
import { StyleSheet, Text, View, TextInput } from 'react-native';
import AddDepense from './components/add_depense';
import DepensesList from './components/depenses_list';
import TitleBar from './components/title_bar';
import sqlite_exec_query from './db/query';


export default function App() {
  const [durationMode, onChangeDuration] = React.useState("days");
  const [dailyObjective, onChangeObjective] = React.useState(1);
  console.log("bah")
  useEffect( () => {
    sqlite_exec_query("create table if not exists objective(value integer)", (res)=>{
      sqlite_exec_query("select * from objective", (res) => {
        console.log(res.rows.length);
        if(res.rows.length == 0)
          onChangeObjective(15);
      })
    })
  });

  return (
    <View>
      <View style={styles.container, {
        flexDirection: "column"
      }}>
          <TitleBar 
            onChangeDuration={onChangeDuration} 
            durationMode={durationMode} 
            dailyExpense={dailyObjective}
            onChangeObjective={onChangeObjective}/>
          <DepensesList durationMode={durationMode} />
          <StatusBar hidden />
        </View>
        <View>
        {/* Overlay for expenses */}
        <AddDepense/>

      </View>
    </View>
  );
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    backgroundColor: '#fff',
    alignItems: 'center',
    justifyContent: 'center',
  }
});