import React, { Fragment } from 'react';
import { connect } from '../../redux/store';
import { compose, lifecycle } from 'recompose';
import { selectCurrentKapp, Utils, selectHasRoleSchedulerAdmin } from '@kineticdata/bundle-common';
import { PageTitle } from '../shared/PageTitle';
import { Link } from '@reach/router';
import { actions } from '../../redux/modules/techBarApp';
import { I18n } from '@kineticdata/react';

var getStatusColor = function getStatusColor(status) {
  return status === 'Inactive' ? 'status--red' : 'status--green';
};

export var TechBarSettingsComponent = function TechBarSettingsComponent(_ref) {
  var techBars = _ref.techBars;
  return /*#__PURE__*/React.createElement(Fragment, null, /*#__PURE__*/React.createElement(PageTitle, {
    settings: true
  }), /*#__PURE__*/React.createElement("div", {
    className: "page-container"
  }, /*#__PURE__*/React.createElement("div", {
    className: "page-panel page-panel--white"
  }, /*#__PURE__*/React.createElement("div", {
    className: "page-title"
  }, /*#__PURE__*/React.createElement("div", {
    role: "navigation",
    "aria-label": "breadcrumbs",
    className: "page-title__breadcrumbs"
  }, /*#__PURE__*/React.createElement("span", {
    className: "breadcrumb-item"
  }, /*#__PURE__*/React.createElement(Link, {
    to: "../../"
  }, /*#__PURE__*/React.createElement(I18n, null, "tech bar"))), ' ', /*#__PURE__*/React.createElement("span", {
    "aria-hidden": "true"
  }, "/ "), /*#__PURE__*/React.createElement("span", {
    className: "breadcrumb-item"
  }, /*#__PURE__*/React.createElement(Link, {
    to: "../"
  }, /*#__PURE__*/React.createElement(I18n, null, "settings"))), ' ', /*#__PURE__*/React.createElement("span", {
    "aria-hidden": "true"
  }, "/ "), /*#__PURE__*/React.createElement("h1", null, /*#__PURE__*/React.createElement(I18n, null, "Tech Bars")))), /*#__PURE__*/React.createElement("div", {
    className: "list-wrapper"
  }, techBars.size > 0 && /*#__PURE__*/React.createElement("table", {
    className: "table table-sm table-striped table-schedulers table--settings"
  }, /*#__PURE__*/React.createElement("thead", {
    className: "header"
  }, /*#__PURE__*/React.createElement("tr", null, /*#__PURE__*/React.createElement("th", {
    scope: "col"
  }, /*#__PURE__*/React.createElement(I18n, null, "Name")), /*#__PURE__*/React.createElement("th", {
    scope: "col"
  }, /*#__PURE__*/React.createElement(I18n, null, "Status")), /*#__PURE__*/React.createElement("th", {
    scope: "col"
  }, /*#__PURE__*/React.createElement(I18n, null, "Location")))), /*#__PURE__*/React.createElement("tbody", null, techBars.map(function (scheduler) {
    return /*#__PURE__*/React.createElement("tr", {
      key: scheduler.id
    }, /*#__PURE__*/React.createElement("td", null, /*#__PURE__*/React.createElement(Link, {
      to: "".concat(scheduler.id)
    }, /*#__PURE__*/React.createElement(I18n, null, scheduler.values['Name']))), /*#__PURE__*/React.createElement("td", null, /*#__PURE__*/React.createElement("span", {
      className: "status ".concat(getStatusColor(scheduler.values['Status']))
    }, /*#__PURE__*/React.createElement(I18n, null, scheduler.values['Status']))), /*#__PURE__*/React.createElement("td", null, /*#__PURE__*/React.createElement(I18n, null, scheduler.values['Location'])));
  }))), techBars.size === 0 && /*#__PURE__*/React.createElement("div", {
    className: "empty-state"
  }, /*#__PURE__*/React.createElement("h5", null, /*#__PURE__*/React.createElement(I18n, null, "No Tech Bars Found")))))));
};
export var mapStateToProps = function mapStateToProps(state, props) {
  var techBars = selectHasRoleSchedulerAdmin(state.app.profile) ? state.techBarApp.schedulers : state.techBarApp.schedulers.filter(function (s) {
    return Utils.isMemberOf(state.app.profile, "Role::Scheduler::".concat(s.values['Name'])) || Utils.isMemberOf(state.app.profile, "Scheduler::".concat(s.values['Name']));
  });
  return {
    kapp: selectCurrentKapp(state),
    techBars: techBars
  };
};
export var mapDispatchToProps = {
  fetchAppDataRequest: actions.fetchAppDataRequest
};
export var TechBarSettings = compose(connect(mapStateToProps, mapDispatchToProps), lifecycle({
  componentDidMount: function componentDidMount() {// this.props.fetchAppDataRequest();
  }
}))(TechBarSettingsComponent);