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() {
    const { theme, doGetResourceData, resourceItems, resourceGroups} = this.props;
    
    function formatGroupHeader(groupId) {
      return (
          <div key={"DIVID"+groupId}>
                <table className="table" key={"tableID"+groupId} >
                  <tbody>
                    <tr key={groupId + 7777777777}>
                      <th className="col-sm-4">
                        Description
                      </th>
                      <th className="col-sm-4">
                        URL
                      </th>
                      <th className="col-sm-4">
                        Document
                      </th>
                    </tr>
                  </tbody>
                </table>
            <br></br>
          </div>
      )
    }

    function formatGroupItems(resourceItems, groupId) {
      let docurl = `${process.env.REACT_APP_FUDS_RESOURCE_DOCUMENT_URL}`;
      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.map( data => 
          
          <div key={"DIVID"+data.resource_id}>
                <table className="table" key={"tableID"+data.resource_id} >
                  <tbody>
                    <tr key={data.resource_id + 7777777}>
                      <td className="col-sm-4">
                        {data.description}
                      </td>
                      <td className="col-sm-4">
                        <a href={data.url} target="_blank" rel="noreferrer nofollow noopener" >{data.name}</a>
                      </td>
                      <td className="col-sm-4">
                        <a href={docurl+data.resource_id} target="_blank" rel="noreferrer nofollow noopener" >{data.document_name}</a>
                      </td>
                    </tr>
                  </tbody>
                </table>
            <br></br>
          </div>
        )
      )

    }
  
    let groups = [];
    
    groups = resourceGroups.map(item => {
       let url = `${process.env.REACT_APP_FUDS_RESOURCE_GROUP_IMAGE_URL}` + item.groupId;
    
       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>
          <br></br>
          <div key={"itemDivID"+item.groupId} style={{paddingLeft: "25px"}}>
            {formatGroupHeader(item.groupId)}
            {formatGroupItems(resourceItems, item.groupId)}
          </div>
          <br></br>
          <br></br>
          <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
);