import React from 'react';
import {
  SectionList,
  StatusBar,
  StyleSheet,
  Text,
  TouchableOpacity,
  SafeAreaView,
  View,
} from 'react-native';
import {useSelector} from 'react-redux';
import {RootState} from 'src/store/rootReducer';
import {Background} from '../../components';
import {BackgroundGradientType} from '../../types';
import {normalize} from '../../utils/layouts';
import SettingsCell from './SettingsCell';
import {SETTINGS_DATA} from '../../constants/constants';

const SettingsScreen: React.FC = () => {
  const {suggested_people_linked} = useSelector(
    (state: RootState) => state.user.profile,
  );

  return (
    <>
      <StatusBar barStyle="light-content" />
      <Background gradientType={BackgroundGradientType.Light}>
        <SafeAreaView>
          <View style={styles.container}>
            <SectionList
              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={() => {}}>
                  <Text style={styles.logoutTextStyles}>Logout</Text>
                </TouchableOpacity>
              )}
            />
          </View>
        </SafeAreaView>
      </Background>
    </>
  );
};

const styles = StyleSheet.create({
  container: {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;