import React, {useContext} from 'react';
import {
  SafeAreaView,
  SectionList,
  StatusBar,
  StyleSheet,
  Text,
  TouchableOpacity,
  View,
} from 'react-native';
import {useDispatch, useSelector} from 'react-redux';
import {logout} from '../../store/actions';
import {RootState} from '../../store/rootReducer';
import {Background} from '../../components';
import {SETTINGS_DATA} from '../../constants/constants';
import {BackgroundGradientType} from '../../types';
import {normalize, SCREEN_HEIGHT} from '../../utils/layouts';
import SettingsCell from './SettingsCell';
import {useNavigation} from '@react-navigation/core';
import {ChatContext} from '../../App';

const SettingsScreen: React.FC = () => {
  const dispatch = useDispatch();
  const navigation = useNavigation();
  const {suggested_people_linked} = useSelector(
    (state: RootState) => state.user.profile,
  );
  const {chatClient} = useContext(ChatContext);

  return (
    <>
      <StatusBar barStyle="light-content" />
      <Background gradientType={BackgroundGradientType.Light}>
        <SafeAreaView>
          <View style={styles.container}>
            <SectionList
              stickySectionHeadersEnabled={false}
              sections={SETTINGS_DATA.SettingsAndPrivacy}
              keyExtractor={(item, index) => item.title + index}
              renderItem={({item: {title, preimage, postimage}}) => (
                <SettingsCell
                  {...{title, preimage, postimage, suggested_people_linked}}
                />
              )}
              renderSectionHeader={({section: {title}}) => (
                <View style={styles.headerContainerStyles}>
                  <Text style={styles.headerTextStyles}>{title}</Text>
                </View>
              )}
              ListFooterComponent={() => (
                <TouchableOpacity
                  style={styles.logoutContainerStyles}
                  onPress={() => {
                    dispatch(logout(chatClient));
                    navigation.reset({
                      index: 0,
                      routes: [{name: 'SuggestedPeople'}],
                    });
                  }}>
                  <Text style={styles.logoutTextStyles}>Logout</Text>
                </TouchableOpacity>
              )}
            />
          </View>
        </SafeAreaView>
      </Background>
    </>
  );
};

const styles = StyleSheet.create({
  container: {height: SCREEN_HEIGHT, marginHorizontal: '8%', marginTop: '8%'},
  headerContainerStyles: {marginTop: '14%'},
  headerTextStyles: {
    fontSize: normalize(18),
    fontWeight: '600',
    lineHeight: normalize(21.48),
    color: '#E9E9E9',
  },
  logoutContainerStyles: {marginTop: '20%', marginLeft: '12%'},
  logoutTextStyles: {
    fontSize: normalize(20),
    fontWeight: '600',
    lineHeight: normalize(23.87),
    color: 'white',
  },
});

export default SettingsScreen;
