import React from "react";
import { connect } from "redux-bundler-react";
import CoordinateDisplayProjItem from "./coordinate-display-proj-item";
import _ from "lodash";

class CoordinateDisplaySettings extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      addEpsg: "",
      filterString: "",
      height: window.innerHeight * 0.5
    };
    this.close = this.close.bind(this);
    this.filterFn = this.filterFn.bind(this);
    this.updateAddEpsg = this.updateAddEpsg.bind(this);
    this.updateFilterString = this.updateFilterString.bind(this);
    this.onSelect = this.onSelect.bind(this);
    this.onRemove = this.onRemove.bind(this);
    this.getProjDef = this.getProjDef.bind(this);
  }

  close() {
    const { doModalClose } = this.props;
    doModalClose();
  }

  filterFn(proj) {
    const { filterString } = this.state;
    const testString = proj.name.toLowerCase() + " " + proj.epsg.toLowerCase();
    return testString.indexOf(filterString) !== -1;
  }

  updateAddEpsg(e) {
    const val = e.currentTarget.value;
    this.setState({ addEpsg: "" + val });
  }

  updateFilterString(e) {
    const val = e.currentTarget.value;
    this.setState({ filterString: val.toLowerCase() });
  }

  onSelect(epsg) {
    const { doSelectProjection } = this.props;
    doSelectProjection(epsg);
  }

  onRemove(epsg) {
    const { doRemoveProjection } = this.props;
    doRemoveProjection(epsg);
  }

  getProjDef() {
    const { doLoadProjDef } = this.props;
    let epsg = this.state.addEpsg;
    if (epsg.indexOf("EPSG") === -1) epsg = "EPSG:" + epsg;
    doLoadProjDef(epsg);
  }

  render() {
    const {
      theme,
      projectionList,
      displayProjection,
      projectionCanUseEPSGIO
    } = this.props;
    const { addEpsg, filterString, height } = this.state;
    const filteredProjections = _.filter(projectionList, this.filterFn);
    return (
      <div>
        <div className={"cm-modal-header " + theme}>
          Coordinate Display Settings
        </div>
        <div
          className="cm-modal-body"
          style={{ height: height, overflow: "auto" }}
        >
          <div className="row">
            <div className="col-xs-6">
              <div className="cm-form-group">
                <label className="cm-control-label">
                  Filter the list by searching names and EPSG codes here:
                </label>
                <input
                  onChange={this.updateFilterString}
                  value={filterString}
                  type="text"
                  className="cm-form-control cm-input-sm"
                  placeholder="Filter list..."
                ></input>
              </div>
            </div>
            <div className="col-xs-6">
              <div className="cm-form-group">
                <label className="cm-control-label">
                  Add more supported projections from{" "}
                  <a
                    target="_blank"
                    rel="noopener noreferrer"
                    href="https://epsg.io"
                  >
                    epsg.io
                  </a>
                </label>
                {projectionCanUseEPSGIO ? (
                  <div className="cm-input-group">
                    <input
                      onChange={this.updateAddEpsg}
                      value={addEpsg}
                      type="text"
                      className="cm-form-control cm-input-sm"
                      placeholder="Enter the EPSG code i.e. EPSG:4326 or 4326"
                    ></input>
                    <span className="cm-input-group-btn">
                      <button
                        onClick={this.getProjDef}
                        className={"cm-btn cm-btn-theme cm-btn-sm " + theme}
                        type="button"
                      >
                        Go
                      </button>
                    </span>
                  </div>
                ) : (
                  <div>Connection to EPSG.io unavailable at this time</div>
                )}
              </div>
            </div>
          </div>
          <div className="row">
            <ul
              className="cm-list-group thin-scrollbar"
              style={{
                margin: "15px",
                overflow: "auto"
              }}
            >
              {filteredProjections.map((proj, i) => {
                return (
                  <CoordinateDisplayProjItem
                    proj={proj}
                    epsg={displayProjection}
                    key={proj.epsg}
                    i={i}
                    onSelect={this.onSelect}
                    onRemove={this.onRemove}
                  />
                );
              })}
            </ul>
          </div>
        </div>
        <div className="cm-modal-footer">
          <button
            className={"cm-btn cm-btn-theme " + theme}
            onClick={this.close}
          >
            Close
          </button>
        </div>
      </div>
    );
  }
}

export default connect(
  "selectTheme",
  "selectProjectionList",
  "selectDisplayProjection",
  "selectProjectionCanUseEPSGIO",
  "doModalClose",
  "doRemoveProjection",
  "doSelectProjection",
  "doLoadProjDef",
  CoordinateDisplaySettings
);
