import React from 'react';

class CoordinateDisplayProjItem extends React.Component {
  constructor(props){
    super(props);
    this.onSelect = this.onSelect.bind(this);
    this.onRemove =  this.onRemove.bind(this);
  }
  
  onSelect(){
    const { proj, onSelect } = this.props;
    onSelect(proj.epsg);
  }

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

  render(){ 
    const { proj, epsg, i } = this.props;
    const link = "https://epsg.io/" + proj.epsg.split(":")[1];
    return (
      <li className="cm-list-group-item clearfix">
        <div className="col-md-6">
          <div style={{margin:0}}  className="radio">
            <label>
              <input onChange={this.onSelect} type="radio" name="choose-epsg" id={"choose-epsg" + i} value={proj.epsg} checked={proj.epsg === epsg}></input>
              {proj.name}
            </label>
          </div>
        </div>
        <div className="col-md-3">
            <a
              href={link}
              target="_blank"
              title="More information on epsg.io"
            >
              {proj.epsg}
            </a>
        </div>
        <div className="col-md-3">
          <div className="pull-right">
            <button onClick={this.onRemove} className="cm-btn cm-btn-link cm-btn-xs">Remove</button>
          </div>
        </div>
      </li>
    )
  }
}

export default CoordinateDisplayProjItem;