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: 'ACCOUNT',
    data: [
      {
        title: 'Suggested People Profile',
        preimage: require('../../assets/images/tagg-logo.png'),
        postimage: require('../../assets/images/settings/white-arrow.png'),
      },
      {
        title: 'Privacy',
        preimage: require('../../assets/images/settings/settings-white.png'),
        postimage: require('../../assets/images/settings/white-arrow.png'),
      },
    ],
  },
  {
    title: 'GENERAL',
    data: [
      {
        title: 'Terms of use',
        preimage: require('../../assets/images/settings/termsofuse.png'),
        postimage: require('../../assets/images/settings/white-arrow.png'),
      },
      {
        title: 'Privacy Policy',
        preimage: require('../../assets/images/settings/privacypolicy.png'),
        postimage: require('../../assets/images/settings/white-arrow.png'),
      },
    ],
  },
];

const SettingsScreen: React.FC = () => {
  const dispatch = useDispatch();
  const navigation = useNavigation();
  const {suggested_people_linked} = useSelector(
    (state: RootState) => state.user.profile,
  );
  const goToUpdateSPProfile = () => {
    if (suggested_people_linked === 0) {
      Alert.alert(ERROR_ATTEMPT_EDIT_SP);
    } else {
      // Sending undefined for updatedSelectedBadges to mark that there was no update yet
      navigateTo('UpdateSPPicture', {
        editing: true,
      });
    }
  };

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

  const getActions = (type: string) => {
    switch (type) {
      case 'Suggested People Profile':
        goToUpdateSPProfile();
        break;
      case 'Privacy':
        navigateTo('PrivacyScreen', {});
        break;
      case 'Terms of use':
        //TODO:
        break;
      case 'Privacy Policy':
        //TODO:
        break;
      default:
        break;
    }
  };

  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>
      <Image
        style={{width: 15, height: 15, position: 'absolute', right: 0}}
        source={postimage}
      />
    </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}}) => (
                <View style={{marginTop: 46}}>
                  <Text style={styles.header}>{title}</Text>
                </View>
              )}
              ListFooterComponent={() => (
                <TouchableOpacity
                  style={{marginTop: '20%', marginLeft: '12%'}}
                  onPress={() => {
                    navigation.reset({
                      index: 0,
                      routes: [{name: 'SuggestedPeople'}],
                    });
                    dispatch(logout());
                  }}>
                  <Text style={styles.logoutStyle}>Logout</Text>
                </TouchableOpacity>
              )}
            />
          </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 SettingsScreen;