import { Appearance, ScrollView, StyleSheet, Text, TouchableOpacity, View } from 'react-native'
import React, { useContext } from 'react'
import colors from '../../constants/colors'
import fonts from '../../constants/fonts'
import NewscoutTitleHeader from '../../components/molecules/Header/NewscoutTitleHeader'
import { List } from 'react-native-paper'
import EntypoIcon from 'react-native-vector-icons/Entypo'
import { ThemeContext } from '../../context/theme.context'

const SettingsPage = props => {
    const { navigation, route } = props

    const theme = useContext(ThemeContext)
    const currentTheme = theme.state.theme

    const listItem = [
        {
            id: 1,
            title: 'Edit Profile',
            icon: 'account',
            navigation: () => navigation.navigate('EditProfile'),
        },
        {
            id: 2,
            title: 'Notification',
            icon: 'bell',
            navigation: () => navigation.navigate('Notification'),
        },
        {
            id: 3,
            title: 'Security',
            icon: 'security',
            navigation: () => navigation.navigate('Security'),
        },
        {
            id: 4,
            title: 'Invite Friends',
            icon: 'account-multiple-plus',
            navigation: () => navigation.navigate('InviteFriends'),
        },
        {
            id: 5,
            title: 'Help',
            icon: 'chat-question',
            navigation: () => navigation.navigate('HelpPageNav'),
        },
        {
            id: 6,
            title: 'Switch Theme',
            icon: 'theme-light-dark',
            navigation: () => {
                if (currentTheme === 'dark')
                  theme.dispatch({ type: "LIGHTMODE" });
                else
                  theme.dispatch({ type: "DARKMODE" });
              }
        },
        {
            id: 7,
            title: 'Logout',
            icon: 'logout',
            navigation: () => true
        },
    ]

    const styles = StyleSheet.create({
        container: {
          backgroundColor: colors().dominant,
          height: '100%',
        },
        
      });

    return (
        <View style={styles.container}>
            <NewscoutTitleHeader
                title="Settings"
                backButtonShown={true}
                onBackClick={() => navigation.goBack()}
                headerStyle={{elevation: 2}}
            />
            <View>
                <ScrollView>
                    {listItem.map(item => (
                        <SettingListItem
                            title={item.title}
                            key={item.id}
                            id={item.id}
                            icon={item.icon}
                            onPress={item.navigation}
                        />
                    ))}
                </ScrollView>
            </View>


        </View>
    )
}

const SettingListItem = props => {
    const {title, id, icon, onPress} = props;
    const theme = useContext(ThemeContext)
    const currentTheme = theme.state.theme
    const styles = StyleSheet.create({
        listItemText: {
            fontFamily: fonts.type.medium,
            color: colors().recessive
          },
          circularIcon: {
            backgroundColor: currentTheme === 'light' ? colors().primaryTintColor : colors().black_variant,
            marginLeft: 20,
            padding: 8,
            // maxHeight:48,
            // maxWidth: 48,
            borderRadius: 32,
          },
    })

    return (
      <TouchableOpacity onPress={onPress}>
        <List.Item
          title={title}
          titleStyle={styles.listItemText}
          key={id}
          left={props => (
            <List.Icon
              {...props}
              size={24}
              style={styles.circularIcon}
              icon={icon}
              color={colors().primaryColor}
            />
          )}
          right={props => (
            <EntypoIcon
              name="chevron-thin-right"
              size={16}
              color={colors().recessive}
            />
          )}
        />
      </TouchableOpacity>
    );
  };

export default SettingsPage

