function _extends() { _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }

import Moment from 'react-moment';
import React from 'react';
import Complete from '../../assets/images/complete.png';
import Delete from '../../assets/images/delete.png';
import FileImage from '../../assets/images/file.png';
import Upload from '../../assets/images/upload.png';
import Config, { Process as process } from '../../../../config/appConstants';
import "../../../shared/fileuploads/fileUpload.css";
import translateLabel from "../../../shared/translation"; // import BreadcrumbsMenu from '../../../shared/breadcrumbs/newUI';

import ServiceBreadCrumbs from "../../../shared/wizard/serviceHeader";
import { setDocs_Details, store } from '../../../../redux';
import loadingImg from '../../assets/images/loader.gif';
import Img from '../../assets/images/document.svg';
import ReactPanZoom from 'react-image-pan-zoom-rotate';
import Dialog from '@material-ui/core/Dialog';
import MuiDialogTitle from '@material-ui/core/DialogTitle';
import MuiDialogContent from '@material-ui/core/DialogContent';
import MuiDialogActions from '@material-ui/core/DialogActions';
import IconButton from '@material-ui/core/IconButton';
import CloseIcon from '@material-ui/icons/Close';
import FileViewer from 'react-file-viewer';
import { Theme, withStyles, WithStyles, Typography, Button } from '@material-ui/core';
import PreviewRedirect_ListConfig from "../../../../config/ApplicationDashBoard/PreviewRedirect-ListConfig";
import { createAPIRequest, sendAPI, createAPIRequestFileUpload } from '../../../../services/api/endPoint';
import Utils from '../../../utils';
import { withNamespaces } from 'react-i18next';
import { connect } from 'react-redux';

const useStyles = theme => ({
  root: {
    flexGrow: 1
  },
  container: {
    display: 'grid',
    gridTemplateColumns: 'repeat(12, 1fr)',
    gridGap: theme.spacing(3)
  },
  paper: {
    padding: theme.spacing(1),
    textAlign: 'center',
    color: theme.palette.text.secondary,
    whiteSpace: 'nowrap',
    marginBottom: theme.spacing(1)
  },
  card: {
    padding: theme.spacing(1),
    textAlign: 'left',
    color: theme.palette.text.secondary,
    whiteSpace: 'nowrap',
    marginBottom: theme.spacing(1)
  },
  containerCenter: {
    textAlign: 'center',
    justifyContent: 'center'
  },
  backdrop: {
    zIndex: theme.zIndex.drawer + 1,
    color: '#fff'
  },
  btnMinWidth: {
    maxWidth: '10.333333% !important'
  },
  commentBox: {
    width: 570,
    margin: 10
  },
  divider: {
    margin: theme.spacing(2, 0)
  },
  closeButton: {
    position: 'absolute',
    right: theme.spacing(1),
    top: theme.spacing(1),
    color: theme.palette.grey[500]
  }
});

const DialogTitle = withStyles(useStyles)(props => {
  const {
    children,
    classes,
    onClose,
    ...other
  } = props;
  return /*#__PURE__*/React.createElement(MuiDialogTitle, _extends({
    disableTypography: true,
    className: classes.root
  }, other), /*#__PURE__*/React.createElement(Typography, {
    variant: "h6"
  }, children), onClose ? /*#__PURE__*/React.createElement(IconButton, {
    "aria-label": "close",
    className: classes.closeButton,
    onClick: onClose
  }, /*#__PURE__*/React.createElement(CloseIcon, null)) : null);
});
const DialogContent = withStyles(theme => ({
  root: {
    padding: theme.spacing(2),
    display: 'flex',
    flexDirection: 'column',
    margin: 'auto',
    width: '100%'
  }
}))(MuiDialogContent);
const DialogActions = withStyles(theme => ({
  root: {
    margin: 0,
    padding: theme.spacing(1)
  }
}))(MuiDialogActions);

