import React, { Component, PropTypes } from 'react';
import { /* Styles, */ Paper, RaisedButton, CircularProgress } from 'material-ui';
import Spacing from 'material-ui/styles/spacing';
import getMuiTheme from 'material-ui/styles/getMuiTheme';
import Pagelet from '../Pagelet/Pagelet';
import UCdefaultTheme from '../../themes/DefaultTheme';

import './ClassSchedule.css';
/**
 * Component to show Class Schedule
 */
export default class ClassSchedule extends Component {

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

  render() {
    const data = this.props.classSchedule;
    const isFetching = this.props.isFetching;
    let schedule = null;

    if (isFetching) {
      schedule = (
        <div style={{ textAlign: 'center' }}>
          <CircularProgress
            mode="indeterminate"
            color="black"
            size={119}
            thickness={7}
            style={{ margin: 10.5 }}
          />
        </div>);
    } else {
      schedule = (
        <div style={{ padding: '20px' }}>
          {
            data.Days.map((Days, key) => (
              <div className="day" key={`class-schedule-${key}`}>
                <span className="day-span">{Days.Day}</span>
                {
                  Days.Classes.map((classes, key2) => (
                    <Paper zDepth={1} className="paper" key={`class-schedule-classes-${key2}`}>
                      <h2 className="time">{classes.Time}</h2>
                      <div className="class-title">
                        {classes.Title} <br /> ({classes.Code})
                      </div>
                      <div className="class-title">
                        <b>Instructor:</b> {classes.Instructor}
                      </div>
                      <div className="class-title">
                        <b>Room:</b> {classes.Room}
                      </div>
                    </Paper>
                  ))
                  }
              </div>
              ))
            }
          <div className="row">
            <a className="weekly" href="#">View Weekly Schedule</a> {/* href needs changed */}
            <RaisedButton
              label="Add to Calendar"
              secondary
              style={{ float: 'right' }}
            />
          </div>
        </div>
      );
    }

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

ClassSchedule.propTypes = {
  classSchedule: PropTypes.object, // ESLint doesn't like generic PropTypes
  isFetching: PropTypes.bool,
};

ClassSchedule.childContextTypes = {
  muiTheme: PropTypes.object,
};