import { TouchableOpacity, StyleSheet, Text, SectionList, View, Alert } from 'react-native';
import { SafeAreaView, SafeAreaProvider } from 'react-native-safe-area-context';
import { useState } from 'react';
import ParallaxScrollView from '@/components/misc/parallax-scroll-view';
import { Link } from 'expo-router'
import { StatusBar } from 'expo-status-bar';

import { ThemedText } from '@/components/misc/themed-text';
import { ThemedView } from '@/components/misc/themed-view';
import { IconSymbol } from '@/components/ui/icon-symbol';
import { Fonts } from '@/constants/theme';
import { useThemeColor } from '@/hooks/use-theme-color';
import { useAuth } from '@/context/AuthContext';

const SECTIONS = [
  {
    title: 'Geral',
    data: [{
      title: 'Perfil & Senha',
      path: '/profile'
    }]
  },
  {
    title: 'Sobre',
    data: [
      {
        title: 'Sobre o aplicativo',
        path: '/about'
      },
      {
        title: 'O que acontece com seus dados?',
        path: '/data'
      },
      {
        title: 'Sair',
        path: '/logout',
        logout: true
      }
    ]
  }
]

export default function Settings() {
  const { user, logout } = useAuth();
  const [options] = useState([
    { id: 'profile', name: 'Perfil', path: '/profile'}
  ])

  const textColor = useThemeColor({}, 'text');
  const tintColor = useThemeColor({}, 'tint');

  const handleLogout = async () => {
    Alert.alert(
      'Sair',
      'Tem certeza que quer sair?',
      [
        { text: 'Cancelar', style: 'cancel' },
        {
          text: 'Sair',
          style: 'destructive',
          onPress: logout
        },
      ]
    );
  };

  const renderItem = ({item}) => {
    const itemStyle = [
      styles.item,
    ]

    const itemColor = { color: item.logout ? '#FF2C2C' : textColor }

    if (item.logout) {
      return (
        <TouchableOpacity onPress={handleLogout} style={itemStyle}>
          <Text style={itemColor}>
            Sair
          </Text>
        </TouchableOpacity>
      )
    }

    return (
      <View>
        <Link key={item.id} href={item.path} asChild style={itemStyle}>
          <TouchableOpacity>
            <Text style={itemColor}>
              {item.title}
            </Text>
          </TouchableOpacity>
        </Link>
      </View>
    )
  }

  return (
    <SafeAreaProvider>
      <SafeAreaView style={styles.container} edges={['top']}>
        <StatusBar style="dark" />
        <SectionList
          sections={SECTIONS}
          keyExtractor={(item, index) => item.title + index}
          renderItem={renderItem}
          renderSectionHeader={({section: {title}}) => (
            <ThemedText style={styles.header}>{title}</ThemedText>
          )} />
      </SafeAreaView>
    </SafeAreaProvider>
  )
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    marginHorizontal: 16,
    paddingTop: 10
  },
  item: {
    paddingTop: 20,
    paddingBottom: 20,
  },
  header: {
    fontSize: 22,
    fontWeight: 'bold'
  },
  logout: {
    textColor: '#FF2C2C'
  }
});