import classNames from 'classnames';
import moment from 'moment';
import PropTypes from 'prop-types';
import React, { Component } from 'react';
import * as calendarViews from 'Calendar/calendarViews';
import isToday from 'Utilities/Date/isToday';
import CalendarDayConnector from './CalendarDayConnector';
import styles from './CalendarDays.css';

class CalendarDays extends Component {

  //
  // Lifecycle

  constructor(props, context) {
    super(props, context);

    this._touchStart = null;

    this.state = {
      todaysDate: moment().startOf('day').toISOString(),
      isEventModalOpen: false
    };

    this.updateTimeoutId = null;
  }

  // Lifecycle

  componentDidMount() {
    const view = this.props.view;

    if (view === calendarViews.MONTH) {
      this.scheduleUpdate();
    }

    window.addEventListener('touchstart', this.onTouchStart);
    window.addEventListener('touchend', this.onTouchEnd);
    window.addEventListener('touchcancel', this.onTouchCancel);
    window.addEventListener('touchmove', this.onTouchMove);
  }

  componentWillUnmount() {
    this.clearUpdateTimeout();

    window.removeEventListener('touchstart', this.onTouchStart);
    window.removeEventListener('touchend', this.onTouchEnd);
    window.removeEventListener('touchcancel', this.onTouchCancel);
    window.removeEventListener('touchmove', this.onTouchMove);
  }

  //
  // Control

  scheduleUpdate = () => {
    this.clearUpdateTimeout();
    const todaysDate = moment().startOf('day');
    const diff = moment().diff(todaysDate.clone().add(1, 'day'));

    this.setState({ todaysDate: todaysDate.toISOString() });

    this.updateTimeoutId = setTimeout(this.scheduleUpdate, diff);
  }

  clearUpdateTimeout = () => {
    if (this.updateTimeoutId) {
      clearTimeout(this.updateTimeoutId);
    }
  }

  //
  // Listeners

  onEventModalOpenToggle = (isEventModalOpen) => {
    this.setState({ isEventModalOpen });
  }

  onTouchStart = (event) => {
    const touches = event.touches;
    const touchStart = touches[0].pageX;

    if (touches.length !== 1) {
      return;
    }

    if (
      touchStart < 50 ||
      this.props.isSidebarVisible ||
      this.state.isEventModalOpen
    ) {
      return;
    }

    this._touchStart = touchStart;
  }

  onTouchEnd = (event) => {
    const touches = event.changedTouches;
    const currentTouch = touches[0].pageX;

    if (!this._touchStart) {
      return;
    }

    if (currentTouch > this._touchStart && currentTouch - this._touchStart > 100) {
      this.props.onNavigatePrevious();
    } else if (currentTouch < this._touchStart && this._touchStart - currentTouch > 100) {
      this.props.onNavigateNext();
    }

    this._touchStart = null;
  }

  onTouchCancel = (event) => {
    this._touchStart = null;
  }

  onTouchMove = (event) => {
    if (!this._touchStart) {
      return;
    }
  }

  //
  // Render

  render() {
    const {
      dates,
      view
    } = this.props;

    return (
      <div className={classNames(
        styles.days,
        styles[view]
      )}
      >
        {
          dates.map((date) => {
            return (
              <CalendarDayConnector
                key={date}
                date={date}
                isTodaysDate={isToday(date)}
                onEventModalOpenToggle={this.onEventModalOpenToggle}
              />
            );
          })
        }
      </div>
    );
  }
}

CalendarDays.propTypes = {
  dates: PropTypes.arrayOf(PropTypes.string).isRequired,
  view: PropTypes.string.isRequired,
  isSidebarVisible: PropTypes.bool.isRequired,
  onNavigatePrevious: PropTypes.func.isRequired,
  onNavigateNext: PropTypes.func.isRequired
};

export default CalendarDays;