import { View, Text, Alert, StyleSheet } from 'react-native'
import React, { useEffect, useState } from 'react'
import { router, useLocalSearchParams, useRouter } from 'expo-router'
import useFetch from '../../../../hooks/useFetch';
import { Category, Expense } from '../../../../types/dbItems';
import { CategorySelectorModal, AutoDecimalInput, CategorySelector, TextInputBar, DateSelectorButton, RoundedButton } from '../../../../components';
import colors from '../../../../constants/colors';
import { addExpense, deleteExpense, executeQuery, updateExpense } from '../../../../services/database';
import { SimpleDate } from '../../../../util/SimpleDate';
import DateTimePicker from '@react-native-community/datetimepicker';
import { SIZES } from '../../../../constants/theme';
import { useTheme } from '../../../contexts/ThemeContext';

export default function Page() {
  const router = useRouter();
  const {colors} = useTheme();
  const {expense} = useLocalSearchParams();
  const {data, isEmptyResult} = useFetch({sql: "SELECT e.guid as e_guid, e.name as e_name, e.datetime as e_datetime, e.amount as e_amount, c.guid as c_guid, c.name as c_name, c.color as c_color FROM expense e INNER JOIN category c on e.category_guid = c.guid WHERE e.guid = ?", args: [expense]});
  const [selectedExpense, setSelectedExpense] = useState<Expense|undefined>();
  const [selectedCategory, setSelectedCategory] = useState<Category|undefined>();
  const [formatedValue, setFormatedValue] = useState<string>("");
  const [initialValue, setInitialValue] = useState<number>();
  const [selectorModalVisible, setSelecorModalVisible] = useState<boolean>(false);
  const [expenseName, setExpenseName] = useState<string>("");
  const [datePickerShown, setDatePickerShown] = useState<boolean>(false);
  const [selectedDate, setSelectedDate] = useState<Date>(new Date());


  console.log(router.canGoBack())
  useEffect(()=>{
    const entry = data[0];
    console.log(entry)
    if(entry){
      console.log(entry)
      const extractedExpense: Expense = {name: entry["e_name"], amount: entry["e_amount"], dateTime: entry["e_datetime"], guid: entry["e_guid"]}
      const extractedCategory: Category = {name: entry["c_name"], color: entry["c_color"], guid: entry["c_guid"]}

      console.log(extractedCategory.color)

      setSelectedExpense(extractedExpense);
      setSelectedCategory(extractedCategory);
      setInitialValue(extractedExpense.amount)
      setExpenseName(extractedExpense.name ?? "")
      setSelectedDate(extractedExpense.dateTime? new Date(extractedExpense.dateTime) : new Date());
    }


  }, [data])

  const handleValueChange = (formatedValue: string) => {
    setFormatedValue(formatedValue);
  }

  const handleCategorySelect = (category : Category) => {
    setSelecorModalVisible(false);
    setSelectedCategory(category);
  }

  const validateInput = ():boolean => {
    if(formatedValue == "" || expenseName == "" || selectedCategory === undefined || selectedDate === null){
      return false;
    }
    return true;
  }

  const submit = () => {
    console.log(selectedExpense?.guid)
    const insert = async () => {
      await updateExpense(selectedExpense!.guid!, expenseName, selectedCategory!.guid!, new SimpleDate(selectedDate).format("YYYY-MM-DD"), Number(formatedValue))
    }
    if(validateInput()){
      insert();
      router.back();
    }else {
      Alert.alert("Invalid input", "One of the Props is not properly defined")
    }
    
  }

  const handleDelete = () => {
    const del = async () => {
      await deleteExpense(selectedExpense!.guid!)
      router.back();
    }
    del();
  }

  return (
    <View style={styles.container}>
      <CategorySelectorModal visible={selectorModalVisible} onRequestClose={()=>{setSelecorModalVisible(false)}} onCategoryTap={handleCategorySelect}></CategorySelectorModal>
      <AutoDecimalInput onValueChange={handleValueChange} label='Amount' initialValue={initialValue}/>
      <CategorySelector onPress={()=>{setSelecorModalVisible(true)}} selectedCategory={selectedCategory}/>
      <TextInputBar placeholder='Name' onChangeText={(text)=>setExpenseName(text)} value={expenseName}/>
      <DateSelectorButton selectedDate={selectedDate} onPress={()=>{setDatePickerShown(true)}}/>
      {datePickerShown &&
        <DateTimePicker 
          value={new Date()}
          maximumDate={new Date()}

          onChange={(event, date)=>{
            setDatePickerShown(false);
            if(date){
              setSelectedDate(date);
            }
          }}
        />}
        <RoundedButton color={colors.elementDefaultColor} style={{padding: 10, marginTop: 40}} onPress={handleDelete}>
          <Text style={[styles.submitText, {color: colors.primaryText}]}>Delete Expense</Text>
        </RoundedButton>
        <RoundedButton color={colors.accentColor} style={styles.save} onPress={submit}>
          <Text style={[styles.submitText, {color: colors.primaryText}]}>Save</Text>
        </RoundedButton>
    </View>
  )
}

const styles = StyleSheet.create({
  notFound: {
    alignItems: "center",
    justifyContent: "center"
  },

  notFoundMessageContainer: {
    backgroundColor: "#e37b7b",
    padding: 50,
  },
  save: {
    padding: 10,
  },
  container: {
    margin: SIZES.normal,
    display: "flex",
    gap: 10
  }, 
 
  submitText: {
    fontSize: SIZES.large
  }
  
})