class FileEdits extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      isLoad: false,
      isDocs: false,
      allDocument: false,
      tableData: [],
      addTableData: [],
      documentType: [],
      fileNametxt: '',
      count: 0,
      errorFlag: false,
      files: [],
      uploading: false,
      uploadProgress: {},
      successfullUploaded: false,
      selectDefault: translateLabel("Select_Document_Type"),
      enableAddTable: false,
      hideSkipStepBtn: false
    };
    this.documentList = {};
    this.sendRequestCall = this.sendRequestCall.bind(this);
    this.getRowsData = this.getRowsData.bind(this);
    this.AddUploadClick = this.AddUploadClick.bind(this);
    this.deleteUploadClick = this.deleteUploadClick.bind(this);
    this.deleteUploadedFiles = this.deleteUploadedFiles.bind(this);
    this.uploadFiles = this.uploadFiles.bind(this);
    this.getUploadedDocList = this.getUploadedDocList.bind(this);
    this.getDocDetailsRowData = this.getDocDetailsRowData.bind(this);
    this.getDocumentContents = this.getDocumentContents.bind(this);
    this.navWizard = this.navWizard.bind(this);
    this.workItemdata = this.props.location.state.hasOwnProperty('workItem') ? this.props.location.state.workItem.attributes : "";
    this.workitemformdetails = store.getState().appInfo.hasOwnProperty('workitemformdetails') ? store.getState().appInfo.workitemformdetails : "";
    this.loadUploadDoc = true;
    this.mimeTypes = {
      pdf: "application/pdf",
      jpeg: "image/jpeg",
      jpg: "image/jpg",
      png: "image/png",
      doc: "application/msword",
      docx: "application/octet-stream;application/vnd.openxmlformats-officedocument.wordprocessingml.document",
      xslx: "application/vnd.openxmlformats-officedocument.spreadsheetml.sheet"
    };
  }

  async componentDidMount() {
    this.AppList = this.props.location.state.workItem.attributes;

    if (this.loadUploadDoc) {
      await this.getDocumentList();
      await this.getUploadedDocList();
      await this.getAddDocumentList();
    }
  }

  navWizard() {
    if (this.loadUploadDoc) {
      const {
        tableData
      } = this.state;

      for (let i = 0; i < tableData.length; i++) {
        if (tableData[i].isMandatory === 'Y' && (tableData[i].fileName === undefined || tableData[i].fileName === "" || tableData[i].fileName === null)) {
          this.setState({
            errorFlag: true
          });
          return;
        }
      }

      if (PreviewRedirect_ListConfig.applistdata[store.getState().appInfo.workitemformdetails.ServiceSubServices.ServiceSubID].hasOwnProperty(this.workItemdata.BusinessContext)) {
        this.props.history.push({
          pathname: PreviewRedirect_ListConfig.applistdata[store.getState().appInfo.workitemformdetails.ServiceSubServices.ServiceSubID][this.workItemdata.BusinessContext],
          state: {
            workItem: this.props.location.state.workItem
          }
        });
      } else {
        this.props.history.push({
          pathname: PreviewRedirect_ListConfig.applistdata[store.getState().appInfo.workitemformdetails.ServiceSubServices.ServiceSubID].redirectUrl,
          state: {
            workItem: this.props.location.state.workItem
          }
        });
      }
    } else {
      // const {addTableData} = this.state;
      // for (let i = 0; i < addTableData.length; i++) {
      //   console.log("adddoc",addTableData[i])
      //   console.log("1",(addTableData[i].DocumentTypeID === ""))
      //   console.log("2",(addTableData[i].documentID === "" || addTableData[i].documentID === undefined || addTableData[i].documentID === null))
      //   console.log("3",(addTableData[i].fileName === undefined || addTableData[i].fileName === "" || addTableData[i].fileUrl === undefined || addTableData[i].fileUrl === ""))
      //   if((addTableData[i].DocumentTypeID === "")  && (addTableData[i].fileName === undefined || addTableData[i].fileName === "" || addTableData[i].fileUrl === undefined || addTableData[i].fileUrl === "")){  
      //     console.log("------------",this.state.errorFlag)
      //     this.setState({ errorFlag: true });
      //     return;
      //   } else{
      //     console.log("--------->>>else blvok",this.state.errorFlag);
      //     this.setState({ errorFlag: false });
      //   }
      // }
      if (PreviewRedirect_ListConfig.applistdata[store.getState().appInfo.workitemformdetails.ServiceSubServices.ServiceSubID].hasOwnProperty(this.workItemdata.BusinessContext)) {
        this.props.history.push({
          pathname: PreviewRedirect_ListConfig.applistdata[store.getState().appInfo.workitemformdetails.ServiceSubServices.ServiceSubID][this.workItemdata.BusinessContext],
          state: {
            workItem: this.props.location.state.workItem
          }
        });
        console.log("navWizard---if", PreviewRedirect_ListConfig.applistdata[store.getState().appInfo.workitemformdetails.ServiceSubServices.ServiceSubID][this.workItemdata.BusinessContext]);
      } else {
        console.log("navWizard---else", PreviewRedirect_ListConfig.applistdata[store.getState().appInfo.workitemformdetails.ServiceSubServices.ServiceSubID].redirectUrl);
        this.props.history.push({
          pathname: PreviewRedirect_ListConfig.applistdata[store.getState().appInfo.workitemformdetails.ServiceSubServices.ServiceSubID].redirectUrl,
          state: {
            workItem: this.props.location.state.workItem
          }
        });
      }
    }
  }

  handleCloseDialog() {
    this.setState({ ...this.state,
      fileExt: "",
      fileUrl: "",
      openDialog: false
    });
  }

  // async getUploadedDocList() {
  //   var params = {
  //     ApplicationID: this.AppList.ApplicationID,
  //     ServiceID: this.workitemformdetails.ServiceSubServices.ServiceID,
  //     DocumentGroupID: 3
  //   };
  //   let response = await createAPIRequest('GET', Config.GET_DOCUMENTS, {}, params);
  //   if (response) {
  //     this.documentList = response;
  //     this.setState({ isDocs: true });
  //   } else {
  //     this.loadUploadDoc = false
  //     this.getDocumentList()
  //   }
  // }
  async getUploadedDocList() {
    console.log("2");

    if (this.props.eServiceData?.uploadMultipleApplication && this.props.eServiceData.uploadMultipleApplication && store.getState().appInfo?.storeApplicationValue) {
      this.setState({
        hidePrevBtn: true
      });
      store.getState().appInfo.storeApplicationValue.forEach(async cur => {
        await this.getUploadedDocData(cur.ApplicationID);
        console.log("2.0.1");
      });
    } else {
      console.log("2.0.2");
      await this.getUploadedDocData(this.AppList.ApplicationID);
    }
  }

  async getUploadedDocData(ApplicationID) {
    console.log("2.1");
    let params = {
      ApplicationID: ApplicationID,
      ServiceID: this.workitemformdetails.ServiceSubServices.ServiceID,
      DocumentGroupID: 3
    };
    this.setState({
      isDocs: false
    });
    let response = await createAPIRequest('GET', Config.GET_DOCUMENTS, {}, params);

    if (response) {
      if (this.props.eServiceData?.uploadMultipleApplication && this.props.eServiceData.uploadMultipleApplication && store.getState().appInfo?.storeApplicationValue) {
        this.MultipleApplciationData.push(response);
      }

      this.documentList = response;
      let AddDocs = this.state.tableData;
      const uploadedDoc = this.documentList.DocumentDetails;

      for (let index = 0; index < AddDocs.length; index++) {
        const doc = uploadedDoc.find(addDoc => addDoc.DocumentTypeID === AddDocs[index].DocumentTypeID);

        if (doc) {
          AddDocs[index] = { ...AddDocs[index],
            ...doc,
            ...{
              fileName: doc.DocumentName
            }
          };
        }
      }

      uploadedDoc.forEach(upDoc => {
        if (!AddDocs.find(addDoc => addDoc.DocumentTypeID === upDoc.DocumentTypeID)) {
          AddDocs.push({ ...upDoc,
            ...{
              DocumentTypeAr: upDoc.DocumentTypeAr,
              DocumentTypeEn: upDoc.DocumentTypeEnglish,
              //"Copy of Passport",
              fileName: upDoc.DocumentName
            }
          });
        }
      });
      this.setState({
        tableData: AddDocs,
        isDocs: true
      });
    } else {
      this.loadUploadDoc = false;
      this.getDocumentList();
    }
  }

  async getDocumentList() {
    console.log('1');
    let params = {
      ServiceSubID: this.AppList.ApplicationSubType
    };
    var api = Config.UPLOADDOCUMENTLIST;
    let response = await createAPIRequest("GET", api, {}, params);

    if (response) {
      this.setState({
        tableData: [...response.ApplicableDocDetails],
        isLoad: true
      });
      this.setState({
        count: this.state.count + this.state.tableData.length + 1
      });
    } else {
      console.log("get document list :: error");
    }
  }

  async getAddDocumentList() {
    console.log("3");
    var params = {
      "LookupInput": [{
        "LookupType": "DocumentType",
        "KeyFields": [{
          "Name": "DOCUMENT_TYPE_ID",
          "Value": "17"
        }]
      }]
    };
    let response = await createAPIRequest("POST", Config.GET_UTILITY_LOOKUP, params);

    if (response) {
      this.setState({
        documentType: [...response.LookupDataFields],
        isLoad: true,
        allDocument: true
      });
    } else {
      console.log("lookup::error");
    }
  }

  async uploadFiles() {
    var items = this.state.tableData;
    var addItems = this.state.addTableData;

    if (items.length > 0 || addItems.length > 0) {
      var fileArr = [];
      var fileContent = ""; //used to split  data:text/plain;base64, & file content 

      if (!this.loadUploadDoc) {
        for (let i = 0; i < items.length; i++) {
          if (items[i].fileName !== undefined && items[i].fileUrl !== undefined && items[i].fileUrl !== "") {
            fileContent = items[i].fileUrl.split(',')[1];
            fileArr.push({
              DocumentTypeID: items[i].DocumentTypeID,
              fileName: items[i].fileName,
              filecontent: fileContent
            });
          }
        }

        for (let j = 0; j < items.length; j++) {
          if (items[j].isMandatory === 'Y' && (items[j].fileName === undefined || items[j].fileName === "" || items[j].fileName === null)) {
            this.setState({
              errorFlag: true
            });
            return;
          } // else{


          this.setState({
            errorFlag: false
          }); // }
        } // for (let i = 0; i < addItems.length; i++) {
        //   if (addItems[i].fileName !== undefined && items[i].fileUrl !== undefined && items[i].fileUrl !== "") {
        //     fileContent = items[i].fileUrl.split(',')[1];
        //     fileArr.push({ DocumentTypeID: addItems[i].documentID, fileName: addItems[i].fileName, filecontent: fileContent });
        //   }
        // }
        // for (let i = 0; i < addItems.length; i++) {
        //   if (addItems[i].DocumentTypeID !== "" && addItems[i].fileName !== undefined && items[i].fileUrl !== undefined && items[i].fileUrl !== "") {
        //     this.setState({ errorFlag: true });
        //     return;
        //   }
        // }


        for (var l = 0; l < addItems.length; l++) {
          if (addItems[l].hasOwnProperty("fileName") && addItems[l].hasOwnProperty("documentID") && addItems[l].fileName !== undefined) {
            fileContent = addItems[l].fileUrl.split(',')[1];
            fileArr.push({
              DocumentTypeID: addItems[l].documentID,
              fileName: addItems[l].fileName,
              filecontent: fileContent,
              ServiceSubID: addItems[l].ServiceSubID
            });
          }
        }

        for (let k = 0; k < addItems.length; k++) {
          if (!addItems[k].hasOwnProperty("fileName") && !addItems[k].hasOwnProperty("documentID") && !addItems[k].documentID !== "" && !addItems[k].fileName !== "") {
            this.setState({
              errorFlag: true
            });
            return;
          }
        }
      } else if (this.loadUploadDoc) {
        for (let i = 0; i < items.length; i++) {
          if (items[i].hasOwnProperty("fileName") && items[i].hasOwnProperty("fileUrl") && items[i].fileName !== undefined) {
            fileContent = items[i].fileUrl.split(',')[1];
            fileArr.push({
              DocumentTypeID: items[i].DocumentTypeID,
              fileName: items[i].fileName,
              filecontent: fileContent,
              ServiceSubID: items[i].ServiceSubID
            });
          }
        }

        for (let i = 0; i < items.length; i++) {
          if (items[i].isMandatory === 'Y' && (items[i].fileName === undefined || items[i].fileName === "" || items[i].fileName === null)) {
            this.setState({
              errorFlag: true
            });
            return;
          }
        } // for (var j = 0; j < addItems.length; j++) {
        //   if (addItems[j].hasOwnProperty("fileName") && addItems[j].hasOwnProperty("documentID") && addItems[j].fileName !== undefined) {
        //     fileContent = addItems[j].fileUrl.split(',')[1];
        //     fileArr.push({ DocumentTypeID: addItems[j].documentID, fileName: addItems[j].fileName, filecontent: fileContent, ServiceSubID: addItems[j].ServiceSubID });
        //   }
        // }
        // for (let j = 0; j < addItems.length; j++) {
        //   if (!addItems[j].hasOwnProperty("fileName") && !addItems[j].hasOwnProperty("documentID") && !addItems[j].documentID !== "" && !addItems[j].fileName !== "") {
        //     this.setState({ errorFlag: true });
        //     return;
        //   }
        // }


        for (let j = 0; j < addItems.length; j++) {
          if (addItems[j].fileName !== undefined) {
            fileContent = addItems[j].fileUrl.split(',')[1];
            fileArr.push({
              DocumentTypeID: addItems[j].documentID,
              fileName: addItems[j].fileName,
              filecontent: fileContent
            });
          }
        }

        for (let k = 0; k < addItems.length; k++) {
          if (addItems[k].DocumentTypeID !== "" && (addItems[k].fileName !== undefined || addItems[k].fileUrl !== undefined || addItems[k].fileUrl !== "")) {
            this.setState({
              errorFlag: true
            });
            return;
          }
        }
      } else {
        for (let i = 0; i < addItems.length; i++) {
          if (addItems[i].hasOwnProperty("fileName") && addItems[i].hasOwnProperty("documentID") && addItems[i].fileName !== undefined) {
            fileContent = addItems[i].fileUrl.split(',')[1];
            fileArr.push({
              DocumentTypeID: addItems[i].documentID,
              fileName: addItems[i].fileName,
              filecontent: fileContent,
              ServiceSubID: addItems[i].ServiceSubID
            });
          }
        }

        for (let i = 0; i < addItems.length; i++) {
          if (!addItems[i].hasOwnProperty("fileName") && !addItems[i].hasOwnProperty("documentID") && !addItems[i].documentID !== "" && !addItems[i].fileName !== "") {
            this.setState({
              errorFlag: true
            });
            return;
          }
        }
      } // if(this.state.errorFlag === false){


      this.uploadFilesList = fileArr;

      if (fileArr.length > 0) {
        this.setState({
          uploadProgress: {},
          uploading: true
        });
        const promises = [];

        const fileData = file => {
          if (this.props.eServiceData?.uploadMultipleApplication && this.props.eServiceData.uploadMultipleApplication && store.getState().appInfo?.storeApplicationValue) {
            this.getMultipleApplications(file);
          } else {
            promises.push(this.sendRequestCall(file));
          }
        };

        fileArr.forEach(fileData);
        this.setState({
          responseEmpty: true
        });

        try {
          await Promise.all(promises);
          this.setState({
            successfullUploaded: true,
            uploading: false
          });
        } catch (e) {
          this.setState({
            successfullUploaded: true,
            uploading: false
          });
        }

        this.setState({
          responseEmpty: true
        });
        await this.sleep(9000);
        this.setState({
          responseEmpty: false
        });

        if (PreviewRedirect_ListConfig.applistdata[store.getState().appInfo.workitemformdetails.ServiceSubServices.ServiceSubID].hasOwnProperty(this.workItemdata.BusinessContext)) {
          this.props.history.push({
            pathname: PreviewRedirect_ListConfig.applistdata[store.getState().appInfo.workitemformdetails.ServiceSubServices.ServiceSubID][this.workItemdata.BusinessContext],
            state: {
              workItem: this.props.location.state.workItem
            }
          });
        } else {
          this.props.history.push({
            pathname: PreviewRedirect_ListConfig.applistdata[store.getState().appInfo.workitemformdetails.ServiceSubServices.ServiceSubID].redirectUrl,
            state: {
              workItem: this.props.location.state.workItem
            }
          });
        } // this.props.setDocs_Details({ ...store.getState().docs_upload_details, isDocsUploaded: true });

      } else {
        this.navWizard();
      } // }

    } else {
      this.navWizard();
    }
  } // async uploadFiles() {
  //   var uploadedFileValues = []
  //   this.state.files.forEach(value => {
  //     var obj = {};
  //     obj["filename"] = value.name;
  //     obj["filetype"] = value.type;
  //     uploadedFileValues.push(obj);
  //   })
  //   localStorage.setItem('uploadFiles', JSON.stringify(uploadedFileValues));
  //   var addItems = this.state.addTableData;
  //   var fileArr = [];
  //   var fileContent = "";//used to split  data:text/plain;base64, & file content 
  //   for (var i = 0; i < addItems.length; i++) {
  //     if (addItems[i].hasOwnProperty("fileName") && addItems[i].hasOwnProperty("documentID") && addItems[i].fileName !== undefined) {
  //       fileContent = addItems[i].fileUrl.split(',')[1];
  //       fileArr.push({ DocumentTypeID: addItems[i].documentID, fileName: addItems[i].fileName, filecontent: fileContent, ServiceSubID: addItems[i].ServiceSubID });
  //     }
  //   }
  //   for (let i = 0; i < addItems.length; i++) {
  //     if (!addItems[i].hasOwnProperty("fileName") && !addItems[i].hasOwnProperty("documentID") && !addItems[i].documentID !== "" && !addItems[i].fileName !== "") {
  //       this.setState({ errorFlag: true });
  //       return;
  //     }
  //   }
  //   if (this.state.errorFlag === false) {
  //     this.setState({ uploadProgress: {}, uploading: true });
  //     const promises = [];
  //     const fileData = (file) => {
  //       promises.push(this.sendRequestCall(file));
  //     }
  //     fileArr.forEach(fileData);
  //     try {
  //       await Promise.all(promises);
  //       this.setState({ successfullUploaded: true, uploading: false });
  //     } catch (e) {
  //       this.setState({ successfullUploaded: true, uploading: false });
  //     }
  //     this.setState({ responseEmpty: true });
  //     await this.sleep(9000);
  //     this.setState({ responseEmpty: false });
  //     if (PreviewRedirect_ListConfig.applistdata[store.getState().appInfo.workitemformdetails.ServiceSubServices.ServiceSubID].hasOwnProperty(this.workItemdata.BusinessContext)) {
  //       this.props.history.push({ pathname: PreviewRedirect_ListConfig.applistdata[store.getState().appInfo.workitemformdetails.ServiceSubServices.ServiceSubID].[this.workItemdata.BusinessContext], state: { workItem: this.props.location.state.workItem } });
  //     } else {
  //       this.props.history.push({ pathname: PreviewRedirect_ListConfig.applistdata[store.getState().appInfo.workitemformdetails.ServiceSubServices.ServiceSubID].redirectUrl, state: { workItem: this.props.location.state.workItem } });
  //     }
  //   }
  // }


  sleep(milliseconds) {
    return new Promise(resolve => setTimeout(resolve, milliseconds));
  }

  async sendRequestCall(file) {
    const formData = new FormData();
    let encType = 0;
    var loginData = store.getState().pki_details.hasOwnProperty("OrgUserValidator") ? store.getState().pki_details.OrgUserValidator : store.getState().pki_details;
    var documentGroupID = 3;
    let fileUrl = Config.FILE_UPLOAD;
    var match = fileUrl.match(/:\/\/(www[0-9]?\.)?(.[^/:]+:(\d*))/i);

    if (match[3] === process.env.REACT_APP_ENV_PORT) {
      encType = 1;
      formData.append("filename", btoa(Utils.bwEncryptHeaderAuthKey(file.fileName)));
      formData.append("content", btoa(Utils.bwEncryptHeaderAuthKey(file.filecontent)));
      formData.append("DocumentTypeID", btoa(Utils.bwEncryptHeaderAuthKey(String(file.DocumentTypeID))));
      formData.append("ApplicationID", btoa(Utils.bwEncryptHeaderAuthKey(this.AppList.ApplicationID)));
      formData.append("ServiceSubID", btoa(Utils.bwEncryptHeaderAuthKey(this.AppList.ApplicationSubType)));
      formData.append("ServiceID", btoa(Utils.bwEncryptHeaderAuthKey(this.workitemformdetails.ServiceSubServices.ServiceID)));
      formData.append("DocumentGroupID", btoa(Utils.bwEncryptHeaderAuthKey(String(documentGroupID))));
      formData.append("InvolvedPartyUniqueID", btoa(Utils.bwEncryptHeaderAuthKey(loginData.CivilNumber)));
      formData.append("CreatedBy", btoa(Utils.bwEncryptHeaderAuthKey(Utils.CreatedUserDetails().CreatedUserID)));
      formData.append("UpdatedBy", btoa(Utils.bwEncryptHeaderAuthKey(Utils.CreatedUserDetails().CreatedUserID)));
    } else {
      formData.append("filename", file.fileName);
      formData.append("content", file.filecontent);
      formData.append("DocumentTypeID", file.DocumentTypeID);
      formData.append("ApplicationID", this.AppList.ApplicationID);
      formData.append("ServiceSubID", this.AppList.ApplicationSubType);
      formData.append("ServiceID", this.workitemformdetails.ServiceSubServices.ServiceID);
      formData.append("DocumentGroupID", documentGroupID);
      formData.append("InvolvedPartyUniqueID", loginData.CivilNumber);
      formData.append("CreatedBy", Utils.CreatedUserDetails().CreatedUserID);
      formData.append("UpdatedBy", Utils.CreatedUserDetails().CreatedUserID);
    }

    for (var key of formData.entries()) {
      console.log("query", key[0] + ', ' + key[1]);
    }

    var apiPath = Config.FILE_UPLOAD;
    let response = await createAPIRequestFileUpload('post', apiPath, formData, encType);

    if (response) {} else {
      console.log("file.upload::error");
    }
  }

  fileListToArray(list) {
    const array = [];

    for (let i = 0; i < list.length; i++) {
      array.push(list.item(i));
    }

    return array;
  }

  onChange = (e, idx) => {
    const validator = Utils.fileValidator(e.target.files[0]);

    if (!validator.status) {
      alert(validator.msg);
    } else {
      let fileName = e.target.files[0].name;
      const rows = [...this.state.tableData];
      const files = e.target.files;
      const array = this.fileListToArray(files);
      this.setState(prevState => ({
        files: prevState.files.concat(array)
      }));
      let reader = new FileReader();
      let file = e.target.files[0];
      this.setState({
        fileNametxt: file
      });
      let hideSkipStep = rows.find(item => item.isMandatory === "Y");

      if (hideSkipStep) {
        this.setState({
          hideSkipStepBtn: true
        });
      }

      reader.onloadend = () => {
        rows[idx] = { ...rows[idx],
          fileName: fileName,
          file: file,
          fileUrl: reader.result
        };
        this.setState({
          tableData: [...rows]
        });
      };

      reader.readAsDataURL(file);
    }
  };
  onAddChange = (e, idx) => {
    const validator = Utils.fileValidator(e.target.files[0]);

    if (!validator.status) {
      alert(validator.msg);
    } else {
      var addItems = this.state.addTableData;
      let fileName = e.target.files[0].name;
      const rows = [...this.state.addTableData];
      let reader = new FileReader();
      let file = e.target.files[0];
      this.setState({
        fileNametxt: file
      });
      const files = e.target.files;
      const array = this.fileListToArray(files);
      this.setState(prevState => ({
        files: prevState.files.concat(array)
      }));

      for (let i = 0; i < addItems.length; i++) {
        if (!addItems[i].hasOwnProperty("fileName") && !addItems[i].hasOwnProperty("documentID") && !addItems[i].documentID !== "" && !addItems[i].fileName !== "") {
          this.setState({
            errorFlag: true
          });
          return;
        }
      }

      reader.onloadend = () => {
        rows[idx] = { ...rows[idx],
          fileName: fileName,
          file: file,
          fileUrl: reader.result
        };
        this.setState({
          addTableData: [...rows]
        });
      };

      reader.readAsDataURL(file);
      var array1 = this.state.documentType;
      this.setState({
        documentType: [...array1]
      });
    }
  };

  AddUploadClick() {
    var addRow = {
      "DocumentTypeID": ""
    };
    this.setState({
      addTableData: [...this.state.addTableData, addRow],
      enableAddTable: true,
      btnValidation: false
    });
  } // clearUploadClick = (e, idx) => {
  //   this.setState({ btnValidation: false });
  //   const rows = [...this.state.tableData];
  //   rows[idx] = {
  //     ...rows[idx],
  //     fileName: "",
  //   };
  //   this.setState({
  //     tableData: [...rows]
  //   });
  //   this.setState({ fileNametxt: '' });
  // };


  clearUploadClick = async (e, idx, ApplicationID, AlfrescoID) => {
    this.setState({
      btnValidation: false
    });
    const rows = [...this.state.tableData];

    if (rows[idx] && rows[idx].AlfrescoID) {
      let postData;
      postData = {
        ApplicationID: ApplicationID ? String(ApplicationID) : String(this.AppList?.ApplicationID),
        DocumentTypeID: rows[idx].DocumentTypeID,
        DocumentID: AlfrescoID ? AlfrescoID : rows[idx].AlfrescoID
      };
      let response = await sendAPI('PUT', Config.DELETE_DOCUMENTS, postData, {});

      if (response) {
        this.setState({
          btnValidation: false
        });
        rows[idx] = {
          DocumentTypeAr: rows[idx].DocumentTypeAr,
          DocumentTypeEn: rows[idx].DocumentTypeEn,
          //"Copy of Passport",
          DocumentTypeID: rows[idx].DocumentTypeID,
          //"2",
          ServiceSubID: rows[idx].ServiceSubID,
          //"RN01B",
          isMandatory: rows[idx].isMandatory,
          //"Y"
          fileName: ''
        };
        this.setState({
          tableData: [...rows]
        });
        this.setState({
          fileNametxt: ''
        });
      } else {
        console.log("axios:Delete_error");
      }
    } else {
      this.setState({
        btnValidation: false
      });
      const rows = [...this.state.tableData];
      rows[idx] = {
        DocumentTypeAr: rows[idx].DocumentTypeAr,
        DocumentTypeEn: rows[idx].DocumentTypeEn,
        //"Copy of Passport",
        DocumentTypeID: rows[idx].DocumentTypeID,
        //"2",
        ServiceSubID: rows[idx].ServiceSubID,
        //"RN01B",
        isMandatory: rows[idx].isMandatory,
        //"Y"
        fileName: ''
      };
      this.setState({
        tableData: [...rows]
      });
      this.setState({
        fileNametxt: ''
      });
    }
  };

  deleteUploadClick(event, idx) {
    this.setState({
      btnValidation: false
    });
    const rows = [...this.state.addTableData];
    rows.splice(idx, 1);
    this.setState({
      addTableData: [...rows]
    });
  }

  async deleteUploadedFiles(event, idx, row) {
    if (row) {
      var postData = {
        ApplicationID: this.AppList.ApplicationID,
        DocumentTypeID: row.DocumentTypeID,
        DocumentID: row.AlfrescoID
      };
      let response = await sendAPI('PUT', Config.DELETE_DOCUMENTS, postData, {});

      if (response) {
        this.getUploadedDocList();
      } else {
        console.log("axios:Delete_error");
      }
    }
  }

  handleChange(e, idx) {
    this.setState({
      btnValidation: false
    });
    let fileID = e.target.value;
    const rows = [...this.state.addTableData];
    rows[idx] = { ...rows[idx],
      documentID: fileID
    };
    this.setState({
      addTableData: [...rows]
    });
  }

  b64toBlob(dataURI) {
    var byteString = atob(dataURI.split(',')[1]);
    var ab = new ArrayBuffer(byteString.length);
    var ia = new Uint8Array(ab);

    for (var i = 0; i < byteString.length; i++) {
      ia[i] = byteString.charCodeAt(i);
    }

    return URL.createObjectURL(new Blob([ab], {
      type: 'image/jpeg'
    }));
  }

  async getDocumentContents(row, isUpload) {
    let fileExt;
    let imgType = ["image/jpeg", "image/png", "image/jpg"];

    if (!isUpload) {
      // temp prevew
      fileExt = row.file.name.split(".").pop();
      fileExt = fileExt.toLowerCase();
      const fileURL = URL.createObjectURL(row.file);

      if (imgType.includes(row.file.type)) {
        // image source
        this.setState({ ...this.state,
          fileExt: fileExt,
          fileUrl: fileURL,
          openDialog: true,
          isImgSource: true
        });
      } else {
        // other files
        this.setState({ ...this.state,
          fileExt: fileExt,
          fileUrl: row.fileUrl,
          openDialog: true,
          isImgSource: false
        });
      }
    } else {
      var fileName = row.DocumentName;
      fileExt = fileName.split(".").pop();
      fileExt = fileExt.toLowerCase();
      var params = {
        DocumentID: row.AlfrescoID,
        ApplicationID: this.AppList.ApplicationID
      };
      let response = await createAPIRequest('GET', Config.GET_DOCUMENT_CONTENT, {}, params);

      if (response) {
        let contentDocument = response;

        if (imgType.includes(this.mimeTypes[fileExt])) {
          // image source
          let baseUrl = this.mimeTypes[fileExt] + ";base64," + contentDocument.DocumentDetails[0].DocumentContent;
          window.open(baseUrl);
          const fileURL = this.b64toBlob(baseUrl);
          this.setState({ ...this.state,
            fileExt: fileExt,
            fileUrl: fileURL,
            openDialog: true,
            isImgSource: true
          });
        } else {
          this.setState({ ...this.state,
            fileExt: fileExt,
            fileUrl: this.mimeTypes[fileExt] + ";base64," + contentDocument.DocumentDetails[0].DocumentContent,
            openDialog: true,
            isImgSource: false
          });
        }
      } else {
        console.log("axios:get_documents_error");
      }
    }
  }

  previewDocument(row) {
    let imgType = ["image/jpeg", "image/png", "image/jpg"];
    let imgPanel;

    if (row.file) {
      const fileURL = URL.createObjectURL(row.file);

      if (imgType.includes(row.file.type)) {
        imgPanel = /*#__PURE__*/React.createElement(ReactPanZoom, {
          image: "https://drscdn.500px.org/photo/105738331/q%3D80_m%3D2000/v2?webp=true&sig=538a4f76f4966c84acb01426bb4a4a5e4a85b72a2c3bd64973d3a369f9653007",
          alt: "document image"
        });
        let pdfWindow = window.open("", "mypdf", "width=700px,height=600px");
        pdfWindow.document.body.innerHTML = "<div><p>test</p><img src='" + fileURL + "' />" + imgPanel.toString() + "</div>";
      } else {
        window.open(fileURL, "mypdf", "width=700px,height=600px");
      }
    } else {
      alert("Please upload document");
    }
  }

  previewDocContent(content, extension) {
    let prePath = "";

    switch (extension) {
      case 'pdf':
        prePath = "application/pdf";
        break;

      case 'png':
        prePath = "image/png";
        break;

      case 'jpg':
      case 'jpeg':
        prePath = "image/jpg";
        break;

      default:
        prePath = "application/pdf";
        break;
    }

    let pdfWindow = window.open("", "mypdfd", "width=700px,height=600px");
    pdfWindow.document.write("<iframe width='100%' height='100%' src='data:" + prePath + ";base64, " + encodeURI(content.DocumentContent) + "'></iframe>");
  }

  getRowsData = function () {
    var items = this.state.tableData;
    return items.map((row, index) => {
      let documentName = store.getState().lang.lang === Config.LANG.AR ? row.DocumentNameAR ? row.DocumentNameAR : row.fileName : row.DocumentName ? row.DocumentName : row.fileName;
      return /*#__PURE__*/React.createElement("tr", {
        key: "row-" + index
      }, /*#__PURE__*/React.createElement("td", {
        className: "uploadTD-Left"
      }, /*#__PURE__*/React.createElement("img", {
        src: Img,
        alt: "doc",
        style: {
          width: "40px"
        },
        disabled: true
      }), store.getState().lang.lang === Config.LANG.AR ? row.DocumentTypeAr : row.DocumentTypeEn, row.isMandatory === "Y" ? /*#__PURE__*/React.createElement("span", {
        className: "error"
      }, " *") : "", this.state.errorFlag === true && row.isMandatory === "Y" && (row.fileName === undefined || row.fileName === "" || row.fileName === null) ? /*#__PURE__*/React.createElement("small", {
        className: "errorDoc"
      }, translateLabel("PLS_UPLOAD_THE_REQ_DOC")) : /*#__PURE__*/React.createElement("small", null)), /*#__PURE__*/React.createElement("td", {
        className: "td-center"
      }, /*#__PURE__*/React.createElement("label", {
        className: "image-upload uploadLable"
      }, /*#__PURE__*/React.createElement("img", {
        alt: "getfile",
        src: row.hasOwnProperty("fileName") && row.fileName !== '' ? Complete : Upload
      }), row.hasOwnProperty("fileName") && row.fileName !== '' ? '' : /*#__PURE__*/React.createElement("input", {
        type: "file",
        accept: Config.DOCUMENT_UPLOAD_FILE_EXTENTION,
        onChange: e => this.onChange(e, index)
      }))), /*#__PURE__*/React.createElement("td", {
        className: "td-center"
      }, /*#__PURE__*/React.createElement("a", {
        href: true,
        onClick: () => row.hasOwnProperty("fileName") && row.fileName !== '' ? this.getDocumentContents(row, row.AlfrescoID ? true : false) : ""
      }, /*#__PURE__*/React.createElement("img", {
        src: FileImage,
        alt: "preview"
      }))), /*#__PURE__*/React.createElement("td", {
        className: "td-center"
      }, /*#__PURE__*/React.createElement("a", {
        href: true
      }, /*#__PURE__*/React.createElement("img", {
        src: Delete,
        alt: "delete",
        onClick: e => row.hasOwnProperty("disableDelete") && row.disableDelete ? "" : this.clearUploadClick(e, index)
      }))), row.hasOwnProperty("fileName") && row.fileName !== "" ? /*#__PURE__*/React.createElement("td", {
        className: store.getState().lang.lang === Config.LANG.AR ? "text-right" : "text-left",
        id: "Filename"
      }, documentName) : /*#__PURE__*/React.createElement("td", null));
    });
  };
  getDocDetailsRowData = function () {
    var items = this.documentList.DocumentDetails;
    return items.map((row, index) => {
      return /*#__PURE__*/React.createElement("tr", {
        key: "row-" + index
      }, /*#__PURE__*/React.createElement("td", {
        className: "table-col-center"
      }, index + 1), /*#__PURE__*/React.createElement("td", null, store.getState().lang.lang === Config.LANG.AR ? row.DocumentTypeArabic : row.DocumentTypeEnglish), /*#__PURE__*/React.createElement("td", null, /*#__PURE__*/React.createElement(Moment, {
        format: "DD/MM/YYYY HH:mm"
      }, row.CreatedTimeStamp)), /*#__PURE__*/React.createElement("td", {
        className: "table-col-center"
      }, /*#__PURE__*/React.createElement("a", {
        href: () => false,
        onClick: () => this.getDocumentContents(row, true)
      }, /*#__PURE__*/React.createElement("img", {
        src: FileImage,
        alt: "preview"
      }))), /*#__PURE__*/React.createElement("td", {
        className: "table-col-center"
      }, /*#__PURE__*/React.createElement("a", {
        href: () => false
      }, /*#__PURE__*/React.createElement("img", {
        src: Delete,
        alt: "delete",
        onClick: e => this.clearUploadClick(e, index)
      }))), row.hasOwnProperty("DocumentName") && row.DocumentName !== "" ? /*#__PURE__*/React.createElement("td", {
        className: "uploadTD-Left",
        id: "Filename"
      }, row.DocumentName) : /*#__PURE__*/React.createElement("td", null));
    });
  };
  getAddRowsData = function () {
    var items = this.state.addTableData;
    return items.map((row, index) => {
      return /*#__PURE__*/React.createElement("tr", {
        key: index + 1
      }, /*#__PURE__*/React.createElement("td", {
        className: store.getState().lang.lang === Config.LANG.AR ? "table-col-right" : "table-col-left"
      }, /*#__PURE__*/React.createElement("div", null, /*#__PURE__*/React.createElement("select", {
        className: "file-Upload-drop",
        id: "selectBox",
        disabled: row.hasOwnProperty("fileName") && row.fileName !== '' && row.hasOwnProperty("documentID") && row.documentID !== '' ? true : false,
        onChange: e => this.handleChange(e, index)
      }, this.state.selectDefault ? /*#__PURE__*/React.createElement("option", null, this.state.selectDefault) : '', this.state.documentType.map(doc => /*#__PURE__*/React.createElement("option", {
        value: doc.DocumentTypeID,
        title: store.getState().lang.lang === Config.LANG.AR ? doc.DocumentTypeArabic : doc.DocumentTypeEnglish
      }, store.getState().lang.lang === Config.LANG.AR ? doc.DocumentTypeArabic : doc.DocumentTypeEnglish))), /*#__PURE__*/React.createElement("span", {
        className: "error"
      }, " *"), this.state.errorFlag === true && row.fileName === undefined ? /*#__PURE__*/React.createElement("small", {
        className: "errorDoc"
      }, "Please upload the required document.") : /*#__PURE__*/React.createElement("small", null))), /*#__PURE__*/React.createElement("td", {
        className: "addTDupload col3 table-col-right"
      }, /*#__PURE__*/React.createElement("label", {
        style: {
          paddingRight: "10px"
        },
        className: "image-upload addUploadLable"
      }, /*#__PURE__*/React.createElement("img", {
        alt: "filename",
        src: row.hasOwnProperty("fileName") && row.fileName !== '' ? Complete : Upload
      }), row.hasOwnProperty("fileName") && row.fileName !== '' ? '' : /*#__PURE__*/React.createElement("input", {
        type: "file",
        accept: Config.DOCUMENT_UPLOAD_FILE_EXTENTION,
        onChange: e => this.onAddChange(e, index)
      }))), /*#__PURE__*/React.createElement("td", {
        className: "col4 table-col-right",
        align: "center",
        style: {
          paddingRight: "24px"
        }
      }, /*#__PURE__*/React.createElement("a", {
        href: () => false,
        onClick: () => row.hasOwnProperty("fileName") && row.fileName !== '' ? this.previewDocument(row) : ""
      }, /*#__PURE__*/React.createElement("img", {
        src: FileImage,
        alt: "preview"
      }))), /*#__PURE__*/React.createElement("td", {
        className: "addTDDelete col5 table-col-right"
      }, /*#__PURE__*/React.createElement("img", {
        src: Delete,
        alt: "delete",
        onClick: e => this.deleteUploadClick(e, index)
      })), row.hasOwnProperty("fileName") && row.fileName !== '' ? /*#__PURE__*/React.createElement("td", {
        id: "Filename",
        className: store.getState().lang.lang === Config.LANG.AR ? "col6 text-right" : "col6 text-left"
      }, row.fileName) : /*#__PURE__*/React.createElement("td", null));
    });
  };

  render() {
    console.log("state", this.state);
    this.breadCrumbData = [{
      TITLE: translateLabel('HOME'),
      URI: Config.BREADCRUMBS_URI["HOME"]
    }, {
      TITLE: translateLabel('E_SERVICE'),
      URI: Config.BREADCRUMBS_URI["E_SERVICE"]
    }, {
      TITLE: translateLabel('MYWORKITEM'),
      URI: Config.BREADCRUMBS_URI["MYWORKITEM"]
    }, {
      TITLE: store.getState().lang.lang === Config.LANG.AR ? store.getState().selectedService.serviceValue.ServiceNameArabic : store.getState().selectedService.serviceValue.ServiceNameEnglish,
      URI: ""
    }];
    var imgLoadingDiv = /*#__PURE__*/React.createElement("div", {
      className: "imageAlignCenterWorktiem"
    }, /*#__PURE__*/React.createElement("img", {
      src: loadingImg,
      alt: "loadimg"
    }));
    return /*#__PURE__*/React.createElement("div", null, /*#__PURE__*/React.createElement(Dialog, {
      key: "dialog-header",
      maxWidth: "md",
      fullWidth: true,
      onClose: () => {
        this.handleCloseDialog();
      },
      "aria-labelledby": "max-width-dialog-title",
      open: this.state.openDialog
    }, /*#__PURE__*/React.createElement(DialogTitle, {
      key: "dialog-title",
      id: "customized-dialog-title",
      style: {
        display: store.getState().lang.lang === Config.LANG.AR ? "flex" : ""
      },
      onClose: () => {
        this.handleCloseDialog();
      }
    }, translateLabel("File Preview")), /*#__PURE__*/React.createElement(DialogContent, {
      key: "dialog-content"
    }, /*#__PURE__*/React.createElement("div", {
      className: "dialog-container"
    }, (() => {
      if (this.state.isImgSource) {
        return /*#__PURE__*/React.createElement(ReactPanZoom, {
          image: this.state.fileUrl,
          alt: "document image"
        });
      } else {
        return /*#__PURE__*/React.createElement(FileViewer, {
          key: "file-viewer",
          fileType: this.state.fileExt,
          filePath: "data:" + this.state.fileUrl
        });
      }
    })())), /*#__PURE__*/React.createElement(DialogActions, {
      key: "dialog-act",
      className: store.getState().lang.lang === Config.LANG.AR ? "row-rverse" : ""
    }, /*#__PURE__*/React.createElement(Button, {
      key: "dialog-close",
      onClick: () => {
        this.handleCloseDialog();
      },
      color: "primary"
    }, translateLabel("CLOSE")))), /*#__PURE__*/React.createElement("div", {
      className: "maincontainer containerBackground"
    }, /*#__PURE__*/React.createElement(ServiceBreadCrumbs, {
      iconName: PreviewRedirect_ListConfig.applistdata[store.getState().appInfo.workitemformdetails.ServiceSubServices.ServiceSubID].iconname,
      lang: store.getState().lang.lang,
      config: Config,
      parentProps: this.props,
      breadcrumb: this.breadCrumbData
    }), /*#__PURE__*/React.createElement("div", {
      className: "container form-list sample-field"
    }), (() => {
      if (this.state.isDocs) {
        return /*#__PURE__*/React.createElement("div", {
          className: "container"
        }, /*#__PURE__*/React.createElement("div", {
          className: "col-lg-12 zero-rpad table-responsive-xl table-hover mh-table"
        }, /*#__PURE__*/React.createElement("div", null, /*#__PURE__*/React.createElement("div", {
          className: store.getState().lang.lang === Config.LANG.AR ? "addbtnDiv text-left" : "addbtnDiv text-right"
        }, /*#__PURE__*/React.createElement("button", {
          className: "formbtn-primary",
          disabled: this.state.documentType.length === 0,
          type: "button",
          onClick: () => {
            this.AddUploadClick();
          }
        }, translateLabel("add_document"))), /*#__PURE__*/React.createElement("div", null, /*#__PURE__*/React.createElement("h4", {
          className: store.getState().lang.lang === Config.LANG.AR ? "text-right" : "text-left"
        }, translateLabel("ATTACHED_DOC")), /*#__PURE__*/React.createElement("table", {
          className: "table"
        }, /*#__PURE__*/React.createElement("thead", null, /*#__PURE__*/React.createElement("tr", null, /*#__PURE__*/React.createElement("th", {
          scope: "col",
          className: store.getState().lang.lang === Config.LANG.AR ? "text-right col2" : "text-left col2"
        }, translateLabel("DOCUMNET_TYPE")), /*#__PURE__*/React.createElement("th", {
          scope: "col",
          className: "table-col-center"
        }, translateLabel("UPLOAD_LABEL")), /*#__PURE__*/React.createElement("th", {
          scope: "col",
          className: "table-col-center"
        }, translateLabel("PREVIEW")), /*#__PURE__*/React.createElement("th", {
          scope: "col",
          className: "table-col-center"
        }, translateLabel("CLEAR")), /*#__PURE__*/React.createElement("th", {
          className: store.getState().lang.lang === Config.LANG.AR ? "text-right col6" : "text-left col6",
          style: {
            width: store.getState().lang.lang === Config.LANG.AR ? "41%" : "38%"
          }
        }, translateLabel("FILE_NAME")))), /*#__PURE__*/React.createElement("tbody", null, this.getRowsData()))))));
      } else {
        return /*#__PURE__*/React.createElement("div", {
          className: "container"
        }, /*#__PURE__*/React.createElement("div", {
          className: "col-lg-12 zero-rpad table-responsive-xl table-hover mh-table"
        }, /*#__PURE__*/React.createElement("div", null, /*#__PURE__*/React.createElement("div", {
          className: store.getState().lang.lang === Config.LANG.AR ? "addbtnDiv text-left" : "addbtnDiv text-right"
        }, /*#__PURE__*/React.createElement("button", {
          className: "formbtn-primary",
          disabled: this.state.documentType.length === 0,
          type: "button",
          onClick: () => {
            this.AddUploadClick();
          }
        }, translateLabel("add_document"))))));
      }
    })(), /*#__PURE__*/React.createElement("div", {
      className: "container"
    }, /*#__PURE__*/React.createElement("div", {
      className: "ml-3"
    }, /*#__PURE__*/React.createElement("div", {
      className: "table-responsive-xl table-hover mh-table",
      style: {
        display: this.state.enableAddTable === true ? "block" : "none"
      }
    }, /*#__PURE__*/React.createElement("div", null, /*#__PURE__*/React.createElement("div", {
      className: ""
    }, /*#__PURE__*/React.createElement("h4", {
      className: store.getState().lang.lang === Config.LANG.AR ? "text-right" : "text-left"
    }, translateLabel("ADD_DOCUMENT"))), /*#__PURE__*/React.createElement("div", {
      className: ""
    }, /*#__PURE__*/React.createElement("table", {
      className: "table"
    }, /*#__PURE__*/React.createElement("thead", null, /*#__PURE__*/React.createElement("tr", null, /*#__PURE__*/React.createElement("th", {
      scope: "col",
      className: store.getState().lang.lang === Config.LANG.AR ? "text-right col-md-4" : "text-left col-md-4"
    }, translateLabel("DOCUMNET_TYPE")), /*#__PURE__*/React.createElement("th", {
      scope: "col",
      className: "table-col-right"
    }, translateLabel("UPLOAD")), /*#__PURE__*/React.createElement("th", {
      scope: "col",
      className: "table-col-right",
      style: {
        paddingRight: "17px"
      }
    }, translateLabel("PREVIEW")), /*#__PURE__*/React.createElement("th", {
      scope: "col",
      className: "table-col-right"
    }, translateLabel("CLEAR")), /*#__PURE__*/React.createElement("th", {
      className: store.getState().lang.lang === Config.LANG.AR ? "col6 text-right" : "col6 text-left"
    }, translateLabel("FILE_NAME")))), /*#__PURE__*/React.createElement("tbody", null, this.getAddRowsData())), /*#__PURE__*/React.createElement("div", null))))), /*#__PURE__*/React.createElement("div", {
      className: "fileuploadpreviewbtndiv"
    }, /*#__PURE__*/React.createElement("button", {
      className: "formbtn-primary",
      type: "button",
      onClick: this.navWizard
    }, " ", translateLabel("Previous")), "\xA0 ", /*#__PURE__*/React.createElement("button", {
      className: "formbtn-primary",
      type: "button",
      onClick: this.uploadFiles
    }, " ", translateLabel("NEXT")), "\xA0 ", /*#__PURE__*/React.createElement("button", {
      className: this.state.hideSkipStepBtn === false ? "formbtn-primary" : "formbtn-primary hidden",
      type: "button",
      onClick: this.navWizard
    }, " ", translateLabel("SKIP_STEP"))), /*#__PURE__*/React.createElement("br", null)), /*#__PURE__*/React.createElement("br", null), /*#__PURE__*/React.createElement("div", {
      className: "loader-container"
    }, this.state.responseEmpty ? /*#__PURE__*/React.createElement("div", null, imgLoadingDiv) : /*#__PURE__*/React.createElement("div", null))));
  }

} // export default FileEdits;


const mapStateToProps = state => ({
  docs_upload_details: state.docs_upload_details
});

const mapDispatchToProps = {
  setDocs_Details
};
export default withNamespaces()(connect(mapStateToProps, mapDispatchToProps)(FileEdits));