import {useNavigation} from '@react-navigation/core';
import React from 'react';
import {
  Alert,
  Image,
  Linking,
  StyleSheet,
  Text,
  TouchableOpacity,
  View,
} from 'react-native';
import InAppBrowser from 'react-native-inappbrowser-reborn';
import {TAGG_PURPLE} from '../../constants';
import {COMMUNITY_GUIDELINES, PRIVACY_POLICY} from '../../constants/api';
import {ERROR_ATTEMPT_EDIT_SP} from '../../constants/strings';
import {normalize, SCREEN_WIDTH} from '../../utils/layouts';

type SettingsCellProps = {
  title: string;
  preimage: number;
  postimage: number;
  isPrivate?: boolean;
  suggested_people_linked?: number;
};

const SettingsCell: React.FC<SettingsCellProps> = ({
  title,
  preimage,
  postimage,
  isPrivate,
  suggested_people_linked,
}) => {
  const navigation = useNavigation();
  const goToUpdateSPProfile = () => {
    if (suggested_people_linked === 0) {
      Alert.alert(ERROR_ATTEMPT_EDIT_SP);
    } else {
      navigateTo('UpdateSPPicture', {
        editing: true,
      });
    }
  };
  const getActions = (type: string) => {
    switch (type) {
      case 'Account Type':
        navigateTo('AccountTypeScreen', {});
        break;
      case 'Blocked Accounts':
        //TODO:
        break;
      case 'Suggested People Profile':
        goToUpdateSPProfile();
        break;
      case 'Privacy':
        navigateTo('PrivacyScreen', {});
        break;
      case 'Community Guidelines':
        openTaggLink(COMMUNITY_GUIDELINES);
        break;
      case 'Privacy Policy':
        openTaggLink(PRIVACY_POLICY);
        break;
      default:
        break;
    }
  };

  const openTaggLink = async (url: string) => {
    try {
      if (await InAppBrowser.isAvailable()) {
        await InAppBrowser.open(url, {
          dismissButtonStyle: 'cancel',
          preferredBarTintColor: TAGG_PURPLE,
          preferredControlTintColor: 'white',
          animated: true,
          modalPresentationStyle: 'fullScreen',
          modalTransitionStyle: 'coverVertical',
          modalEnabled: true,
          enableBarCollapsing: false,
          animations: {
            startEnter: 'slide_in_right',
            startExit: 'slide_out_left',
            endEnter: 'slide_in_left',
            endExit: 'slide_out_right',
          },
        });
      } else {
        Linking.openURL(url);
      }
    } catch (error) {
      Alert.alert(error.message);
    }
  };

  const navigateTo = (screen: string, options: object) => {
    navigation.navigate(screen, options);
  };
  return (
    <TouchableOpacity
      onPress={() => getActions(title)}
      style={styles.itemStyles}>
      <Image
        resizeMode={'cover'}
        style={styles.preImageStyles}
        source={preimage}
      />
      <View style={styles.titleContainerStyles}>
        <Text style={styles.titleStyles}>{title}</Text>
      </View>
      <View style={[styles.itemStyles, styles.subItemStyles]}>
        {title === 'Account Type' && (
          <Text style={[styles.titleStyles, styles.subtitleStyles]}>
            {isPrivate ? 'Private' : 'Public'}
          </Text>
        )}
        <Image style={styles.postImageStyles} source={postimage} />
      </View>
    </TouchableOpacity>
  );
};

const styles = StyleSheet.create({
  container: {marginHorizontal: '8%'},
  itemStyles: {
    marginTop: 36,
    flexDirection: 'row',
    justifyContent: 'flex-start',
    alignItems: 'center',
  },
  subItemStyles: {position: 'absolute', right: 0},
  preImageStyles: {width: SCREEN_WIDTH * 0.05, height: SCREEN_WIDTH * 0.05},
  postImageStyles: {width: 10, height: 17},
  titleContainerStyles: {marginLeft: '12%'},
  titleStyles: {
    fontSize: normalize(15),
    fontWeight: '600',
    lineHeight: normalize(17.9),
    color: 'white',
  },
  subtitleStyles: {color: '#C4C4C4', marginRight: 13},
  tc: {
    marginVertical: '5%',
    top: '8%',
  },
});

export default SettingsCell;