document

import * as ImagePicker from 'expo-image-picker';

import {
  ActivityIndicator,
  Alert,
  Dimensions,
  FlatList,
  Image,
  ImageBackground,
  KeyboardAvoidingView,
  Modal,
  PermissionsAndroid,
  Platform,
  StyleSheet,
  Text,
  TextInput,
  TouchableOpacity,
  TouchableWithoutFeedback,
  View,
} from 'react-native';
import React, {useEffect, useState} from 'react';
import {screenNames, urls} from '../../../constants';

import AsyncStorage from '@react-native-async-storage/async-storage';
import {Button} from 'react-native-paper';
import {Camera} from 'expo-camera';
// import CameraRoll from '@react-native-community/cameraroll';
import Colors from '../../../themes/colors';
import DocumentPicker from 'react-native-document-picker';
import FileViewer from 'react-native-file-viewer';
import RNFS from 'react-native-fs';
import RNFetchBlob from 'rn-fetch-blob';
import TopBarSignup from '../../../custom_components/TopBarSignup';
import {doc} from 'prettier';
import {goBack} from '../../../utils/NavigationService';
import {navigate} from '../../../utils/NavigationService';

/* const value = [
  {
    img: require('../../../assets/bill1.png'),
    billname: 'abcd',
    billtype: 'Society Maintenance',
  },
  {
    img: require('../../../assets/aadhar.png'),
    billname: 'xyzz',
    billtype: 'Tax Bill',
  },
]; */

const WIDTH = Dimensions.get('window').width;

