import React, {PropTypes} from 'react';

import EmptyServiceTree from './EmptyServiceTree';
import ServiceBreadcrumbs from '../../components/ServiceBreadcrumbs';
import ServiceSearchFilter from './ServiceSearchFilter';
import ServiceSidebarFilters from './ServiceSidebarFilters';
import ServiceTree from '../../structs/ServiceTree';
import ServicesTable from './ServicesTable';

import FilterBar from '../../../../../../src/js/components/FilterBar';
import FilterHeadline from '../../../../../../src/js/components/FilterHeadline';
import Page from '../../../../../../src/js/components/Page';

class ServiceTreeView extends React.Component {

  getHeadline() {
    const {services} = this.props;

    if (services.filters.searchString) {
      return (
        <ul className="breadcrumb-style-headline list-unstyled list-inline">
          <li className="h4">
            Showing results for "{services.filters.searchString}"
          </li>
          <li className="h4 clickable" onClick={this.props.clearFilters}>
            <a className="small">
              (Clear)
            </a>
          </li>
        </ul>
      );
    }

    if (Object.keys(services.filters).length) {
      return (
        <FilterHeadline
          className="breadcrumb-style-headline"
          onReset={this.props.clearFilters}
          name="Service"
          currentLength={services.filtered.length}
          totalLength={services.all.length} />
      );
    }

    return null;
  }

  render() {
    const {
      modals,
      serviceTree,
      services
    } = this.props;

    const {modalHandlers} = this.context;

    if (serviceTree.getItems().length) {
      return (
        <Page>
          <Page.Header breadcrumbs={<ServiceBreadcrumbs serviceID={serviceTree.id} />} />
          <div className="flex">
            <ServiceSidebarFilters
              countByValue={services.countByFilter}
              filters={services.filters}
              handleFilterChange={this.props.handleFilterChange}
              services={services.all} />
            <div className="flex-grow">
              {this.getHeadline()}
              <FilterBar rightAlignLastNChildren={2}>
                <ServiceSearchFilter
                  handleFilterChange={this.props.handleFilterChange}
                  filters={services.filters || {}} />
                <button className="button button-stroke"
                  onClick={modalHandlers.createGroup}>
                  Create Group
                </button>
                <button className="button button-success"
                  onClick={modalHandlers.createService}>
                  Run a Service
                </button>
              </FilterBar>
              <ServicesTable services={services.filtered}
                isFiltered={!!Object.keys(services.filters).length}
                modalHandlers={modalHandlers} />
            </div>
          </div>
          {modals}
        </Page>
      );
    }

    return (
      <Page>
        <Page.Header breadcrumbs={<ServiceBreadcrumbs serviceID={serviceTree.id} />} />
        <EmptyServiceTree
          onCreateGroup={modalHandlers.createGroup}
          onCreateService={modalHandlers.createService} />
        {modals}
      </Page>
    );
  }
}

ServiceTreeView.contextTypes = {
  modalHandlers: PropTypes.shape({
    createGroup: PropTypes.func,
    createService: PropTypes.func
  }).isRequired
};

const servicesProps = PropTypes.shape({
  all: PropTypes.array,
  countByFilter: PropTypes.object,
  filters: PropTypes.object,
  filtered: PropTypes.array
}).isRequired;

ServiceTreeView.propTypes = {
  clearFilters: PropTypes.func.isRequired,
  handleFilterChange: PropTypes.func.isRequired,
  modals: PropTypes.node,
  serviceTree: PropTypes.instanceOf(ServiceTree),
  services: servicesProps
};

module.exports = ServiceTreeView;

@@ -1689,32 +1689,44 @@
     %3CPage.Header
+%0A           
  breadcrumbs=%7B%3CS
@@ -1765,32 +1765,225 @@
 viceTree.id%7D /%3E%7D
+%0A            actions=%7B%5B%7BonItemSelect: modalHandlers.createGroup, label: 'Create Group'%7D%5D%7D%0A            addButton=%7B%7BonItemSelect: modalHandlers.createService, label: 'Run a Service'%7D%7D%0A           
  /%3E%0A          %3Cd

Add actions to Service Tree view