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'
import { moderateScale } from '../../constants/metrics'

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,
      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 => (
          <View style={{justifyContent:'center'}}><EntypoIcon
            name="chevron-thin-right"
            size={moderateScale(16)}
            color={colors().recessive}
          /></View>
        )}

      />
    </TouchableOpacity>
  );
};

export default SettingsPage