import React from 'react';
import { Link, Router } from '@reach/router';
import { connect } from '../../redux/store';
import { compose } from 'recompose';
import { ErrorUnauthorized, selectHasRoleSchedulerAdmin, selectHasRoleSchedulerManager, selectHasRoleSchedulerAgent } from '@kineticdata/bundle-common';
import { SchedulerSettings } from './SchedulerSettings';
import { TechBarMetrics } from './TechBarMetrics';
import { TechBarSettings } from './TechBarSettings';
import { TechBar } from './tech-bar/TechBar';
import { TechBarSettingsForm } from './tech-bar/TechBarSettingsForm';
import { AppointmentForm } from './tech-bar/AppointmentForm';
import { I18n } from '@kineticdata/react';
export var SettingsComponent = function SettingsComponent(_ref) {
  var kappSlug = _ref.kappSlug,
      hasSettingsAccess = _ref.hasSettingsAccess;
  return hasSettingsAccess ? /*#__PURE__*/React.createElement(Router, null, /*#__PURE__*/React.createElement(TechBarMetrics, {
    path: "metrics/:mode"
  }), /*#__PURE__*/React.createElement(TechBarMetrics, {
    path: "metrics"
  }), /*#__PURE__*/React.createElement(AppointmentForm, {
    path: "general/:techBarId/appointment/:id"
  }), /*#__PURE__*/React.createElement(TechBarSettingsForm, {
    path: "general/:techBarId/edit"
  }), /*#__PURE__*/React.createElement(TechBar, {
    path: "general/:techBarId"
  }), /*#__PURE__*/React.createElement(TechBarSettings, {
    path: "general"
  }), /*#__PURE__*/React.createElement(SchedulerSettings, {
    path: "schedulers/*"
  }), /*#__PURE__*/React.createElement(SettingsNavigation, {
    "default": true
  })) : /*#__PURE__*/React.createElement(ErrorUnauthorized, null);
};

var mapStateToProps = function mapStateToProps(state, props) {
  return {
    kappSlug: state.app.kappSlug,
    hasSettingsAccess: selectHasRoleSchedulerAgent(state.app.profile) || selectHasRoleSchedulerManager(state.app.profile) || selectHasRoleSchedulerAdmin(state.app.profile)
  };
};

var mapDispatchToProps = {};
export var Settings = compose(connect(mapStateToProps, mapDispatchToProps))(SettingsComponent);

var SettingsCard = function SettingsCard(_ref2) {
  var path = _ref2.path,
      icon = _ref2.icon,
      name = _ref2.name,
      description = _ref2.description;
  return /*#__PURE__*/React.createElement(Link, {
    to: path,
    className: "card card--light"
  }, /*#__PURE__*/React.createElement("div", {
    className: "card__bar card__bar--sm card__bar--dark"
  }), /*#__PURE__*/React.createElement("div", {
    className: "card__col"
  }, /*#__PURE__*/React.createElement("div", {
    className: "card__row-title"
  }, /*#__PURE__*/React.createElement("span", {
    className: "fa fa-".concat((icon || 'cog').replace(/^fa-/i, ''), " fa-fw fa-rounded bg-dark")
  }), /*#__PURE__*/React.createElement("span", null, /*#__PURE__*/React.createElement(I18n, null, name))), /*#__PURE__*/React.createElement("div", {
    className: "card__row text-muted"
  }, /*#__PURE__*/React.createElement(I18n, null, description))));
};

var SettingsNavigationComponent = function SettingsNavigationComponent(_ref3) {
  var hasManagerAccess = _ref3.hasManagerAccess;
  return /*#__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("h1", null, /*#__PURE__*/React.createElement(I18n, null, "Settings")))), /*#__PURE__*/React.createElement("div", {
    className: "cards cards--seconds"
  }, /*#__PURE__*/React.createElement(SettingsCard, {
    name: "Metrics",
    path: "metrics",
    icon: "fa-bar-chart",
    description: "View metrics for the Tech Bars."
  }), /*#__PURE__*/React.createElement(SettingsCard, {
    name: "Tech Bars",
    path: "general",
    icon: "fa-gear",
    description: "View and modify Tech Bar settings."
  }), hasManagerAccess && /*#__PURE__*/React.createElement(SettingsCard, {
    name: "Schedulers",
    path: "schedulers",
    icon: "fa-calendar",
    description: "View and modify scheduler settings, including event types and availability."
  }))));
};

var mapStateToPropsNav = function mapStateToPropsNav(state) {
  return {
    hasManagerAccess: selectHasRoleSchedulerManager(state.app.profile) || selectHasRoleSchedulerAdmin(state.app.profile)
  };
};

export var SettingsNavigation = compose(connect(mapStateToPropsNav))(SettingsNavigationComponent);