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);
      });
    });
    sqlite_exec_query(`
      create table if not exists expense (id integer primary key not null, value real, description text, date integer);`,(res)=>{});
  });

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

const styles = StyleSheet.create({
  home: {
    width: '100%',
    height: '100%',
  },
  container: {
    flex: 1,
    backgroundColor: '#00FF00',
    alignItems: 'center',
    justifyContent: 'center',
  }
});