/* eslint-disable */
import React, { Component, PropTypes } from 'react';
import _ from 'lodash';
import moment from 'moment';
import { Styles, AppCanvas, AppBar, IconMenu, Card, CardHeader, FontIcon, IconButton, CardText, CardTitle, List, ListItem, ListDivider, Toolbar, ToolbarGroup, DropDownMenu, Paper,} from 'material-ui';

import CircularProgress from 'material-ui/lib/circular-progress';

import '../../ServiceIndicators.css';
import ThemeManager from 'material-ui/lib/styles/theme-manager.js';
import UCdefaultTheme from 'ih-portal-theme/src/components/UCdefaultTheme.js';

import ServiceIndicator from './ServiceIndicator.jsx';
import NoHolds from 'material-ui/lib/svg-icons/action/announcement';

const MenuItem = require('material-ui/lib/menus/menu-item');
const MoreVertIcon = require('material-ui/lib/svg-icons/navigation/more-vert');
const FilterIcon = require('material-ui/lib/svg-icons/content/filter-list');

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

export default class ServiceIndicators extends Component {
  constructor() {
    super(...arguments);

    this.state = {
      filterBy: 'All',
    };

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

  getChildContext() {
    const theme = ThemeManager.getMuiTheme(UCdefaultTheme);
    theme.appBar.textColor = 'white';
    theme.appBar.spacing = Styles.Spacing.desktopDropDownMenuItemHeight;

    return {
      muiTheme: theme,
    };
  }

  handleFilterClick(e, item){
    this.setState({ filterBy: item });
  }

	render() {

    let content = '';
    let groupedData = '';
    let filterMenuItems = [<MenuItem value='All' disabled={this.state.filterBy==='All'} primaryText='Show All'/>];

    const noData = ()=> {
      return (
        <div style={{ textAlign: 'center' }}>
          <br/>No service indicators at this time.<br/>
          <NoHolds style={{height: 205, width: 205}} color="#CCECD1"/>
        </div>
      );
    };

    if (this.props.isFetching) {
      content = this.props.children || <div style={{ textAlign: 'center' }}><CircularProgress mode="indeterminate" color="black" size={2} /></div>;
    } else if( !this.props.data || !this.props.data.items || this.props.data.items.length === 0) {
      content = noData();
    } else {
      const groupedData = _.chain(this.props.data.items).groupBy('deptidDescr').value();
      content = Object.keys(groupedData).map(deptidDescr => {
        filterMenuItems.push(<MenuItem disabled={this.state.filterBy===deptidDescr} value={deptidDescr} primaryText={deptidDescr}/>);
        let i = groupedData[deptidDescr].map((c) => {
  				return (
            <ServiceIndicator data={c}/>
  				);
  		  });
        if (this.state.filterBy ==='All'){
          return (<List className="ih-holds-bold" subheader={deptidDescr} subheaderStyle={{fontWeight: '500 !important'}}> <hr className="ih-holds-hr" /> {i}</List>);
        } else if (deptidDescr===this.state.filterBy){
          return (<List className="ih-holds-bold" subheader={deptidDescr}> <hr className="ih-holds-hr" /> {i}</List>);
        }
      });
    }

    const filterMenu = (
      <div>
        <IconMenu onChange={this.handleFilterClick} iconButtonElement={<IconButton><FilterIcon color={Styles.Colors.white}/></IconButton>}>
          {filterMenuItems}
        </IconMenu>
      </div>
    );

		return (
    <div>
      <Paper>
        <AppBar
		  	  title="Service Indicators"
			    showMenuIconButton={false}
          className="ih-pagelet-title"
		  	  iconElementRight={filterMenuItems.length > 1 ? filterMenu : null}
			  />
        <hr className="ih-holds-headerHr"/>
        {content}
      </Paper>
    </div>
		);
	}
}

ServiceIndicators.propTypes = {
  children: node,
  data: object,
  fetch: func.isRequired,
  invalidate: func.isRequired,
  isFetching: bool,
};

ServiceIndicators.childContextTypes = {
  muiTheme: object,
};