import React from "react";
import { connect } from "redux-bundler-react";

class ResourcesModal extends React.Component {
  constructor(props) {
    super(props);
    this.state = {};
    this.close = this.close.bind(this);
  }

  close() {
    const { doModalClose } = this.props;
    doModalClose();
  }
    
  render() {
    function filterResourceItems(resourceItems, groupId) {
      let items = resourceItems.filter(item => item.resource_group_id !== null && item.resource_group_id === groupId);
      items = items.sort((a,b) => a.resource_sort - b.resource_sort);
      return items;
    }
    const { theme, doGetResourceData, resourceItems, resourceGroups} = this.props;
    let groups = [];
    
    groups = resourceGroups.map(item => {
      let url = `${process.env.REACT_APP_FUDS_RESOURCE_GROUP_IMAGE_URL}` + item.groupId;
      let documentURL = `${process.env.REACT_APP_FUDS_RESOURCE_DOCUMENT_URL}`;

      return (
        <div key={"image"+item.groupId} style={{ paddingLeft: "25px", fontSize: "20px", fontWeight: "bold" }}>
          <span key={"span"+item.groupId}>
            <img key={"imageID"+item.groupId} src={url} width="50px" height="50px" onError={({ currentTarget}) => { currentTarget.onerror = null; currentTarget.style.display = "none";}}/>
            &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
            {item.groupName}
          </span>
          <br></br>
          <div key={"itemDivID"+item.groupId} style={{paddingLeft: "25px", fontSize: "16px"}}>
            <table className="table" key={"tableID"+item.groupId} >
                <thead>
                  <tr key={item.groupId + 7777777777}>
                    <th className>
                      Description
                    </th>
                    <th className>
                      URL
                    </th>
                    <th className>
                      Document
                    </th>
                  </tr>
                </thead>
                <tbody>
                  {filterResourceItems(resourceItems, item.groupId).map((item) => (
                      <tr key={item.resource_id}>
                        <td className="col-sm-4">{item.description}</td>
                        <td className="col-sm-4">
                          <a href={item.url} target="_blank" rel="noreferrer nofollow noopener" >{item.name}</a>
                        </td>
                        <td className="col-sm-4">
                          <a href={documentURL+item.resource_id} target="_blank" rel="noreferrer nofollow noopener" >{item.document_name}</a>
                        </td>
                      </tr>
                  ))}
                </tbody>
              </table>

          </div>
          <br></br>
        </div>
        
      )
    });

    return (
      <div>
        <div className={"cm-modal-header " + theme}>Resources</div> 
        <div>
          <div><br></br></div>
          <div> 
            <div style={{ 
              overflow: "auto scroll",  
              width: "875px",  
              height: "390px",
              whiteSpace: "pre-wrap",
              paddingLeft: "25px"}}> 
              {groups}
            </div>
          </div>

        </div>

        <div className="cm-modal-footer">
          <br></br>
          <br></br>
          <br></br>
          <button
            style={{ textAlign: "left" }}
            type="Close"
            className={"cm-btn cm-btn-theme " + theme}
            onClick={this.close}
          >
            Close
          </button>
        </div>
      </div>
      
    );
  }
}

export default connect(
  "selectTheme",
  "selectResourceItems",
  "selectResourceGroups",
  "doModalClose",
  "doGetResourceData",
  ResourcesModal
);