import { TouchableOpacity, StyleSheet, Text, SectionList, View, StatusBar, Pressable } 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 { 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';

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 [options] = useState([
    { id: 'profile', name: 'Perfil', path: '/profile'}
  ])

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

  console.log(tintColor, textColor)

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

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

    return (
      <View>
        <Link key={item.id} href={item.path} asChild style={itemStyle}>
          <Pressable>
            <Text style={itemColor}>
              {item.title}
            </Text>
          </Pressable>
        </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,
    paddingTop: StatusBar.currentHeight,
    marginHorizontal: 16
  },
  item: {
    paddingTop: 20,
    paddingBottom: 20,
  },
  header: {
    fontSize: 22,
    fontWeight: 'bold'
  },
  logout: {
    textColor: '#FF2C2C'
  }
});