import React, { Component, PropTypes } from 'react';
import { /* Paper, AppBar, MenuItem, IconMenu, IconButton, */ CircularProgress } from 'material-ui';

import Spacing from 'material-ui/styles/spacing';
import getMuiTheme from 'material-ui/styles/getMuiTheme';

import Pagelet from '../Pagelet/Pagelet';
import ApplicationCard from './ApplicationCard';
import UCdefaultTheme from '../../themes/DefaultTheme';

const { object, func, node, bool } = PropTypes;

export default class Application extends Component {

  constructor(props, context) {
    // NOTE: if context breaks, try removing it from the parameters above
    super(props, context);

    this._handleFilterClick = this._handleFilterClick.bind(this);
  }

  getChildContext() {
    const theme = getMuiTheme(UCdefaultTheme);
    theme.appBar.textColor = 'white';
    theme.appBar.spacing = Spacing.desktopSubheaderHeight;
    return {
      muiTheme: theme,
    };
  }

  _handleFilterClick(evt, item) {
    this.setState({
      filterBy: item,
    });
  }

  render() {
    const { applications, isFetching } = this.props;
    let applicationItems = null;

    if (isFetching) {
      if (this.props.children) {
        applicationItems = (
          <div style={{ textAlign: 'center' }}>
            {this.props.children}
          </div>
        );
      } else {
        applicationItems = (
          <div style={{ textAlign: 'center' }}>
            <CircularProgress
              mode="indeterminate"
              color="black"
              size={119}
              thickness={7}
              style={{ margin: 10.5 }}
            />
          </div>
        );
      }
    }

    if (applications && applications.faultMessages) {
      applicationItems = (
        <div style={{ textAlign: 'left', padding: 20 }}>
          {applications.faultMessages[0].descr}
        </div>
      );
    }

    if (!isFetching && applications && applications.applications) {
      const applicationList = Array.isArray(applications.applications) ?
        applications.applications : [applications.applications];
      applicationItems = applicationList.map((application, index) => (
        <ApplicationCard
          key={index}
          acadProgDescr={application.acadProgDescr}
          termDescr={application.termDescr30}
          acceptanceStatus={application.admApplComplete}
          acadCareerDescr={application.acadCareerDescr}
        />
      ));
    }

    return (
      <div>
        {applicationItems}
      </div>
    );
  }
}

Application.propTypes = {
  children: node,
  data: object,
  isFetching: bool,
  application: object,
};

Application.childContextTypes = {
  muiTheme: object,
};