import React, { Component } from 'react';
import translateLabel from "../translation"
import { withNamespaces } from 'react-i18next';
import Img from '../assets/images/document.svg';
import Config from '../config/appConstants';
import { store } from "../redux";

class DocumentList extends Component {

  constructor(props) {
    super(props);
    this.state = {}
  }

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

  render() {
    var uploadedFiles;
    uploadedFiles = JSON.parse(store.getState().appInfo.selectedFiles);
    let removeDuplicateData = Object.values(uploadedFiles.reduce((acc, cur) => Object.assign(acc, { [cur.DocumentTypeID]: cur }), {}));
    uploadedFiles = removeDuplicateData;
    if (uploadedFiles !== null && uploadedFiles !== undefined && uploadedFiles.length > 0) {
      return (
        <div style={{ marginLeft: "-11px" }}>
          <div className="container">
            <div className="row">
              <div className="header-align-left col-lg-12 col-md-6">
                <h4 className="selectDocumentHead">{translateLabel('REQURIED_DOC_LIST')}</h4>
              </div>
              <div className="col col-lg-12 col-md-12">
                <div className="row" style={{ width: '105%' }}>
                  {(() => {
                    if (this.props.storeData.hasOwnProperty('WizardStep') && this.props.storeData.WizardStep !== "") {
                      return (
                        <div className="col-lg-12 col-md-12 col-sm-12 col-12">
                          <div className={this.props.i18n.language === Config.LANG.AR ? "text-left" : "text-right"}>
                            <button onClick={() => { this.handleSectionEditClick() }} className="btn-primary"> {translateLabel("EDITBTN")}</button>
                          </div>
                        </div>
                      )
                    } else {
                      return ("")
                    }
                  }
                  )()}
                  <div className="col col-lg-12 col-md-12">
                    <div className="table-responsive-lg">
                      <br />
                      <table className="table">
                        <thead>
                          <tr>
                            <th className={this.props.i18n.language === Config.LANG.AR ? "text-right" : "text-left"} >{translateLabel("FILE_NAME")}</th>
                          </tr>
                        </thead>
                        <tbody>
                          {
                            uploadedFiles.map(function (object, i) {
                              return (
                                <tr key={i + "-tr"}>
                                  <td key={i + "-fname"} className={this.props.i18n.language === Config.LANG.AR ? "text-right" : "text-left"} >
                                    <img src={Img} alt="doc" style={{ width: "50px" }} disabled />&nbsp;&nbsp;{this.props.i18n.language === Config.LANG.AR ? object.DocumentTypeArabic : object.DocumentTypeEnglish}</td>
                                </tr>
                              )
                            }.bind(this))
                          }
                        </tbody>
                      </table>
                    </div>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
      );
    }
  }
}

export default withNamespaces()(DocumentList);
