import React, { Component, PropTypes } from 'react';

/* eslint-disable id-length */
/* eslint-enable */

// Material UI components
// NOTE: importing separately until webpack can use ES6 imports to remove unused code
import MenuItem from 'material-ui/MenuItem';
import IconMenu from 'material-ui/IconMenu';
import IconButton from 'material-ui/IconButton';
import List from 'material-ui/List';
import Subheader from 'material-ui/Subheader';
import CircularProgress from 'material-ui/CircularProgress';
import FilterListIcon from 'material-ui/svg-icons/content/filter-list';
import Spacing from 'material-ui/styles/spacing';
import getMuiTheme from 'material-ui/styles/getMuiTheme';

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

import './Checklist.css';

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

export default class Checklist extends Component {

  constructor(props, context) {
    // NOTE: if context breaks, try removing it from the parameters above
    super(props, context);
    this.state = { filterBy: 'All' };
    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 { checklist, isFetching /* , style */ } = this.props;

    const filterMenuItems = [];
    let groupedData;

    const groupByAdminFunc = items => (
      items.reduce((acc, item) => {
        const newAcc = acc;
        if (newAcc[item.adminFunctionDescr] === undefined) {
          newAcc[item.adminFunctionDescr] = [item];
        } else {
          newAcc[item.adminFunctionDescr].push(item);
        }
        return newAcc;
      }, {})
    );

    // initialize component display with progress indicator
    let checklistData = this.props.children ||
      <div style={{ textAlign: 'center' }}>
        <CircularProgress
          mode="indeterminate"
          color="black"
          size={119}
          thickness={7}
          style={{ margin: 10.5 }}
        />
      </div>;

    let numFilterMenuItems = 0;

    // handle empty state
    if (!isFetching && checklist) {
      checklistData = (<div style={{ textAlign: 'center' }}>
        <br />You have no checklist items.<br /><br />
      </div>);
    }

    if (!isFetching && checklist && checklist.data &&
          checklist.data.items && checklist.data.items.length > 0) {
      const { items } = checklist.data;
      // grab the grouped data by administrative function
      groupedData = groupByAdminFunc(items);

      filterMenuItems.push(<MenuItem key={`filterMenuItem-${numFilterMenuItems++}`} value="All" disabled={this.state.filterBy === 'All'} primaryText="Show All" />);

      let checklistItemKey = 0;

      checklistData = Object.keys(groupedData).map((adminFunc) => {
        filterMenuItems.push(
          <MenuItem
            key={`filterMenuItem-${numFilterMenuItems++}`}
            disabled={this.state.filterBy === adminFunc}
            value={adminFunc}
            primaryText={adminFunc}
          />
        );

        let itemKey = 0;
        const checklistItems = groupedData[adminFunc].map((_checklist) => {
          return (
            <ChecklistItem
              key={`contentItem-${checklistItemKey}_checklistItem-${itemKey++}`}
              title={_checklist.checklistCdDescr}
              itemStatusDescription={_checklist.itemStatusLovdescr}
              itemStatus={_checklist.itemStatus}
              dueDt={_checklist.dueDt}
              responsibleName={_checklist.responsibleName}
              information={_checklist.information}
              adminFunction={_checklist.adminFunctionDescr}
              url={_checklist.url ? _checklist.url : undefined}
            />
          );
        });

        if (this.state.filterBy === 'All') {
          return <List key={`contentItem-${checklistItemKey++}`}><Subheader>{adminFunc}</Subheader>{checklistItems}</List>;
        } else if (adminFunc === this.state.filterBy) {
          return <List key={`contentItem-${checklistItemKey++}`} subheader={adminFunc}>{checklistItems}</List>;
        }
      });
    }

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

Checklist.propTypes = {
  checklist: object,
  children: node,
  isFetching: bool,
  style: object,
};

Checklist.childContextTypes = {
  muiTheme: object,
};