import React from "react";
import { connect } from "redux-bundler-react";
import { SearchInput, SearchResultsList } from "../../application-controls";

class ChangeLogModal extends React.Component {
  constructor(props) {
    super(props);

    this.state = {
      searchBarStatus: "",
    };
    this.handleChange = this.handleChange.bind(this);
    this.close = this.close.bind(this);
    this.fomatDate = this.formatDate.bind(this);
  }

  handleChange(event){
    const {doSearchChangeLogData } = this.props;
    doSearchChangeLogData(event);
    this.setState({
      searchBarStatus: event.target.value
    })
  }
  
  close() {
    const { doModalClose } = this.props;
    doModalClose();
  }

  formatDate(oldDate){
    let newDate = new Date(oldDate);
    newDate = newDate.toLocaleDateString('default', { month: 'long', day: 'numeric', year: 'numeric'});
    return newDate
  } 
    
  render() {
    const { theme, doGetChangeLogData, changeLogItems } = this.props;
    const loginDataWk = changeLogItems;
    const arrayDataItems = loginDataWk.map( data => 
      
      <li style={Object.keys(data).length > 0 ? {listStyleType: "disc"}: {listStyleType: "none"} }>
        {data.change_date ? <li key={data.change_date}><b>{this.formatDate(data.change_date)}</b></li> : null}
        {data.environment ? <li key={data.environment} style={{listStyleType: "none"}}><b>Environment:</b> {data.environment} </li> : null} 
        {data.change_type ? <li key={data.change_date} style={{listStyleType: "none"}}><b>Change Type:</b> {data.change_type}</li> : null}
        {data.district_code ? <li key={data.district_code} style={{listStyleType: "none"}}><b>District:</b> {data.district_code}</li> : null}
        {data.description ? <li key={data.description} style={{listStyleType: "none"}}><b>Description:</b> {data.description}</li> : null}
        <br></br>
      </li>
      
    )

    return (
      <div>
        <div className={"cm-modal-header " + theme}>Change Log</div>
        <div
          className="cm-modal-body"
          style={{ height: 290, top: 0, bottom: 0, left: 0, right: 0 }}
        >
          <div className="cm-form-group"> 
            <input 
            placeholder="Change Log Search..."
            style={{border: "none", width: 600}}
            value={this.state.searchBarStatus}
            onChange={this.handleChange}
            ></input>
          </div>
          <div className="cm-form-group"> 
            <div style={{ 
              overflow: "auto scroll",  
              width: "875px",  
              height: "300px",
              whiteSpace: "pre-wrap",}}> 
              <ul>{arrayDataItems}</ul>
              
            </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",
  "selectChangeLogItems",
  "doModalClose",
  "doSubmitNotification",
  "doGetChangeLogData",
  "doSearchChangeLogData",
  ChangeLogModal
);