import React from 'react';
import SecurityEventsRow from './SecurityEventsRow';
import DropdownMenu from 'components/ui/inputs/DropdownMenu';
import DatePicker from '../calendar/DatePicker';
import classnames from 'classnames';
import { isPopout } from 'utils/popouts';
import { calendarFields, calendarNames } from 'utils/calendar';
import map from 'lodash/map';

import {
  loadNewCalendarType,
  loadNewCalendarDates,
  loadMoreCalendar,
  scrollHorizontally
} from 'actions/calendars';

class SecurityEvents extends React.Component {

  changeCalendarType(type) {
    const { dispatch, id, parameters } = this.props;
    dispatch(loadNewCalendarType(id, parameters, type, isPopout()));
  }

  changeCalendarDates(start, end) {
    const { dispatch, id, parameters } = this.props;
    dispatch(loadNewCalendarDates(id, parameters, start, end, isPopout()));
  }

  loadMoreCalendarEvents() {
    const { dispatch, id, parameters } = this.props;
    dispatch(loadMoreCalendar(id, parameters, isPopout()));
  }

  // handleScroll(e) {
  //   const {
  //     widgetId,
  //     isLoading,
  //     isLoadingMore,
  //     canLoadMore,
  //     scrollHorizontally,
  //     loadMore
  //   } = this.props;
  //
  //   // Horizontal scroll for keeping header in sync
  //   scrollHorizontally(e.target.scrollLeft);
  //
  //   // Vertical scroll for loading more
  //   const scrollPos = e.target.scrollTop;
  //   // How many pixels above the bottom of the element the user scrolls to before
  //   // loading more
  //   const scrollBufferPixels = 30;
  //   const maxHeight = e.target.scrollHeight - e.target.clientHeight - scrollBufferPixels;
  //   if (scrollPos >= maxHeight && !isLoading && !isLoadingMore && canLoadMore) {
  //     loadMore();
  //   }
  // }

  renderOptions() {
    const { calendarType, dateStart, dateEnd, symbol } = this.props.parameters;
    const calendarName = 'SecurityCalendar-sorter' + (calendarType ? (' SecurityCalendar-' + calendarType) : '');
    const calNames = calendarNames();
    delete calNames.economics;
    return (
      <div className="SecurityCalendarHeader">
        <div className="SecurityCalendarHeader-filters">
          <DropdownMenu items={calNames} value={calendarType} onChange={(newType) => this.changeCalendarType(newType)} defaultText="Select a Calendar.." />
          <DatePicker dateStart={dateStart} dateEnd={dateEnd} onChange={(newStart, newEnd) => this.changeCalendarDates(newStart, newEnd)} />
        </div>
      </div>
    );
  }

  render() {
    const { events, parameters } = this.props;
    const { isLoading, calendarType } = parameters;
    const fields = calendarFields(calendarType);
    return (
      <div className="SecurityCalendar" ref="container">
        {this.renderOptions()}
        <div
          className={classnames('SecurityCalendarTable', {'is-loading': isLoading})}
          onScroll={e => this.handleScroll(e)}
        >
          <table className="SecurityCalendarTable-data" role="grid">
            <thead>
              <tr role="row">
                {
                  map(fields, (field, fieldName) => {
                    return (<th key={fieldName}>{field.listName}</th>);
                  })
                }
              </tr>
            </thead>

            <tbody>
              {events.map((event) =>
                <SecurityEventsRow
                  event={event}
                  type={calendarType}
                  fields={fields}
                  key={event.id}
                />
              )}
            </tbody>
          </table>
        </div>
      </div>
    );
  }
}

SecurityEvents.propTypes = {
  dispatch: React.PropTypes.func.isRequired,
  id: React.PropTypes.number,
  widgetId: React.PropTypes.number,
  parameters: React.PropTypes.object,
  // fields: React.PropTypes.object.isRequired,
  // xValue: React.PropTypes.number,
  isLoading: React.PropTypes.bool,
  isLoadingMore: React.PropTypes.bool,
  canLoadMore: React.PropTypes.bool,
  symbol: React.PropTypes.string,
  events: React.PropTypes.array
};

export default SecurityEvents;