import React, { PropTypes } from 'react';
import moment from 'moment';

class EncounterTeaser extends React.Component {

  constructor() {
    super();
  }

  handleSelect() {
    this.props.onSelect(this.props.encounter);
  }

  render() {
    const encounter = this.props.encounter;
    const online = navigator.onLine;
    if (encounter) {
    const shark = encounter.shark_id ? `${encounter.shark_name} ${encounter.shark_id}` : 'Unknown';
      const photos = encounter.media && encounter.media.length ? encounter.media.filter(m => m.type === 'img') : null;
      const age = moment(`${encounter.trip_date} ${encounter.encounter_time}`).fromNow();

      const photoDisplay = photos && photos.length ? (
        <div className="encounter-teaser-photo">
          {online ? <img ref="thumb" alt="" src={photos[0].thumb_url} onLoad={() => {this.refs.thumb.classList.add('img--loaded');}} /> : <div className="encounter-teaser-photo-offline">Go online to view encounter images</div> }
        </div>
      ) : null;

      return (
        <article className="encounter-teaser" onClick={this.handleSelect.bind(this)}>
          {photoDisplay}

          <header className="encounter-teaser-header">
            Encounter:
          </header>

          <div className="encounter-teaser-body">

            <div className="encounter-teaser-text">
              {shark}
              {' '}
              spotted by
              {' '}
              {encounter.contributor}
            </div>

            <div className="encounter-teaser-meta">
              {age}
            </div>
          </div>
        </article>
      );
    } else {
      return (<article className="encounter-teaser"/>);
    }
  }

}

EncounterTeaser.propTypes = {
  encounter: PropTypes.object
};

export default EncounterTeaser;