import React from 'react';
import {
  Alert,
  Image,
  SectionList,
  StatusBar,
  StyleSheet,
  Text,
  TouchableOpacity,
  View,
} from 'react-native';
import {SafeAreaView} from 'react-native-safe-area-context';
import {normalize, SCREEN_WIDTH} from '../../utils/layouts';
import {Background} from '../../components';
import {BackgroundGradientType} from '../../types';
import {logout} from '../../store/actions';
import {useDispatch, useSelector} from 'react-redux';
import {useNavigation} from '@react-navigation/core';
import {RootState} from 'src/store/rootReducer';
import {ERROR_ATTEMPT_EDIT_SP} from '../../constants/strings';

const DATA = [
  {
    title: '',
    data: [
      {
        title: 'Account Type',
        preimage: require('../../assets/images/settings/lock-white.png'),
        postimage: require('../../assets/images/settings/white-arrow.png'),
      },
      {
        title: 'Blocked Accounts',
        preimage: require('../../assets/images/settings/blocked-white.png'),
        postimage: require('../../assets/images/settings/white-arrow.png'),
      },
    ],
  },
];

const PrivacyScreen: React.FC = () => {
  const navigation = useNavigation();

  const getActions = (type: string) => {
    switch (type) {
      case 'Account Type':
        navigateTo('AccountTypeScreen', {});
        break;
      case 'Blocked Accounts':
        navigateTo('Blocked Accounts', {});
        break;
      default:
        break;
    }
  };

  const navigateTo = (screen: string, options: object) => {
    navigation.navigate(screen, options);
  };

  const Item = ({
    title,
    preimage,
    postimage,
  }: {
    title: string;
    preimage: number;
    postimage: number;
  }) => (
    <TouchableOpacity onPress={() => getActions(title)} style={styles.item}>
      <Image
        resizeMode={'cover'}
        style={{width: SCREEN_WIDTH * 0.05, height: SCREEN_WIDTH * 0.05}}
        source={preimage}
      />
      <View style={{marginLeft: 40}}>
        <Text style={styles.title}>{title}</Text>
      </View>
      <View style={[styles.item, {position: 'absolute', right: 0}]}>
        {title === 'Account Type' && (
          <Text style={[styles.title, {color: '#C4C4C4', marginRight: 13}]}>
            {'Private'}
          </Text>
        )}
        <Image style={{width: 15, height: 15}} source={postimage} />
      </View>
    </TouchableOpacity>
  );

  return (
    <>
      <StatusBar barStyle="light-content" />
      <Background gradientType={BackgroundGradientType.Light}>
        <SafeAreaView>
          <View style={{marginLeft: 28, marginRight: 43}}>
            <SectionList
              sections={DATA}
              keyExtractor={(item, index) => item.title + index}
              renderItem={({item: {title, preimage, postimage}}) => {
                return <Item {...{title, preimage, postimage}} />;
              }}
              renderSectionHeader={({section: {title}}) => {
                if (title.length === 0) {
                  return null;
                }
                return (
                  <View style={{marginTop: 46}}>
                    <Text style={styles.header}>{title}</Text>
                  </View>
                );
              }}
            />
          </View>
        </SafeAreaView>
      </Background>
    </>
  );
};

const styles = StyleSheet.create({
  container: {
    flex: 1,
  },
  item: {
    marginTop: 36,
    flexDirection: 'row',
    justifyContent: 'flex-start',
    alignItems: 'center',
  },
  header: {
    fontSize: normalize(18),
    fontWeight: '600',
    lineHeight: normalize(21.48),
    color: '#E9E9E9',
  },
  title: {
    fontSize: normalize(15),
    fontWeight: '600',
    lineHeight: normalize(17.9),
    color: 'white',
  },
  logoutStyle: {
    fontSize: normalize(20),
    fontWeight: '600',
    lineHeight: normalize(23.87),
    color: 'white',
  },
});

export default PrivacyScreen;