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

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

    this.handleChange = this.handleChange.bind(this);
    this.close = this.close.bind(this);
    this.fomatDate = this.formatDate.bind(this);
  }

  handleChange(event) {
    const { doSetSearchBarFilter } = this.props;
    doSetSearchBarFilter(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,
      allChangeLogItems,
      searchBarFilter,
    } = this.props;
    const loginDataWk = changeLogItems;
    let districtCodes = [
      ...new Set(allChangeLogItems.map((feature) => feature.district_code)),
    ];
    let options = [];

    districtCodes.sort().forEach((item, index) => {
      if (item) {
        options.push({
          label: `${item}`,
          value: `${item}`,
        });
      }
    });

    options.unshift({ label: "All Districts", value: "All" });

    const arrayDataItems = loginDataWk.map((data) => (
      <div
        key={data.id + data.id + 9876}
        style={
          Object.keys(data).length > 0
            ? { listStyleType: "disc" }
            : { listStyleType: "none" }
        }
      >
        {data.change_date ? (
          <li key={data.change_date + data.id}>
            <b>{this.formatDate(data.change_date)}</b>
          </li>
        ) : null}
        {data.environment ? (
          <li
            key={data.environment + data.id}
            style={{ listStyleType: "none" }}
          >
            <b>Environment:</b> {data.environment}{" "}
          </li>
        ) : null}
        {data.change_type ? (
          <li
            key={data.change_type + data.id}
            style={{ listStyleType: "none" }}
          >
            <b>Change Type:</b> {data.change_type}
          </li>
        ) : null}
        {data.district_code ? (
          <li
            key={data.district_code + data.id}
            style={{ listStyleType: "none" }}
          >
            <b>District:</b> {data.district_code}
          </li>
        ) : null}
        {data.description ? (
          <li
            key={data.description + data.id}
            style={{ listStyleType: "none" }}
          >
            <b>Description:</b> {data.description}
          </li>
        ) : null}
        <br></br>
      </div>
    ));

    const filterStyle = {
      // paddingLeft: "25px",
      display: "flex",
      justifyContent: "center",
      alignItems: "center",
      gap: "40px",
      width: "700px",
      alignItems: "flex-end",
      // textAlign: "right",
      // alignItems: "flex-end" /* Aligns content to the right */,
      // width: 300px; /* Example width for the container */
      // border: "1px solid lightgray" /* For visualization */,
      padding: "5px",
    };

    return (
      <div>
        <div className={"cm-modal-header " + theme}>Change Log</div>

        <div className="cm-modal-body">
          <div style={filterStyle}>
            <label style={{ fontSize: "18px", fontWeight: "bold" }}>
              Change Log Filter
            </label>
          </div>

          <div style={filterStyle}>
            <label htmlFor="select-district">
              <b>Filter by District:</b>
            </label>
            <SelectDistrict options={options} />
          </div>

          <div style={filterStyle}>
            <label htmlFor="select-district">
              <b>Change Log Search:</b>
            </label>

            <input
              placeholder="Change Log Search..."
              style={{ width: "200px" }}
              value={searchBarFilter}
              onChange={this.handleChange}
            ></input>
          </div>
          <div
            style={{
              overflow: "auto scroll",
              width: "875px",
              height: "400px",
              whiteSpace: "pre-wrap",
            }}
          >
            <ul>{arrayDataItems}</ul>
          </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",
  "selectAllChangeLogItems",
  "selectSearchBarFilter",
  "doModalClose",
  "doSubmitNotification",
  "doGetChangeLogData",
  "doSearchChangeLogData",
  "doSetSearchBarFilter",
  ChangeLogModal
);
