import React, { Component, PropTypes } from "react";
import {
  CircularProgress,
  IconButton,
  IconMenu,
  List,
  MenuItem,
  Subheader
} from "material-ui";
import FilterListIcon from "material-ui/svg-icons/content/filter-list";

import Spacing from "material-ui/styles/spacing";
import { white } from "material-ui/styles/colors";
import getMuiTheme from "material-ui/styles/getMuiTheme";
import UCdefaultTheme from "../../themes/DefaultTheme";
import ServiceIndicator from "./ServiceIndicator";
import Pagelet from "../Pagelet/Pagelet";
import "./ServiceIndicators.css";

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

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

    this.state = {
      filterBy: "All"
    };
    this.filterMenuPush = this.filterMenuPush.bind(this);
    this.handleFilterClick = this.handleFilterClick.bind(this);
  }

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

    return {
      muiTheme: theme
    };
  }

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

  filterMenuPush(filterMenuItems, deptidDescr, index) {
    filterMenuItems.push(
      <MenuItem
        key={`item${index + 1}`}
        disabled={this.state.filterBy === deptidDescr}
        value={deptidDescr}
        primaryText={deptidDescr}
      />
    );
  }

  render() {
    let content;
    const filterMenuItems = [
      <MenuItem
        key={"item0"}
        value="All"
        disabled={this.state.filterBy === "All"}
        primaryText="Show All"
      />
    ];

    const noData = () => (
      <div style={{ textAlign: "center" }}>
        <br />No service indicators found.<br />
        <br />
      </div>
    );

    const circularProgress = () => (
      <div style={{ textAlign: "center" }}>
        <CircularProgress
          mode="indeterminate"
          color="black"
          size={119}
          thickness={7}
          style={{ margin: 10.5 }}
        />
      </div>
    );

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

    if (this.props.isFetching) {
      content = this.props.children || circularProgress();
    } else if (
      !this.props.data ||
      !this.props.data.items ||
      this.props.data.items.length === 0
    ) {
      content = noData();
    } else {
      const groupedData = groupByDeptid(this.props.data.items);

      content = Object.keys(groupedData).map((deptidDescr, index) => {
        this.filterMenuPush(filterMenuItems, deptidDescr, index);

        const serviceIndicators = groupedData[deptidDescr].map(
          (data, counter) => (
            <ServiceIndicator data={data} key={`sii-${counter}`} />
          )
        );

        if (this.state.filterBy === "All") {
          return (
            <List className="ih-holds-bold" key={`list-${index}`}>
              <Subheader>{deptidDescr}</Subheader>
              <hr className="ih-holds-hr" />
              {serviceIndicators}
            </List>
          );
        } else if (deptidDescr === this.state.filterBy) {
          return (
            <List className="ih-holds-bold" key={`list2-${index}`}>
              <Subheader>{deptidDescr}</Subheader>
              <hr className="ih-holds-hr" />
              {serviceIndicators}
            </List>
          );
        }
      });
    }

    const filterMenu = (
      <IconMenu
        anchorOrigin={{ horizontal: "right", vertical: "bottom" }}
        targetOrigin={{ horizontal: "right", vertical: "top" }}
        onChange={this.handleFilterClick}
        iconButtonElement={
          <IconButton>
            <FilterListIcon color={white} />
          </IconButton>
        }
      >
        {filterMenuItems}
      </IconMenu>
    );

    return (
      <div>
        {/* iconElementRight={filterMenuItems.length > 1 ? filterMenu : null} */}
        {content}
      </div>
    );
  }
}

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

ServiceIndicators.childContextTypes = {
  muiTheme: object
};