import React from 'react';
import { connect } from 'react-redux';
import WidgetMenu from '../WidgetMenu';
import CalendarHeader from './CalendarHeader';
import CalendarTable from './CalendarTable';
import { loadNewCalendar } from 'actions/calendars';
import { calendarFields } from 'utils/calendar';
import { isPopout } from 'utils/popouts';

class CalendarWidget extends React.Component {

  componentDidMount() {
    // load calendar with passed is params otherwise load today's calendar
    const { id, parameters, dispatch } = this.props;
    dispatch(loadNewCalendar(id, parameters));
  }

  setTitle() {
    const calType = this.props.parameters.calendarType;
    document.title = calType.charAt(0).toUpperCase() + calType.slice(1);
  }

  render() {
    if (isPopout()) {
      this.setTitle();
    }

    const {
      id,
      isLoading,
      canLoadMore,
      parameters,
      displayOptions,
      events,
      showMenu,
      toggleMenu,
      dispatch
    } = this.props;
    const { calendarType } = parameters;

    const fields = calendarFields(calendarType);

    const menuData = {
      calendarType,
      displayOptions,
    };

    const tableContainerStyle = {
      height: 'calc(100% - 37px)'
    };

    const calendarDefaults = { fields, id, parameters, displayOptions, dispatch };
    return (
      <div className="Widget-content">
      <WidgetMenu widgetType="calendar" widgetId={id} showMenu={showMenu} toggleMenu={toggleMenu} menuData={menuData} />
        <CalendarHeader
          {...calendarDefaults}
        />
        <div style={tableContainerStyle}>
          <CalendarTable
            {...calendarDefaults}
            dispatch={dispatch}
            isLoading={isLoading}
            canLoadMore={canLoadMore}
            events={events}
          />
        </div>
      </div>
    );
  }
}

CalendarWidget.propTypes = {
  id: React.PropTypes.number,
  isLoading: React.PropTypes.bool.isRequired,
  canLoadMore: React.PropTypes.bool.isRequired,
  parameters: React.PropTypes.object.isRequired,
  displayOptions: React.PropTypes.object.isRequired,
  events: React.PropTypes.array,
  showMenu: React.PropTypes.bool,
  toggleMenu: React.PropTypes.func,
  dispatch: React.PropTypes.func.isRequired
};

export default connect()(CalendarWidget);