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_parameterised, sqlite_exec_query} from './db/query';


export default function App() {
  const [durationMode, onChangeDuration] = React.useState("days");
  const [dailyObjective, onChangeObjective] = React.useState(-1);
  if(dailyObjective != -1)
    sqlite_exec_parameterised("update objective set value = ?", [dailyObjective], (res) => {});

    useEffect( () => {
    sqlite_exec_query("create table if not exists objective(value integer)", (res)=>{
      sqlite_exec_query("select * from objective", (res) => {
        if(res.rows.length == 0)
          {
            sqlite_exec_parameterised("insert into objective (value) values (?)",[dailyObjective],(res)=>{})
          }
        else
          {
            onChangeObjective(res.rows._array[0].value);
          } 
      });
    });
  });

  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',
  }
});