import {
  ScrollView,
  StyleSheet,
  Text,
  TouchableOpacity,
  View,
} from 'react-native';
import React from 'react';
import {List} from 'react-native-paper';
import EntypoIcon from 'react-native-vector-icons/dist/Entypo';
import colors from '../theme/colors';
import fonts from '../theme/fonts';
import NewscoutTitleHeader from '../components/organisms/Headers/NewscoutTitleHeader';


const SettingsPage = props => {
  const {navigation} = props;

  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('Help'),
    },
    {
      id: 6,
      title: 'Dark mode',
      icon: 'theme-light-dark',
      navigation: () => navigation.navigate('DarkMode'),
    },
    {
      id: 7,
      title: 'Logout',
      icon: 'logout',
      navigation: () => navigation.navigate('LogOut'),
    },
  ];
  return (
    <View style={styles.container}>
      <NewscoutTitleHeader
        title="Settings"
        backButtonShown={true}
        onBackClick={() => navigation.goBack()}
      />
      <ScrollView>
        {listItem.map(item => (
          <SettingListItem
            title={item.title}
            key={item.id}
            id={item.id}
            icon={item.icon}
            onPress={item.navigation}
          />
        ))}
      </ScrollView>
    </View>
  );
};

const SettingListItem = props => {
  const {title, id, icon, onPress} = props;

  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.topColor}
          />
        )}
        right={props => (
          <EntypoIcon
            name="chevron-thin-right"
            size={16}
            color={colors.black}
          />
        )}
      />
    </TouchableOpacity>
  );
};

export default SettingsPage;

const styles = StyleSheet.create({
  container: {
    backgroundColor: colors.white,
    height: '100%',
  },
  listItemText: {
    fontFamily: fonts.type.medium,
  },
  circularIcon: {
    backgroundColor: colors.primaryTintColor,
    marginLeft: 20,
    padding: 8,
    // maxHeight:48,
    // maxWidth: 48,
    borderRadius: 32,
  },
});