import React, { useState } from 'react';
import {
  Alert,
  FlatList,
  Modal,
  Pressable,
  SafeAreaView,
  StyleSheet,
  Text,
  View,
  Button,
} from 'react-native';
import type { SuspiciousAppInfo } from 'freerasp-react-native';
import { MalwareItem } from './MalwareItem';

export const MalwareModal: React.FC<{
  isDisabled: boolean;
  suspiciousApps: SuspiciousAppInfo[];
}> = ({ isDisabled, suspiciousApps }) => {
  const [modalVisible, setModalVisible] = useState(false);

  return (
    <>
      {!isDisabled && (
        <>
          <View style={styles.viewFlex} />
          <Button
            title={'Details'}
            color="#cf000a"
            disabled={isDisabled}
            onPress={() => setModalVisible(true)}
          />
          <View style={styles.viewWithMargin} />
        </>
      )}

      <Modal
        animationType="slide"
        transparent={true}
        visible={modalVisible}
        style={styles.modal}
        onRequestClose={() => {
          Alert.alert('Modal has been closed.');
          setModalVisible(false);
        }}>
        <View style={styles.centeredView}>
          <View style={styles.modalView}>
            <SafeAreaView style={styles.container}>
              <Text style={styles.title}>Detected malware:</Text>
              <FlatList
                data={suspiciousApps}
                renderItem={({ item }) => <MalwareItem app={item} />}
                keyExtractor={(_, index) => index.toString()}
              />
            </SafeAreaView>
            <Pressable
              style={[styles.button, styles.buttonClose]}
              onPress={() => setModalVisible(false)}>
              <Text style={styles.textStyle}>Close</Text>
            </Pressable>
          </View>
        </View>
      </Modal>
    </>
  );
};

const styles = StyleSheet.create({
  centeredView: {
    flex: 1,
    justifyContent: 'center',
    alignItems: 'center',
  },
  modalView: {
    margin: 10,
    backgroundColor: 'white',
    borderRadius: 20,
    padding: 15,
    alignItems: 'center',
    elevation: 5,
    flex: 1,
    width: '98%',
  },
  button: {
    borderRadius: 20,
    paddingHorizontal: 30,
    paddingVertical: 10,
    marginTop: 15,
  },
  buttonClose: {
    backgroundColor: '#2196F3',
  },
  textStyle: {
    color: 'white',
    fontWeight: 'bold',
    textAlign: 'center',
  },
  container: {
    flex: 1,
    width: '100%',
  },
  title: {
    fontSize: 32,
    fontWeight: 'bold',
    textAlign: 'center',
  },
  viewFlex: {
    flex: 1,
  },
  viewWithMargin: {
    margin: 5,
  },
  modal: {
    flex: 1,
  },
});