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;
  
    const arrayDataItems = resourceItems.map( data => 
      <li style={Object.keys(data).length > 0 ? {listStyleType: "disc"}: {listStyleType: "none"} }>
        
        {data.name ? <li style={{listStyleType: "none"}}> 
            <span><a href={data.url} target="_blank" rel="noreferrer nofollow noopener" >{data.name}</a>
             &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
            {data.description}
            </span>
            </li> : null} 
            
        <br></br>
      </li>
    );

    // const moose = resourceItems.map( data => 
    //   <div>
    //         <table className="table">
    //           <tbody>
    //             <tr key={data.id + 7777777}>
    //               <td className="col-sm-4">
    //               <a href={data.url} target="_blank" rel="noreferrer nofollow noopener" >{data.name}</a>
    //               </td>
    //               <td className="col-sm-4">
    //               {data.description}
    //               </td>
    //             </tr>
    //           </tbody>
    //         </table>
    //     <br></br>
    //     </div>
    // );
    function formatGroupItems(resourceItems, groupId) {
      
      const wolf = resourceItems.filter(item => item.resources_group_id !== null && item.resources_group_id.toString() === groupId);
      
      return (
        wolf.map( data => 
          <div>
                <table className="table">
                  <tbody>
                    <tr key={data.id + 7777777}>
                      <td className="col-sm-4">
                      <a href={data.url} target="_blank" rel="noreferrer nofollow noopener" >{data.name}</a>
                      </td>
                      <td className="col-sm-4">
                      {data.description}
                      </td>
                    </tr>
                  </tbody>
                </table>
            <br></br>
            </div>
        )
      )

    }
  
    let url = "https://cwbi-app-dev.sec.usace.army.mil/int/fudsmis/fudsmis/resource_group_images/";
    let src = url + "5213";

    // let groups = [];
    let groups = Object.keys(resourceGroups).map(item => {
       return (
        <div style={{ paddingLeft: "10px", fontSize: "20px", fontWeight: "bold" }}>
          <span>
          <img src={url+item} alt="logo" width="50px" height="50px"/>
          &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
            {resourceGroups[item].groupName}
          </span>
          <br></br>
         <br></br>
          <div style={{paddingLeft: "25px"}}>
            {formatGroupItems(resourceItems, item)}
          </div>
         <br></br>
         <br></br>
         <br></br>
        
        </div>
        
       
       )
    });
      
      
    let bob = <img src={src} alt="logo" width="40px" height="40px"/>;
    

    
    return (
      <div>
        <div className={"cm-modal-header " + theme}>Resources</div>
          
        <div
          className="cm-modal-body"
          style={{ height: 290, top: 0, bottom: 0, left: 0, right: 0 }}
        >

          {/* <img src={src} alt="logo" width="50px" height="50px"/> */}
         {/* {groups} */}

          <div><br></br></div>
          <div className="cm-form-group"> 
            <div style={{ 
              overflow: "auto scroll",  
              width: "875px",  
              height: "300px",
              whiteSpace: "pre-wrap",}}> 
              {/* <ul>{arrayDataItems}</ul>  */}
              {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
);