import { View, Text, StyleSheet, Image, Appearance } from 'react-native'
import React, { useState } from 'react'
import { SIZES } from '../../../constants/theme'
import { SafeAreaView } from 'react-native-safe-area-context'
import { ButtonSetting, ToggleSetting } from '../../../components'
import { useTheme } from '../../contexts/ThemeContext'
import { deleteExpenses, DEV_populateDatabase } from '../../../services/database'
import { useAuth } from '../../contexts/AuthContext'
import { TouchableOpacity } from 'react-native-gesture-handler'


export default function userSettings() {
  const {onLogout} = useAuth();
  const {theme, colors, isSystemTheme, applyTheme, applySystemTheme} = useTheme();

  const backgroundColor = colors.backgroundColor
  styles.text = {...styles.text, color: colors.primaryText}
  
  const [systemTheme, setSystemTheme] = useState<boolean>(isSystemTheme!)
  const [darkMode, setDarkMode] = useState<boolean>(theme === "dark" ? true : false)

  const handleSystemTheme = () => {
    const newTheme = darkMode ? "dark" : "light"
    if(systemTheme){
      applyTheme!(newTheme)
    }else{
      applySystemTheme!()
    }

    setSystemTheme(prev => !prev)
    
  }

  const handleDarkMode = () => {
    const newTheme = darkMode ? "light" : "dark"

    setDarkMode(prev => !prev)
    applyTheme!(newTheme);
  }


  return (
    <SafeAreaView style={[styles.container, {backgroundColor: colors.backgroundColor}]}>
      <View>
        <View style={styles.header}>
          <Image style={{height: 70, width: 70, borderRadius: 200}}source={require("../../../assets/images/profile.jpg")} height={60} width={20} resizeMode='cover'/>
          <Text style={{fontSize: SIZES.xxLarge, color: colors.primaryText}}>My Profile</Text>
          <View></View>
        </View>
        <View style={styles.settingsContainer}>
          <ToggleSetting settingsTitle='Use System Theme' value={systemTheme} onChange={handleSystemTheme}/>
          <ToggleSetting settingsTitle='Dark Mode' disabled={systemTheme} onChange={handleDarkMode} value={darkMode}/>
          <ButtonSetting settingsTitle='Reset Expenses' onPress={() => {
            deleteExpenses().then(() => {
                console.log("Expenses Deleted!");
            })}}
            />
          <ButtonSetting settingsTitle='Populate Database' onPress={() => {
            const del = async () => {
              await DEV_populateDatabase()
            }
            del()
          }}/>
        </View>
        
      </View>
      <View style={styles.bottomNavigation}>
        <TouchableOpacity onPress={onLogout}>
          <View style={[styles.button, {backgroundColor: colors.accentColor}]}>
            <Text style={{fontSize: SIZES.large, color: colors.primaryText}}>Sign Out</Text>
          </View>
        </TouchableOpacity>
      </View>
    </SafeAreaView>
  )
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    justifyContent: "space-between"
  },

  header:{
    flexDirection: 'row',
    alignItems: "center",
    justifyContent: "space-between",
    margin: 10,
  },
  settingsContainer: {
    marginHorizontal: 10
  },

  upperPart:{
    flex: 1
  },

  bottomNavigation:{
    marginBottom: 20,
    alignItems:"center"

  },
  button:{
    borderRadius: 80,
    minHeight: 60,
    justifyContent: "center",
    paddingHorizontal: 20
  },
  text: {}
})