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

export default class Events extends Component {
  componentDidMount() {
    const { events } = this.props;
    if (!events || (events.lastAction && events.lastAction.status === 'error') || !events.data) {
      const requestParams = {
        url: __EVENTS_URL__,
        auth: [__USERNAME__, __PASSWORD__],
      };

      this.props.fetch(requestParams, 100, 'Y');
    }
  }

  changeReadStatus() {
    const requestParams = {
      url: __CHANGE_READ_STATUS_URL__,
      auth: [__USERNAME__, __PASSWORD__],
    };
    const id = parseInt(this.props.events.data.events[0].id, 10);
    const status = this.props.events.data.events[0].status === 'R' ? 'U' : 'R';
    const numDaysPast = 7;

    const invParams = {
      url: __EVENTS_URL__,
      auth: [__USERNAME__, __PASSWORD__],
    };
    const invNumDaysPast = 100;
    const includeEvents = 'Y';

    this.props.changeReadStatus(requestParams, id, status, numDaysPast, invParams, numDaysPast, includeEvents);
  }

  invalidateEvents() {
    const requestParams = {
      url: __EVENTS_URL__,
      auth: [__USERNAME__, __PASSWORD__],
    };
    const numDaysPast = 100;
    const includeEvents = 'Y';

    this.props.invalidate(requestParams, numDaysPast, includeEvents);
  }

  copyToClipboard() {
    const copyText = this.refs.responseObject.getDOMNode().innerHTML;
    window.prompt('Copy Response:', copyText);
  }

  render() {
    let isFetching = false;
    let hasData = false;
    let responseDisp = '';

    if (this.props.events) {
      isFetching = this.props.events.isFetching;

      if (this.props.events.data) {
        hasData = true;
        const json = JSON.stringify(this.props.events.data);
        responseDisp = <pre ref="responseObject">{json}</pre>;
      }
    }

    return (
      <div>
        <h2>Events Service</h2>
        <input className="invalidateBtn" type="button" value="Invalidate Events" onClick={() => this.invalidateEvents()} />
        <input className="changeReadStatusBtn" type="button" value="Change Event Read Status" onClick={() => this.changeReadStatus()} />
        <input className="copyBtn" type="button" value="Copy Response" onClick={() => this.copyToClipboard()} disabled={isFetching || !hasData} />
        <br />
        {isFetching ? <p>Fetching Data...</p> : responseDisp}
      </div>
    );
  }
}

const { func, object } = PropTypes;
Events.propTypes = {
  events: object,
  fetch: func,
  changeReadStatus: func,
  invalidate: func,
};