const CameraModule = props => {
  const [cameraRef, setCameraRef] = useState(null);
  const [type, setType] = useState(Camera.Constants.Type.back);
  return (
    <Modal
      animationType="slide"
      transparent={true}
      visible={true}
      onRequestClose={() => {
        props.setModalVisible();
      }}>
      <Camera
        style={{flex: 1}}
        ratio="16:9"
        flashMode={Camera.Constants.FlashMode.on}
        type={type}
        ref={ref => {
          setCameraRef(ref);
        }}>
        <View
          style={{
            flex: 1,
            backgroundColor: 'transparent',
            justifyContent: 'flex-end',
          }}>
          <View
            style={{
              backgroundColor: 'black',
              flexDirection: 'row',
              alignItems: 'center',
              justifyContent: 'space-between',
            }}>
            <Button
              style={{marginLeft: 12}}
              mode="outlined"
              color="white"
              onPress={() => {
                props.setModalVisible();
              }}>
              Close
            </Button>
            <TouchableOpacity
              onPress={async () => {
                if (cameraRef) {
                  const options = {
                    quality: 0.3,
                  };
                  let photo = await cameraRef.takePictureAsync(options);
                  props.setImage(photo);
                  // console.log(photo);
                  props.setMessage();
                  props.setModalVisible();
                }
              }}>
              <View
                style={{
                  borderWidth: 2,
                  borderRadius: 50,
                  borderColor: 'white',
                  height: 50,
                  width: 50,
                  display: 'flex',
                  justifyContent: 'center',
                  alignItems: 'center',
                  marginBottom: 16,
                  marginTop: 16,
                }}>
                <View
                  style={{
                    borderWidth: 2,
                    borderRadius: 50,
                    borderColor: 'white',
                    height: 40,
                    width: 40,
                    backgroundColor: 'white',
                  }}></View>
              </View>
            </TouchableOpacity>
            <Button
              style={{marginRight: 12}}
              mode="outlined"
              color="white"
              onPress={() => {
                setType(
                  type === Camera.Constants.Type.back
                    ? Camera.Constants.Type.front
                    : Camera.Constants.Type.back,
                );
              }}>
              {type === Camera.Constants.Type.back ? 'Front' : 'Back '}
            </Button>
          </View>
        </View>
      </Camera>
    </Modal>
  );
};
function Document({route, navigation}) {
  const [modalVisible, setModalVisible] = useState(false);

  const [image, setImage] = useState(null);
  const [camera, setShowCamera] = useState(false);
  const [hasPermission, setHasPermission] = useState(null);
  const [value, setValue] = useState([]);
  const [save, setSave] = useState(false);
  const [isLoading, setLoading] = useState(null);
  const [documentMessage, setDocumentMessage] = useState('');
  const [isUploading, setIsUploading] = useState(null);
  // const [imageMessage, setImageMessage] = useState('');
  const [textMsg, setTextMsg] = useState('');
  const [profilePicVisible, setProfilePicVisible] = useState(false);
  const [docImage, setDocImage] = useState(null);
  const [delModalVis, setDelModalVis] = useState(false);
  const [documentId, setDocumentId] = useState(false);
  const [documentUri, setDocumentUri] = useState('');
  const [documentType, setDocumentType] = useState('');
  const [documentName, setDocumentName] = useState('');
  const [documentMsg, setDocumentMsg] = useState('');
  const [loading, setloading] = useState(false);
  const [roles, setRoles] = useState('');
  const [txt, setTxt] = useState('');

  let rowData = route.params;

  async function _deleteDocument() {
    setDelModalVis(false);
    const token = `Bearer ${await AsyncStorage.getItem('token')}`;

    const response = await fetch(
      `${urls.baseUrl}deleteDocument?documentId=${documentId}`,
      {
        method: 'GET',
        headers: {
          'Content-Type': 'application/json',
          Authorization: token,
          referrer:'https://easerent.com'
        },
        // body: JSON.stringify({
        //     documentId
        // }),
      },
    )
      .then(response => response.json())
      .then(responseJson => {
        console.log(documentId, 'documentId');
        if (responseJson.Status == '400') {
          alert(responseJson.message);
        } else if (responseJson.Status == '200') {
          info();
        }
      })
      .catch(err => console.error(err));
    setLoading(false);
  }

  useEffect(() => {
    (async () => {
      const {status} = await Camera.requestPermissionsAsync();
      setHasPermission(status === 'granted');
      if (Platform.OS !== 'web') {
        const {status} =
          await ImagePicker.requestMediaLibraryPermissionsAsync();
        if (status !== 'granted') {
          alert('Sorry, we need camera roll permissions to make this work!');
        }
      }
    })();
    info();
  }, []);

  useEffect(() => {
    info();
  }, []);

  async function info() {
    try {
      setLoading(true);
      const token = `Bearer ${await AsyncStorage.getItem('token')}`;
      const role = await AsyncStorage.getItem('role');
      setRoles(role);

      const response = await fetch(
        `${urls.baseUrl}getDocumentByPropertyId?documentType=property&propertyId=${rowData.propertyId}`,
        {
          method: 'GET',
          headers: {
            'Content-Type': 'application/json',
            Authorization: token,
            referrer:'https://easerent.com'
          },
        },
      );
      const json = await response.json();
      setValue(json.data.Document);
      setLoading(false);
      //console.log('Document', json.data);
    } catch (e) {
      setValue([]);
      setLoading(false);
      // console.log(e, value);
    }
  }

  async function saveDocument(docData) {
    //const checkPermission = async () => {

    // Function to check the platform
    // If iOS then start downloading
    // If Android then ask for permission
    // const getExtention = filename => {
    //   // To get the file extension
    //   return /[.]/.exec(filename) ? /[^.]+$/.exec(filename) : undefined;
    // };
    console.log(docData, 'doc in out downloading');
    const downloadDoc = doc => {
      // Main function to download the image
      setLoading(true);
      // Image URL which we want to download
      console.log(doc, 'doc in downloading');
      let docUrl = doc.filePath;
      let docName = doc.filePath.slice(doc.filePath.lastIndexOf('/') + 1);
      // let docExt = doc.filePath.slice(doc.filePath.lastIndexOf('.')+1) ;
      // Getting the extention of the file
      // let ext = getExtention(image_URL);
      // ext = '.' + ext[0];
      // Get config and fs from RNFetchBlob
      // config: To pass the downloading related options
      // fs: Directory path where we want our image to download

      const {config, fs} = RNFetchBlob;
      let downloads = fs.dirs.DownloadDir;
      let options = {
        fileCache: true,
        addAndroidDownloads: {
          // Related to the Android only
          useDownloadManager: true,
          notification: true,
          path: downloads + '/' + docName,
          // description: 'Image',
        },
      };
      config(options)
        .fetch('GET', docUrl)
        .then(res => {
          // Showing alert after successful downloading
          console.log('res -> ', JSON.stringify(res));
          setLoading(false);
          alert('Document Downloaded Successfully.');
        })
        .catch(() => {
          console.log(e);
          setLoading(false);
        });
    };

    if (Platform.OS === 'ios') {
      return;
    }
    try {
      // console.log(docImage);
      const granted = await PermissionsAndroid.request(
        PermissionsAndroid.PERMISSIONS.WRITE_EXTERNAL_STORAGE,
        {
          title: 'Storage Permission Required',
          message: 'App needs access to your storage to download Photos',
        },
      );
      if (granted === PermissionsAndroid.RESULTS.GRANTED) {
        // Once user grant the permission start downloading
        //console.log('Storage Permission Granted.');
        //downloadDoc();
        //const saveRes = await CameraRoll.save(docImage, 'photo');
        // console.log('Storage Permission Granted.');
        downloadDoc(docData);
      } else {
        // If permission denied then show alert
        Alert.alert('Storage Permission Not Granted');
      }
      // console.log(granted);
    } catch (err) {
      // To handle permission related exception
      // console.warn('err',err);
    }

    /*  try {
          //console.log(image);
          
        } catch (e) {
          console.log(e);
        } */
  }

  const _uploadDoc = async () => {
    if (documentUri == '') {
      // setImageMessage('Please select or capture image.');
      setDocumentMsg('Please select document.');
      return;
    }
    if (txt == '') {
      setTextMsg('Please enter document name.');
      return;
    }

    try {
      setIsUploading(true);
      const token = `Bearer ${await AsyncStorage.getItem('token')}`;
      const formData = new FormData();
      formData.append('comment', txt);
      formData.append('docType', 'property');
      formData.append('propertyId', rowData.propertyId);
      formData.append('userId', rowData.userId);
      formData.append('file', {
        name: documentName,
        type: documentType,
        uri:
          Platform.OS === 'android'
            ? documentUri
            : documentUri.replace('file:///', ''),
      });
      console.log(formData, 'formdata from doc upload');

      const response = await fetch(`${urls.baseUrl}uploadFile`, {
        method: 'POST',
        headers: {
          'Content-Type': 'multipart/form-data',
          Authorization: token,
          referrer:'https://easerent.com'
        },
        body: formData,
      });
      console.log(response, 'json from doc upload');

      const json = await response.json();
      if (json.status == 200) {
        setModalVisible(!modalVisible);
        //alert('Upload Successful');
        setDocumentUri('');
        setDocumentMsg('Please select document.');
      }
      info(); // refreshing list of doc after closing the upload modal
      setIsUploading(false);
      setTxt('');
      // setImage(null);
      console.log(json, 'json from doc upload');
    } catch (err) {
      setIsUploading(false);
      alert('Failed to Upload..!!')
      console.error(err, 'err from doc upload');
    }
  };

  if (hasPermission === null) {
    return <View />;
  }
  if (hasPermission === false) {
    return <Text>No access to camera</Text>;
  }

  const onCloseModal = () => {
    setModalVisible(!modalVisible);
    // setImageMessage('');
    setDocumentName('');
    setDocumentMsg('');
    setDocumentUri('');
    setDocumentType('');
    // setImage(null);
    setTxt('');
  };

  const openProfile = doc => {
    const url = doc.filePath;
    const documentType = doc.documentFormat.slice(
      0,
      doc.documentFormat.indexOf('/'),
    );
    // Feel free to change main path according to your requirements.
    // IMPORTANT: A file extension is always required on iOS.
    // You might encounter issues if the file extension isn't included
    // or if the extension doesn't match the mime type of the file.
    console.log(documentType == 'image', documentType, 'type');
    if (documentType == 'image') {
      setProfilePicVisible(true);
      setDocImage(doc.filePath);
    } else {
      const localFile = `${RNFS.DocumentDirectoryPath}/temporaryfile${url.slice(
        url.lastIndexOf('.'),
      )}`;
      const options = {
        fromUrl: url,
        toFile: localFile,
      };
      RNFS.downloadFile(options)
        .promise.then(() => FileViewer.open(localFile))
        .then(() => {
          console.log('Success. !!!!!!!!!!');
          // success
        })
        .catch(error => {
          console.log('Error. !!!!!!!!!!');
          // error
        });
    }
  };

  const pickImage = async () => {
    try {
      const res = await DocumentPicker.pick({
        type: [
          DocumentPicker.types.images,
          DocumentPicker.types.pdf,
          DocumentPicker.types.doc,
          DocumentPicker.types.docx,
        ],
      });
      console.log(res, 'setting doc props outside if');

      if (res[0] != null) {
        console.log(res, 'setting doc props inside if');
        setDocumentUri(res[0].uri);
        setDocumentType(res[0].type);
        setDocumentName(res[0].name);
        setDocumentMsg('Document Selected');
      }
    } catch (err) {
      if (DocumentPicker.isCancel(err)) {
        // User cancelled the picker, exit any dialogs or menus and move on
        setDocumentMsg('Unable to select document. \n please try again !!!');
      } else {
        console.log(err, 'Error from Document selection.');
      }
    }
    // let result = await ImagePicker.launchImageLibraryAsync({
    //   mediaTypes: ImagePicker.MediaTypeOptions.All,
    //   allowsEditing: true,
    //   aspect: [4, 3],
    //   quality: 1,
    // });
    // // console.log(result);
    // if (!result.cancelled) {
    //   setImage(result.uri);
    //   setImageMessage('Image selected');
    // }
  };

  const trash = function (docId, propertyId) {
    setDelModalVis(true);
    console.log(docId, 'docId');

    setDocumentId(docId);
  };

  return (
    <>
      <TopBarSignup
        onBackButtonClick={() => {
          goBack();
        }}
        topBarTextTitle={'Document'}
        showDrawer={false}
      />
      <View style={styles.container}>
        <View
          style={{
            flexDirection: 'column',
            //backgroundColor: '#fff',
            height: 130,
            // shadowColor: 'black',
            // shadowOpacity: 0.26,
            // shadowOffset: { width: 0, height: 2},
            // shadowRadius: 10,
            // elevation: 3,
            // backgroundColor: 'white'
          }}>
         <View style={{flexDirection: 'row'}}>
            {rowData.coverImage !== null && rowData.coverImage !== '' ? (
              <View
                style={{
                  height: 100,
                  width: 100,
                  marginLeft: 30,
                  marginTop: 30,
                  borderRadius: 30 / 2,
                  overflow: 'hidden',
                  elevation: 10,
                }}>
                <ImageBackground
                  source={{uri: rowData.coverImage}}
                  style={styles.image}
                  resizeMode={'cover'}
                  onPress={() =>
                    navigate(screenNames.PropertyTenantScreen)
                  }></ImageBackground>
              </View>
            ) : (
              <View
                style={{
                  height: 100,
                  width: 100,
                  marginLeft: 30,
                  marginTop: 30,
                  borderRadius: 30 / 2,
                  overflow: 'hidden',
                  elevation: 10,
                }}>
                <ImageBackground
                  source={require('../../../assets/house_villa_one.png')}
                  style={styles.image}
                  resizeMode={'cover'}></ImageBackground>
              </View>
            )}

            <View style={{flexDirection: 'column'}}>
              <View style={{flexDirection: 'row'}}>
                <Text style={styles.title}>{rowData.propertyName}</Text>
              </View>

              <View style={{flexDirection: 'row', marginTop: 5}}>
                <Image
                  source={require('../../../assets/placeholder.png')}
                  style={{height: 20, width: 20, marginLeft: 10}}
                  resizeMode="contain"
                />
                <Text
                  style={{
                    width: '60%',
                    fontSize: 13,
                    marginLeft: 5,
                    color: Colors.colorText,
                    textAlign: 'left',
                  }}>
                  {rowData.addressLine1 + ', ' + rowData.addressLine2 + ', ' + rowData.city + ', ' + rowData.state + ', ' + rowData.country}
                </Text>
              </View>
            </View>
          </View>
        </View>

        <Modal
          animationType="fade"
          transparent={true}
          visible={delModalVis}
          onRequestClose={() => {
            setDelModalVis(!setDelModalVis);
          }}>
          <TouchableWithoutFeedback onPress={() => setDelModalVis(false)}>
            <View style={styles.centeredView}>
              <TouchableWithoutFeedback>
                <View style={styles.delModView}>
                  <Image
                    source={require('../../../assets/x-mark.png')}
                    style={{
                      width: 65,
                      height: 65,
                      marginTop: 30,
                      marginBottom: 15,
                    }}
                  />
                  <View style={{marginBottom: 10, width: '75%'}}>
                    <Text
                      style={{
                        fontWeight: 'bold',
                        textAlign: 'center',
                        fontSize: 15,
                      }}>
                      Are you sure you want to delete?
                    </Text>
                  </View>
                  <View style={{flexDirection: 'row', marginVertical: 25}}>
                    <TouchableOpacity
                      style={styles.delBtn}
                      onPress={() => _deleteDocument()}>
                      <Text style={styles.delbtnTxt}>Yes</Text>
                    </TouchableOpacity>
                    <TouchableOpacity
                      style={styles.delBtn}
                      onPress={() => setDelModalVis(false)}>
                      <Text style={styles.delbtnTxt}>No</Text>
                    </TouchableOpacity>
                  </View>
                </View>
              </TouchableWithoutFeedback>
            </View>
          </TouchableWithoutFeedback>
        </Modal>

        <Modal
          animationType="none"
          transparent={true}
          visible={profilePicVisible}
          onRequestClose={() => {
            setProfilePicVisible(!profilePicVisible);
          }}>
          <TouchableWithoutFeedback onPress={() => setProfilePicVisible(false)}>
            <View style={styles.centeredView}>
              <TouchableWithoutFeedback>
                <Image
                  source={{uri: docImage}}
                  style={{width: WIDTH - 20, height: WIDTH - 20}}
                  resizeMode="cover"
                />
              </TouchableWithoutFeedback>
            </View>
          </TouchableWithoutFeedback>
        </Modal>

        <Modal
          statusBarTranslucent={true}
          style={{width: '100%', height: '100%', padding: 0, margin: 0}}
          animationType="slide"
          transparent={true}
          visible={modalVisible}
          onRequestClose={() => {
            // Alert.alert('Modal has been closed.');
            setModalVisible(!modalVisible);
          }}>
          <KeyboardAvoidingView
            style={styles.centeredView}
            behavior={Platform.OS === 'ios' ? 'padding' : 'height'}>
            <View style={styles.modalView}>
              <View style={{flexDirection: 'row'}}>
                <Text style={styles.modalText}>Add Attachment</Text>
                <TouchableOpacity onPress={onCloseModal}>
                  <Image
                    source={require('../../../assets/close_modal.png')}
                    style={{height: 18, width: 18, tintColor: '#808080'}}
                    resizeMode="contain"
                  />
                </TouchableOpacity>
              </View>
              <View
                style={{
                  flexDirection: 'row',
                  alignItems: 'center',
                  marginTop: 10,
                  marginBottom: 10,
                }}>
                <View style={{flex: 1, height: 1, backgroundColor: '#ccc'}} />
              </View>
              <View
                flexDirection="row"
                style={{
                  alignItems: 'center',
                }}>
                <TouchableOpacity
                  style={styles.imgcontainer}
                  onPress={() => {
                    setShowCamera(true);
                  }}>
                  <Image source={require('../../../assets/pic.png')} />
                </TouchableOpacity>
                <TouchableOpacity
                  style={styles.imgcontainer}
                  onPress={pickImage}>
                  <Image source={require('../../../assets/phone.png')} />
                </TouchableOpacity>
              </View>
              {documentMsg !== '' ? (
                <View style={{height: 20, alignItems: 'center', marginTop: 10}}>
                  <Text
                    style={{
                      fontSize: 10,
                      color: documentMsg != '' ? 'blue' : 'red',
                    }}>
                    {documentMsg}
                  </Text>
                </View>
              ) : (
                <View style={{height: 20, marginTop: 10}} />
              )}
              <View style={{flexDirection: 'row', marginBottom: 5}}>
                <TextInput
                  style={styles.txtm}
                  placeholder="Enter Document name"
                  value={txt}
                  onChangeText={value => setTxt(value)}
                />
                <Text
                  style={{
                    color: 'red',
                    fontSize: 30,
                    marginStart: 10,
                    marginTop: 10,
                  }}>
                  *
                </Text>
              </View>
              {textMsg !== '' ? (
                <View
                  style={{
                    height: 20,
                    alignItems: 'center',
                    marginTop: 2,
                    marginBottom: 10,
                  }}>
                  <Text style={{fontSize: 10, color: 'red'}}>{textMsg}</Text>
                </View>
              ) : (
                <View style={{height: 0, marginTop: 10}} />
              )}
              <View
                style={{
                  flexDirection: 'row',
                  //alignItems: 'center',
                  marginBottom: 10,
                }}>
                <TouchableOpacity
                  style={{
                    backgroundColor: '#1B6C9A',
                    padding: 10,
                    justifyContent: 'center',
                    paddingHorizontal: 25,
                    borderRadius: 10,
                    alignSelf: 'center',
                  }}
                  onPress={_uploadDoc}>
                  <Text style={styles.textStyle}>Upload </Text>
                </TouchableOpacity>
                {isUploading == true && (
                  <ActivityIndicator
                    size="small"
                    color="blue"
                    style={{position: 'absolute', left: 110, top: 10}}
                  />
                )}
              </View>
              <TouchableOpacity
                style={[styles.button, styles.buttonClose]}
                onPress={onCloseModal}>
                <Text style={styles.textStyle}>close </Text>
              </TouchableOpacity>
            </View>
          </KeyboardAvoidingView>
        </Modal>

        {camera && (
          <CameraModule
            showModal={camera}
            setMessage={() => setDocumentMsg('Image selected')}
            setModalVisible={() => setShowCamera(false)}
            setImage={result => {
              console.log(result);
              setDocumentType(
                'image/' + result.uri.slice(result.uri.lastIndexOf('.') + 1),
              );
              setDocumentName(
                result.uri.slice(result.uri.lastIndexOf('/') + 1),
              );
              setDocumentUri(result.uri);
            }}
          />
        )}

      <View style={{overflow: 'hidden', paddingBottom: 5}}>
          <View
            style={{
              backgroundColor: '#fff',
              width: '100%',
              height: 30,
              shadowColor: '#000',
              shadowOffset: {width: 1, height: 1},
              shadowOpacity: 0.8,
              shadowRadius: 3,
              elevation: 3,
            }}
          />
        </View>

          {roles === 'Owner' || roles === 'Property Manager' ? (
            <TouchableOpacity
              onPress={() => setModalVisible(true)}
              style={{
                backgroundColor: '#2C9037',
                borderRadius: 25,
                width: 50,
                height: 50,
                justifyContent: 'center',
                alignItems: 'center',
                alignSelf:'flex-end',
                position:'absolute',
                bottom: 30,
                right:30,
                elevation: 5,
              }}>
              <Text style={styles.ortxt}>+</Text>
            </TouchableOpacity>
          ) : (
            // <View
            //   style={{
            //     width: 50,
            //     height: 50,
            //     justifyContent: 'center',
            //   }}>
            //   <View style={{height: 1, backgroundColor: '#ccc'}} />
            // </View>
            <TouchableOpacity
              onPress={() => setModalVisible(true)}
              style={{
                backgroundColor: '#2C9037',
                borderRadius: 25,
                width: 50,
                height: 50,
                justifyContent: 'center',
                alignItems: 'center',
                alignSelf:'flex-end',
                position:'absolute',
                bottom: 30,
                right:30,
                elevation: 5,
              }}>
              <Text style={styles.ortxt}>+</Text>
            </TouchableOpacity>
          )}
       
        {/* <View style={styles.orContanier}>
          <View style={styles.orstyle} />
          {roles === 'Owner' || roles === 'Property Manager' ? (
            <TouchableOpacity
              onPress={() =>
                navigate(screenNames.Billinfo, {
                  rowData,
                  editAble: true,
                  reqType: 'addBill',
                })
              }
              style={{
                backgroundColor: '#2C9037',
                borderRadius: 25,
                width: 50,
                height: 50,
                justifyContent: 'center',
                alignItems: 'center',
                alignSelf:'flex-end',
                position:'absolute',
                bottom: 30,
                right:30,
                elevation: 5,
              }}>
              <Text style={styles.ortxt}>+</Text>
            </TouchableOpacity>
          ) : (
            <View
              style={{
                width: 50,
                height: 50,
                justifyContent: 'center',
              }}>
              <View style={{height: 1, backgroundColor: '#ccc'}} />
            </View>
          )}
        
          <View style={{flex: 0.1, height: 1, backgroundColor: '#ccc'}} />
        </View> */}


        {/* <View
          style={{
            flexDirection: 'row',
            paddingStart: 20,
            justifyContent: 'space-between',
          }}>
          <Text style={[styles.txt, {flex: 0.9}]}>Document</Text>
          <Text style={[styles.txt]}>Document Comment</Text>
          <Text style={{...styles.txt}}> Action</Text>
        </View>
        <View
          style={{
            flexDirection: 'row',
            alignItems: 'center',
            marginTop: 15,
            marginBottom: 0,
          }}>
          <View style={{flex: 1, height: 1, backgroundColor: '#ccc'}} />
        </View> */}
        {/* Image with edit preview option */}

        {isLoading === true ? (
          <ActivityIndicator
            size="small"
            color="blue"
            style={{marginTop: 30}}
          />
        ) : value[0] == null ? (
          <View
            style={{
              height: 200,
              width: '100%',
              justifyContent: 'center',
              alignItems: 'center',
              //backgroundColor: 'black',
            }}>
            <Text
              style={{
                alignSelf: 'center',
                fontSize: 13,
                //fontFamily: 'Montserrat-Bold',
              }}>
              {' '}
              No Documents available{' '}
            </Text>
          </View>
        ) : (
          <View style={{ paddingTop: 10}}>
            <FlatList
              data={value}
              showsVerticalScrollIndicator={false}
              ItemSeparatorComponent={() => (
                <View
                  style={{
                    flexDirection: 'row',
                    alignItems: 'center',
                    marginVertical: 10,
                  }}>
                  <View style={{flex: 1, height: 1, backgroundColor: '#ccc'}} />
                </View>
              )}
              renderItem={({item: docData}) => {
                let typ = docData.documentFormat.slice(
                  0,
                  docData.documentFormat.indexOf('/'),
                );
                // console.log(docData);
                return (
                  <View
                    style={{
                      flexDirection: 'row',
                      alignItems: 'center',
                      padding: 5,
                      width: Dimensions.get('window').width - 15,
                      height: 60,
                      backgroundColor: 'white',
                      elevation: 5,
                      overflow: 'hidden',
                      borderRadius: 10,
                      marginVertical: 5,
                      alignSelf: 'center',
                      shadowColor: '#000',
                      // shadowOffset: {
                      //   width: 0,
                      //   height: 1,
                      // },
                      shadowOpacity: 0.25,
                      shadowRadius: 3.84,
                    }}>

                      
                    <TouchableOpacity
                      style={{
                        marginStart: 15,
                        marginEnd: 5,
                        height: 50,
                        width: 50,
                        borderRadius: 25,
                        overflow: 'hidden',
                      }}
                      onPress={() => openProfile(docData)}>
                      <Image
                        source={
                          typ == 'image'
                            ? {uri: docData.filePath}
                            : require('../../../assets/fe_document.png')
                        }
                        style={{height: 50, width: 50, borderRadius: 25}}
                        resizeMode="cover"
                      />
                    </TouchableOpacity>
                    <Text style={{flex: 0.6, marginLeft: 10}}>
                      {docData.comment}
                    </Text>
                    {loading === true ? (
                      <ActivityIndicator size="small" color="blue" />
                    ) : (
                      <View
                        style={{
                          flex: 1,
                          flexDirection: 'row',
                          marginStart: 25,
                        }}>
                        <TouchableOpacity
                          style={{
                            backgroundColor: '#1B6C9A',
                            width: 40,
                            height: 40,
                            borderRadius: 20,
                            justifyContent: 'center',
                            alignItems: 'center',
                          }}
                          onPress={() => openProfile(docData)}>
                          <Image
                            source={require('../../../assets/eyebill.png')}
                          />
                        </TouchableOpacity>
                        <TouchableOpacity
                          onPress={() => {
                            saveDocument(docData);
                          }}
                          style={{
                            backgroundColor: '#EF983A',
                            width: 40,
                            height: 40,
                            borderRadius: 20,
                            justifyContent: 'center',
                            alignItems: 'center',
                            width: 40,
                            marginHorizontal: 5,
                          }}>
                          <Image source={require('../../../assets/down.png')} />
                        </TouchableOpacity>
                        <TouchableOpacity
                          onPress={() =>
                            trash(docData.documentId, docData.propertyId)
                          }
                          style={{
                            backgroundColor: '#D05050',
                            dth: 40,
                            height: 40,
                            width: 40,
                            borderRadius: 20,
                            justifyContent: 'center',
                            alignItems: 'center',
                          }}>
                          <Image
                            source={require('../../../assets/trashbill.png')}
                          />
                        </TouchableOpacity>
                      </View>
                    )}
                  </View>
                );
              }}
            />
          </View>
        )}
      </View>
    </>
  );
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    backgroundColor: '#fff',
  },
  image: {
    height: 100,
    width: 100,
    borderColor: 'transparent',
  },
  title: {
    width: '80%',
    marginStart: 15,
    marginTop: 30,
    fontWeight: 'bold',
    fontSize: 16,
    color: '#000000',
  },
  ortxt: {
    color: '#fff',
    fontSize: 40,
    marginTop: -4,
  },
  orstyle: {
    flex: 0.9,
    height: 1,
    backgroundColor: '#ccc',
  },
  orContanier: {
    flexDirection: 'row',
    alignItems: 'center',
    marginTop: 20,
  },
  txt: {
    flex: 1,
    fontSize: 13,
    // fontWeight: 'bold',
    fontFamily: 'Montserrat-Bold',
  },
  centeredView: {
    flex: 1,
    justifyContent: 'center',
    alignItems: 'center',
    // marginTop: 22,
    width: '100%',
    height: '100%',
    backgroundColor: '#000000aa',
  },
  modalView: {
    margin: 20,
    backgroundColor: 'white',
    borderRadius: 20,
    padding: 20,
    // height: '60%',
    width: '80%',
    alignItems: 'center',
    shadowColor: '#000',
    shadowOffset: {
      width: 0,
      height: 2,
    },
    shadowOpacity: 0.25,
    shadowRadius: 4,
    elevation: 5,
  },
  button: {
    borderRadius: 10,
    padding: 10,
    elevation: 2,
    paddingHorizontal: 30,
  },
  buttonOpen: {
    backgroundColor: '#F194FF',
  },
  buttonClose: {
    backgroundColor: '#F4B26A',
  },
  textStyle: {
    color: 'white',
    // fontWeight: 'bold',
    fontFamily: 'Montserrat-Bold',
    textAlign: 'center',
  },
  modalText: {
    textAlign: 'center',
    // fontWeight: 'bold',
    fontFamily: 'Montserrat-Bold',
    fontSize: 18,
    flex: 1,
  },
  txtm: {
    borderWidth: 1,
    width: 150,
    height: 40,
    marginTop: 10,
    marginStart: 10,
    flex: 0.7,
  },
  imgcontainer: {
    backgroundColor: '#E3DBDB',
    justifyContent: 'center',
    alignItems: 'center',
    borderRadius: 35,
    marginTop: 20,
    height: 70,
    width: 70,
    marginHorizontal: 10,
  },
  delBtn: {
    height: 30,
    width: 65,
    borderRadius: 15,
    marginHorizontal: 20,
    backgroundColor: '#1B6C9A',
    alignItems: 'center',
    justifyContent: 'center',
  },
  delbtnTxt: {
    fontSize: 17,
    color: 'white',
    fontFamily: 'Montserrat-Bold',
    // fontWeight: 'bold',
  },
  delModView: {
    width: '75%',
    height: 240,
    backgroundColor: 'white',
    alignItems: 'center',
    borderRadius: 30,
  },
});

export default Document;