import { Button, HStack } from '@react-native-material/core';
import {
  addToWhitelist,
  getAppIcon,
  type SuspiciousAppInfo,
} from 'freerasp-react-native';
import ArrowUp from '../assets/arrow-up.png';
import ArrowDown from '../assets/arrow-down.png';
import React, { useEffect } from 'react';
import { useState } from 'react';
import { TouchableOpacity, View, Text, Image, StyleSheet } from 'react-native';
import { Colors } from './styles';

export const MalwareItem: React.FC<{ app: SuspiciousAppInfo }> = ({ app }) => {
  const [expanded, setExpanded] = useState(false);

  useEffect(() => {
    (async () => {
      // retrieve app icons for detected malware
      const appIcon = await getAppIcon(app.packageInfo.packageName);
      app.packageInfo.appIcon = appIcon;
    })();
  }, [app.packageInfo]);

  const appUninstall = async () => {
    alert('Implement yourself!');
  };

  const whitelistApp = async (packageName: string) => {
    try {
      const whitelistResponse = await addToWhitelist(packageName);
      console.info(
        `Malware Whitelist response for ${app}: ${whitelistResponse}`
      );
      alert('Restart app for whitelist to take effect');
    } catch (error: any) {
      console.info('Error while adding app to malware whitelist: ', error);
    }
  };

  return (
    <View style={styles.item}>
      <TouchableOpacity onPress={() => setExpanded(!expanded)}>
        <HStack>
          <Image
            style={styles.iconSmall}
            source={{
              uri: `data:image/png;base64,${app.packageInfo.appIcon}`,
            }}
          />
          <View style={styles.textView}>
            <Text numberOfLines={1} style={styles.titleText}>
              {app.packageInfo.appName}
            </Text>
          </View>

          <View style={styles.buttonView}>
            <Image
              source={expanded ? ArrowUp : ArrowDown}
              style={styles.expandArrow}
            />
          </View>
        </HStack>
      </TouchableOpacity>
      {expanded && (
        <>
          <View style={styles.spacer} />
          <Text style={styles.listItemTitle}>Package name:</Text>
          <Text style={styles.listItem}>{app.packageInfo.packageName}</Text>
          <Text style={styles.listItemTitle}>App name:</Text>
          <Text style={styles.listItem}>
            {app.packageInfo.appName ?? 'Not specified'}
          </Text>
          <Text style={styles.listItemTitle}>App version:</Text>
          <Text style={styles.listItem}>
            {app.packageInfo.version ?? 'Not specified'}
          </Text>
          <Text style={styles.listItemTitle}>App Icon:</Text>
          {app.packageInfo.appIcon ? (
            <Image
              style={styles.icon}
              source={{
                uri: `data:image/png;base64,${app.packageInfo.appIcon}`,
              }}
            />
          ) : (
            <Text style={styles.listItem}>Not specified</Text>
          )}
          <Text style={styles.listItemTitle}>Installer store:</Text>
          <Text style={styles.listItem}>
            {app.packageInfo.installerStore ?? 'Not specified'}
          </Text>
          <Text style={styles.listItemTitle}>Detection reason:</Text>
          <Text style={styles.listItem}>{app.reason}</Text>
          <HStack style={styles.buttonGroup}>
            <Button
              title={'Add to whitelist'}
              onPress={() => whitelistApp(app.packageInfo.packageName)}
            />
            <Button title={'Uninstall'} onPress={appUninstall} />
          </HStack>
        </>
      )}
    </View>
  );
};

const styles = StyleSheet.create({
  item: {
    backgroundColor: '#d4e4ff',
    borderRadius: 20,
    padding: 20,
    marginVertical: 8,
  },
  listItemTitle: {
    fontSize: 20,
    fontWeight: 'bold',
  },
  listItem: {
    fontSize: 16,
    paddingBottom: 5,
  },
  titleText: {
    fontSize: 20,
  },
  icon: {
    marginTop: 5,
    marginBottom: 5,
    width: 50,
    height: 50,
  },
  iconSmall: {
    width: 40,
    height: 40,
  },
  textView: {
    justifyContent: 'center',
    flex: 1,
    marginLeft: 20,
    marginRight: 30,
  },
  buttonView: {
    justifyContent: 'center',
  },
  spacer: {
    height: 15,
  },
  buttonGroup: {
    marginTop: 10,
    justifyContent: 'space-between',
  },
  expandArrow: {
    tintColor: Colors.grey,
    width: 30,
    height: 30,
  },
});