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 React, { Component } from 'react';
import { withNamespaces } from 'react-i18next';
import { Table } from 'react-bootstrap';
import Config from '../config/appConstants';
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 Moment from 'react-moment'; // import FileViewer from 'react-file-viewer';

import PhotoLibraryIcon from '@material-ui/icons/PhotoLibrary';
import GetAppSharpIcon from '@material-ui/icons/GetAppSharp';
import { Theme, withStyles, WithStyles, Typography, Button } from '@material-ui/core';
import translateLabel from "../translation"; // import DescriptionOutlinedIcon from '@material-ui/icons/DescriptionOutlined';

import NoRecImg from '../assets/images/no-application.jpg';
import ReactPanZoom from 'react-image-pan-zoom-rotate';
import DescriptionOutlinedIcon from '@material-ui/icons/DescriptionOutlined';
import Tooltip from '@material-ui/core/Tooltip';
import MinimizeIcon from '@material-ui/icons/Minimize'; // import MaximizeIcon from '@material-ui/icons/Maximize';

import ReactToPrint from 'react-to-print';
import ForgeViewer from 'react-forge-viewer';
import CropFree from '@material-ui/icons/CropFree';
import { createAPIRequest } from '../services/api/endPoint';
import Img from '../assets/images/document.svg';
import loadingImg from '../assets/images/loader.gif';
import { Document, Page, pdfjs } from 'react-pdf';
pdfjs.GlobalWorkerOptions.workerSrc = 'pdf.worker.min.js';

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 DocumentList extends Component {
  constructor(props) {
    super(props);
    this.state = {
      isDocs: false,
      isNoDocs: false,
      isEditDocs: this.props.hasOwnProperty("storeData") && this.props.storeData.hasOwnProperty("isEditButtonShow") ? this.props.storeData.isEditButtonShow : true,
      showReason: false,
      openDialog: false,
      defaultPopUp: "md",
      fullWidth: true,
      fullScreen: false,
      fileExt: "",
      fileUrl: "",
      isImgSource: false,
      dwgViewable: null,
      forgeViewerUrn: null,
      isBeforePrint: false,
      pages: []
    };
    this.appStatus = "";
    this.autodesk_access_token = null;
    this.autodesk_urn = null;
    this.cadExt = ["dwg"];
    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"
    }; //image/vnd.dwg

    this.getDocumentList = this.getDocumentList.bind(this);

    if (this.props.storeData.hasOwnProperty("ApplicationID") && this.props.storeData.hasOwnProperty("ServiceID")) {
      this.getApplicationStatus();
    }
  }

  async getApplicationStatus() {
    let params = {
      "ApplicationID": this.props.storeData.ApplicationID
    };
    let response = await createAPIRequest('GET', Config.REQUEST_RES_GETAPPLICATIOM, {}, params);

    if (response) {
      if (response.ApplicationFullDetails.hasOwnProperty("CommercialApplicationDetails")) {
        this.appStatus = response.ApplicationFullDetails.CommercialApplicationDetails[0].ApplicationData.ApplicationStatusID;
      } else {
        this.appStatus = response.ApplicationFullDetails.ResidentialApplicationDetails[0].ApplicationData.ApplicationStatusID;
      }

      this.getDocumentList();
    }
  }

  handleClickOpenDialog(row) {
    this.getDocumentContents(row);
  }

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

  handleMaximumDialog() {
    this.setState({ ...this.state,
      defaultPopUp: "false",
      fullWidth: true,
      fullScreen: true
    });
  }

  handleMinimumDialog() {
    this.setState({ ...this.state,
      defaultPopUp: "md",
      fullWidth: true,
      fullScreen: false
    });
  }

  handleSectionEditClick() {
    this.props.onSectionActionClick(this.props.storeData.WizardStep);
  }

  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 getAutoDeskAccessToken() {
    let logDtls = {
      client_id: "zsTlY4s4icHNd5dH6JtZ37CKoHqgkY6k",
      client_secret: "KSUIYltMY1sfFqZs",
      grant_type: "client_credentials"
    }; // POST request using fetch with async/await

    const requestOptions = {
      method: 'POST',
      headers: {
        'Accept': '*/*',
        'Content-Type': "application/x-www-form-urlencoded"
      },
      body: "client_id=" + logDtls.client_id + "&client_secret=" + logDtls.client_secret + "&grant_type=" + logDtls.grant_type + "&scope=data:write data:create data:read bucket:create bucket:delete bucket:read",
      mode: "cors"
    };
    let dskUrl = "https://developer.api.autodesk.com/authentication/v1/authenticate";
    const response = await fetch(dskUrl, requestOptions);
    this.autodesk_access_token = await response.json(); //bucket

    const requestBkOptions = {
      method: 'POST',
      headers: {
        'Accept': '*/*',
        'Content-Type': "application/json",
        'Authorization': 'Bearer ' + this.autodesk_access_token.access_token
      },
      body: JSON.stringify({
        "bucketKey": "smh-docs",
        "access": "full",
        "policyKey": "transient"
      }),
      mode: "cors"
    };
    let bucketUrl = "https://developer.api.autodesk.com/oss/v2/buckets";
    const bkResponse = await fetch(bucketUrl, requestBkOptions);
    this.autodesk_bucket_info = await bkResponse.json();
  }

  async uploadFileIntoBucket(dataURI, fileName, fileExt) {
    //binary files
    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);
    }

    let blobFile = new Blob([ab], {
      type: 'image/vnd.dwg'
    });
    const requestBkFileOptions = {
      method: 'PUT',
      headers: {
        'Accept': '*/*',
        'Authorization': 'Bearer ' + this.autodesk_access_token.access_token,
        "accept-encoding": "gzip, deflate",
        "Content-Type": "application/octet-stream"
      },
      body: blobFile,
      mode: "cors"
    };
    let bucketUrl = "https://developer.api.autodesk.com/oss/v2/buckets/smh-docs/objects/" + fileName;
    const bkFileResponse = await fetch(bucketUrl, requestBkFileOptions);
    this.autodesk_bucket_file = await bkFileResponse.json();
    let urnBase64 = btoa(this.autodesk_bucket_file.objectId);
    this.autodesk_urn = this.base64RemovePadding(urnBase64); // create Job for UploadFiles
    // let CreateJob = {
    //   input: {
    //     urn: this.autodesk_urn,
    //     checkReferences: false
    //   },
    //   output: {
    //     formats: [
    //       {
    //         type: "svf",
    //         views: [
    //           "2d",
    //           "3d"
    //         ],
    //         advanced: {
    //           conversionMethod: "modern"
    //         }
    //       }
    //     ]
    //   }
    // }
    // const requestJobFileOptions = {
    //   method: 'POST',
    //   headers: {
    //     'Accept': '*/*',
    //     'Authorization': 'Bearer ' + this.autodesk_access_token.access_token,
    //     "Content-Type": "application/json"
    //   },
    //   body: JSON.stringify(CreateJob),
    //   mode: "cors"
    // };
    // let jobUrl = "https://developer.api.autodesk.com/modelderivative/v2/designdata/job";
    // const JobFileResponse = await fetch(jobUrl, requestJobFileOptions);
    // const JobData = await JobFileResponse.json();
    // this.setState({ ...this.state, forgeViewerUrn: this.autodesk_urn, openDialog: true, isImgSource: false });

    this.setState({ ...this.state,
      fileExt: fileExt,
      fileUrl: dataURI,
      forgeViewerUrn: this.autodesk_urn,
      openDialog: true,
      isImgSource: false,
      isCadDocs: true
    }); // console.log("urn", urnBase64, JobData.ok, "------------", this.autodesk_urn);
  }

  base64RemovePadding(str) {
    return str.replace(/={1,4}$/, '');
  }

  async getDocumentContents(row) {
    let imgType = ["image/jpeg", "image/png", "image/jpg"];
    var fileName = row.DocumentName;
    var fileExt = fileName.split(".").pop();

    if (fileExt === "dwg") {
      this.getAutoDeskAccessToken();
    }

    var params = {
      DocumentID: row.AlfrescoID,
      ApplicationID: this.props.storeData.ApplicationID
    };
    let response = await createAPIRequest('GET', Config.GET_DOCUMENT_CONTENT, {}, params);

    if (response) {
      let contentDocument = response;

      if (imgType.includes(this.mimeTypes[fileExt.toLowerCase()])) {
        // image source
        let baseUrl = this.mimeTypes[fileExt] + ";base64," + contentDocument.DocumentDetails[0].DocumentContent;
        const fileURL = this.b64toBlob(baseUrl);
        this.setState({ ...this.state,
          fileExt: fileExt,
          fileUrl: fileURL,
          openDialog: true,
          isImgSource: true
        });
      } else if (this.cadExt.includes(fileExt)) {
        let baseUrl = "data:image/vnd.dwg;base64," + contentDocument.DocumentDetails[0].DocumentContent;
        this.uploadFileIntoBucket(baseUrl, contentDocument.DocumentDetails[0].DocumentName, fileExt); // this.setState({ ...this.state, fileExt: fileExt, fileUrl: contentDocument.DocumentDetails[0].DocumentContent, openDialog: true, isImgSource: false, isCadDocs: 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");
    } // applicantCreateRequest('GET', Config.GET_DOCUMENT_CONTENT, 1, '', params).then(
    //   (response) => {
    //   }, (error) => {
    //     // console.log("axios:land_service_error  == " + error);
    //   });

  }

  async getDownloadContents(row) {
    var fileName = row.DocumentName;
    var fileExt = fileName.split(".").pop();
    var params = {
      DocumentID: row.AlfrescoID,
      ApplicationID: this.props.storeData.ApplicationID
    };
    let response = await createAPIRequest('GET', Config.GET_DOCUMENT_CONTENT, {}, params);

    if (response) {
      let contentDocument = response;
      this.setState({ ...this.state,
        fileExt: fileExt,
        fileUrl: contentDocument.DocumentDetails[0].DocumentContent
      });
      let download_link = "data:" + this.mimeTypes[this.state.fileExt] + ";base64," + this.state.fileUrl;
      const link = document.createElement('a');
      link.href = download_link;
      link.setAttribute('download', `${row.DocumentName}.pdf`);
      document.body.appendChild(link);
      link.click();
      link.parentNode.removeChild(link);
    } else {
      console.log("axios:dowload_content_error");
    } // applicantCreateRequest('GET', Config.GET_DOCUMENT_CONTENT, 1, '', params).then(
    //   (response) => {
    //   }, (error) => {
    //     // console.log("axios:land_service_error  == " + error);
    //   });

  }

  async getDocumentList() {
    var params = {
      ApplicationID: this.props.storeData.ApplicationID,
      ServiceID: this.props.storeData.ServiceID
    };

    if (this.props.storeData.hasOwnProperty("DocumentGroupID")) {
      params.DocumentGroupID = this.props.storeData.DocumentGroupID;
    }

    if (this.props.storeData.hasOwnProperty("ReferenceID")) {
      params.ReferenceID = `${this.props.storeData.ReferenceID},${this.props.storeData.ApplicationID}`;
    }

    if (this.props.storeData.hasOwnProperty("ServiceSubID")) {
      params.ServiceSubID = `${this.props.storeData.ServiceSubID}`;
    }

    let response = await createAPIRequest("GET", Config.GET_DOCUMENTS, {}, params);

    if (response) {
      if (this.props.storeData.hasOwnProperty("ExcludeDocumentTypeID")) {
        this.documentList = this.removeObjectListArray(response, this.props.storeData.ExcludeDocumentTypeID);
      } else {
        this.documentList = response;
      }

      this.setState({
        isDocs: true
      });
    } else {
      this.setState({
        isNoDocs: true
      });
    }
  }

  removeObjectListArray(apps, typeIDArray) {
    typeIDArray.forEach(function (typeID) {
      var removeIndex = apps.DocumentDetails.map(function (item) {
        return item.DocumentTypeID;
      }).indexOf(typeID);

      if (removeIndex > 0) {
        apps.DocumentDetails.splice(removeIndex, 1);
      }
    });
    return apps;
  }

  handleViewerError(error) {
    console.log('Error loading viewer.');
  }

  handleDocumentError(viewer, error) {
    console.log('Error loading a document', viewer, "----", error);
  }
  /* after the viewer loads a document, we need to select which viewable to
  display in our component */


  handleDocumentLoaded(doc, viewables) {
    if (viewables.length === 0) {
      console.error('Document contains no viewables.');
    } else {
      //Select the first viewable in the list to use in our viewer component
      this.setState({
        dwgViewable: viewables[0]
      });
    }
  }

  getForgeToken() {
    /* Normally, this would call an endpoint on your server to generate a public
    access token (using your client id and sercret). Doing so should yield a
    response that looks something like the following...
    */
    return {
      access_token: this.autodesk_access_token.access_token,
      expires_in: this.autodesk_access_token.expires_in,
      token_type: "Bearer"
    };
  }
  /* Once the viewer has initialized, it will ask us for a forge token so it can
  access the specified document. */


  handleTokenRequested(onAccessToken) {
    if (onAccessToken) {
      let token = this.getForgeToken();
      if (token) onAccessToken(token.access_token, token.expires_in);
    }
  }

  beforePrint() {
    return new Promise((resolve, reject) => {
      this.setState({
        isBeforePrint: true
      }, () => resolve());
    });
  } // handleModelLoaded(viewer, model) {
  //   console.log('Loaded model:', model);
  // }
  // handleModelError(viewer, error) {
  //   console.log('Error loading the model.');
  // }


  render() {
    const {
      t
    } = this.props;
    const {
      isDocs,
      isNoDocs
    } = this.state;
    var documentTable = null;
    let NoDocumentTable = "";
    let imgLoadingDiv = /*#__PURE__*/React.createElement("div", null, /*#__PURE__*/React.createElement("img", {
      src: loadingImg,
      alt: "loadimg",
      style: {
        marginLeft: "auto",
        marginRight: "auto",
        display: "block",
        marginBottom: "4%",
        marginTop: "4%"
      }
    }));
    var imgNoRecDiv = /*#__PURE__*/React.createElement("div", null, /*#__PURE__*/React.createElement("div", {
      className: "gallery"
    }, /*#__PURE__*/React.createElement("p", {
      className: "desc"
    }, /*#__PURE__*/React.createElement("img", {
      src: NoRecImg,
      alt: "norec"
    })), /*#__PURE__*/React.createElement("div", {
      className: "desc"
    }, this.appStatus === Config.RN1_APPLICATION_REQUEST.ApplicationStatusID_10 || this.appStatus === Config.RN1_APPLICATION_REQUEST.ApplicationStatusID_0 ? translateLabel("Waiting for Payment") : translateLabel("NO_DOC_ATTACH"))), /*#__PURE__*/React.createElement("br", null));

    if (isDocs && Object.keys(this.documentList).length) {
      documentTable = /*#__PURE__*/React.createElement("div", {
        style: {
          marginTop: "-23px"
        }
      }, /*#__PURE__*/React.createElement("div", {
        className: "header-align-left col-lg-12 col-md-6"
      }, /*#__PURE__*/React.createElement("h4", {
        className: "documentHead"
      }, t('ATTACHED_DOC'))), /*#__PURE__*/React.createElement("div", {
        className: "table-responsive-xl table-hover mh-table mt-05"
      }, /*#__PURE__*/React.createElement(Table, {
        className: "table",
        style: {
          width: "100%"
        }
      }, /*#__PURE__*/React.createElement("thead", null, /*#__PURE__*/React.createElement("tr", null, /*#__PURE__*/React.createElement("th", {
        align: "left",
        style: this.props.lang === Config.LANG.AR ? {
          textAlign: "right"
        } : {
          textAlign: "left"
        }
      }, /*#__PURE__*/React.createElement("b", null, translateLabel('DOCUMNET_TYPE'))), /*#__PURE__*/React.createElement("th", {
        align: "left",
        style: this.props.lang === Config.LANG.AR ? {
          textAlign: "right"
        } : {
          textAlign: "left"
        }
      }, /*#__PURE__*/React.createElement("b", null, translateLabel('FILE_NAME'))), /*#__PURE__*/React.createElement("th", {
        align: "left",
        style: {
          textAlign: "left"
        }
      }, /*#__PURE__*/React.createElement("b", null, translateLabel('CREATED_AT'))), /*#__PURE__*/React.createElement("th", {
        align: "center"
      }, /*#__PURE__*/React.createElement("b", null, translateLabel('ACTIONS'))))), /*#__PURE__*/React.createElement("tbody", null, this.documentList.DocumentDetails.map((row, index) => /*#__PURE__*/React.createElement("tr", {
        key: index + 1
      }, /*#__PURE__*/React.createElement("td", {
        className: "d-flex align-items-center tableDocAlign",
        style: {
          display: "flex",
          textAlign: this.props.lang === Config.LANG.AR ? "right" : "left"
        }
      }, /*#__PURE__*/React.createElement("img", {
        src: Img,
        alt: "doc",
        style: {
          width: "40px"
        },
        disabled: true
      }), " ", /*#__PURE__*/React.createElement("p", {
        style: {
          marginBottom: "0px"
        }
      }, " ", this.props.lang === Config.LANG.AR ? row.DocumentTypeArabic : row.DocumentTypeEnglish, " ")), /*#__PURE__*/React.createElement("td", {
        className: "tableDocAlign",
        style: this.props.lang === Config.LANG.AR ? {
          textAlign: "right",
          width: "350px"
        } : {
          textAlign: "left"
        }
      }, this.props.lang === Config.LANG.AR ? row.DocumentNameAR : row.DocumentName), /*#__PURE__*/React.createElement("td", {
        className: "tableDocAlign",
        style: {
          textAlign: "left",
          width: "175px"
        }
      }, /*#__PURE__*/React.createElement(Moment, {
        format: "DD/MM/YYYY HH:mm"
      }, row.CreatedTimeStamp)), /*#__PURE__*/React.createElement("td", {
        className: "tableDocAlign action",
        style: {
          width: "90px"
        }
      }, /*#__PURE__*/React.createElement(PhotoLibraryIcon, {
        color: "primary",
        onClick: () => {
          this.handleClickOpenDialog(row);
        }
      }), "\xA0\xA0|\xA0\xA0", /*#__PURE__*/React.createElement("span", {
        style: {
          color: "blue"
        },
        onClick: () => {
          this.getDownloadContents(row);
        }
      }, /*#__PURE__*/React.createElement(GetAppSharpIcon, null)))))))));
    } else {
      NoDocumentTable = /*#__PURE__*/React.createElement("div", null, /*#__PURE__*/React.createElement("div", {
        className: "col-lg-12 col-md-12 col-sm-12 col-12",
        style: {
          paddingBottom: "25px",
          display: this.state.isNoDocs && this.state.isEditDocs ? "block" : "none"
        }
      }, /*#__PURE__*/React.createElement("div", {
        style: {
          width: '100%',
          textAlign: 'right',
          marginLeft: "13px",
          marginTop: "0px"
        }
      }, /*#__PURE__*/React.createElement("button", {
        style: this.props.i18n.language === Config.LANG.AR ? {
          float: "left"
        } : {
          float: "right"
        },
        onClick: () => {
          this.handleSectionEditClick();
        },
        className: "formbtn-primary"
      }, " ", translateLabel("EDITBTN")))), /*#__PURE__*/React.createElement("table", {
        className: "imageAlignCenterDoc"
      }, /*#__PURE__*/React.createElement("tbody", null, /*#__PURE__*/React.createElement("tr", {
        key: "tdbody"
      }, /*#__PURE__*/React.createElement("td", {
        colSpan: "4"
      }, imgNoRecDiv)))));
    }

    if (documentTable !== null) {
      return /*#__PURE__*/React.createElement("div", null, /*#__PURE__*/React.createElement("div", {
        className: this.props.i18n.language === Config.LANG.AR ? "container zero-padding" : "container zero-padding"
      }, /*#__PURE__*/React.createElement("div", null, /*#__PURE__*/React.createElement("div", {
        className: "col col-lg-12 col-md-12 zero-padding"
      }, /*#__PURE__*/React.createElement("div", {
        className: "zero-padding",
        style: this.props.i18n.language === Config.LANG.AR ? {
          width: '100.5%'
        } : {
          width: '100%'
        }
      }, (() => {
        if (this.props.storeData.hasOwnProperty('WizardStep') && this.props.storeData.WizardStep !== "") {
          return /*#__PURE__*/React.createElement("div", {
            className: "col-lg-12 col-md-12 col-sm-12 col-12",
            style: {
              paddingBottom: "25px"
            }
          }, /*#__PURE__*/React.createElement("div", {
            style: {
              width: '100%',
              textAlign: 'right',
              marginLeft: "13px",
              marginTop: "0px"
            }
          }, /*#__PURE__*/React.createElement("button", {
            style: this.props.i18n.language === Config.LANG.AR ? {
              float: "left"
            } : {
              float: "right"
            },
            onClick: () => {
              this.handleSectionEditClick();
            },
            className: "formbtn-primary"
          }, " ", translateLabel("EDITBTN"))));
        } else {
          return "";
        }
      })(), /*#__PURE__*/React.createElement("div", {
        className: "col-12 col-lg-12 col-md-12 table-grid-rx isDocUploaded"
      }, documentTable))))), /*#__PURE__*/React.createElement(Dialog, {
        key: "dialog-headerss",
        fullScreen: this.state.fullScreen,
        maxWidth: this.state.defaultPopUp,
        fullWidth: this.state.fullWidth,
        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: this.props.i18n.language === Config.LANG.AR ? "flex" : ""
        },
        onClose: () => {
          this.handleCloseDialog();
        }
      }, /*#__PURE__*/React.createElement("div", {
        className: "dialogTitle  MuiTypography-h6PrimaryColor"
      }, /*#__PURE__*/React.createElement(DescriptionOutlinedIcon, {
        style: {
          fontSize: "27px"
        }
      }), /*#__PURE__*/React.createElement("span", null, translateLabel('File Preview')), this.state.fullScreen ? /*#__PURE__*/React.createElement(Tooltip, {
        title: translateLabel("MIN-WND"),
        placement: "left"
      }, /*#__PURE__*/React.createElement(MinimizeIcon, {
        className: "maximumDialogIcon",
        style: {
          cursor: "pointer",
          float: "right",
          fontSize: "22px",
          marginTop: "3px",
          marginRight: "34px",
          color: "rgba(158, 158, 158, 1)"
        },
        onClick: () => {
          this.state.fullScreen ? this.handleMinimumDialog() : this.handleMaximumDialog();
        }
      })) : /*#__PURE__*/React.createElement(Tooltip, {
        title: translateLabel("MAX-WND"),
        placement: "left"
      }, /*#__PURE__*/React.createElement(CropFree, {
        className: "maximumDialogIcon",
        style: {
          cursor: "pointer",
          float: "right",
          fontSize: "22px",
          marginTop: "5px",
          marginRight: "34px",
          color: "rgba(158, 158, 158, 1)"
        },
        onClick: () => {
          this.state.fullScreen ? this.handleMinimumDialog() : this.handleMaximumDialog();
        }
      })))), /*#__PURE__*/React.createElement(DialogContent, {
        key: "dialog-content"
      }, /*#__PURE__*/React.createElement("div", {
        className: "dialog-container"
      }, (() => {
        if (this.state.isImgSource && !this.state.isBeforePrint) {
          return /*#__PURE__*/React.createElement(ReactPanZoom, {
            ref: el => this.componentRef = el,
            image: this.state.fileUrl,
            alt: "document image"
          });
        } else if (this.state.isImgSource && this.state.isBeforePrint) {
          return /*#__PURE__*/React.createElement("div", {
            className: "text-center",
            ref: el => this.componentRef = el
          }, /*#__PURE__*/React.createElement("img", {
            src: this.state.fileUrl,
            alt: "no"
          }));
        } else if (this.cadExt.includes(this.state.fileExt) && this.state.forgeViewerUrn !== null) {
          // console.log("file CAD files", this.state.forgeViewerUrn, this.autodesk_urn);
          return /*#__PURE__*/React.createElement(ForgeViewer, {
            version: "6.0",
            urn: this.state.forgeViewerUrn,
            view: this.state.dwgViewable,
            headless: false,
            onViewerError: this.handleViewerError.bind(this),
            onTokenRequest: this.handleTokenRequested.bind(this),
            onDocumentLoad: this.handleDocumentLoaded.bind(this),
            onDocumentError: this.handleDocumentError.bind(this) // onModelLoad={this.handleModelLoaded.bind(this)}
            // onModelError={this.handleModelError.bind(this)}

          });
        } else {
          return (
            /*#__PURE__*/
            // <FileViewer ref={el => (this.componentRef = el)} key="file-viewer"
            //   fileType={this.state.fileExt}
            //   filePath={"data:" + this.state.fileUrl}
            // />
            React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(Document // ref={el => this.componentRef = el}
            , {
              file: `data:${this.state.fileUrl}`,
              onLoadSuccess: pdf => {//  console.log('success', pdf.numPages)
              },
              onLoadError: err => {// console.log('error', err)
              } // renderMode="canvas"

            }, this.state.pages.map(page => /*#__PURE__*/React.createElement(Page, {
              pageNumber: page,
              width: 900
            }))), /*#__PURE__*/React.createElement("div", {
              style: {
                width: '10px',
                height: '0px',
                overflow: "hidden"
              }
            }, /*#__PURE__*/React.createElement(Document, {
              ref: el => this.componentRef = el,
              file: `data:${this.state.fileUrl}`,
              onLoadSuccess: pdf => {
                let pages = [];

                for (let index = 1; index <= pdf.numPages; index++) {
                  pages.push(index);
                }

                this.setState({
                  pages
                });
              },
              onLoadError: err => {// console.log('error', err)
              } // renderMode="canvas"

            }, this.state.pages.map(page => /*#__PURE__*/React.createElement(Page, {
              className: "pageMargin",
              pageNumber: page,
              width: 1000
            })))))
          );
        }
      })())), /*#__PURE__*/React.createElement(DialogActions, {
        key: "dialog-act",
        className: this.props.lang === Config.LANG.AR ? "row-rverse" : ""
      }, /*#__PURE__*/React.createElement(ReactToPrint // trigger={() => <a className="MuiButtonBase-root MuiButton-root MuiButton-text MuiButton-textPrimary" style={{ display: this.state.printDisplay }} href="javascript::void(0)"><i class="fa fa-print" aria-hidden="true" title="print"></i>{translateLabel("PRINT")}</a>}
      , {
        trigger: () => /*#__PURE__*/React.createElement(Button, {
          style: {
            color: "white",
            background: "#056ca2"
          }
        }, /*#__PURE__*/React.createElement("i", {
          "aria-hidden": "true",
          title: "print"
        }), translateLabel("PRINT")),
        content: () => this.componentRef,
        onBeforeGetContent: this.beforePrint
      }), /*#__PURE__*/React.createElement(Button, {
        key: "dialog-close",
        onClick: () => {
          this.handleCloseDialog();
        },
        style: {
          color: "white",
          background: "#056ca2",
          marginRight: "10px"
        }
      }, translateLabel('CLOSE')))));
    } else if (!isNoDocs) {
      return /*#__PURE__*/React.createElement("div", null, imgLoadingDiv);
    } else {
      return NoDocumentTable;
    }
  }

}

export default withNamespaces()(DocumentList);