import React from 'react';
import { connect } from '../redux/store';
import { compose, withHandlers, withState } from 'recompose';
import { selectHasRoleSchedulerAdmin, selectHasRoleSchedulerManager, selectHasRoleSchedulerAgent, Utils } from '@kineticdata/bundle-common';
import { Link } from '@reach/router';
import { Dropdown, DropdownToggle, DropdownMenu, Nav, NavItem } from 'reactstrap';
import { I18n } from '@kineticdata/react';
import { isActiveClass } from '../utils';
export var SidebarComponent = function SidebarComponent(_ref) {
  var hasSettingsAccess = _ref.hasSettingsAccess,
      techBars = _ref.techBars,
      openDropdown = _ref.openDropdown,
      toggleDropdown = _ref.toggleDropdown,
      hasTechBarDisplayRole = _ref.hasTechBarDisplayRole;
  return /*#__PURE__*/React.createElement("div", {
    className: "sidebar sidebar--tech-bar"
  }, /*#__PURE__*/React.createElement("div", {
    className: "sidebar-group--content-wrapper"
  }, /*#__PURE__*/React.createElement("div", {
    className: "sidebar-group"
  }, /*#__PURE__*/React.createElement(Nav, {
    vertical: true
  }, /*#__PURE__*/React.createElement(NavItem, null, /*#__PURE__*/React.createElement(Link, {
    to: "past",
    getProps: isActiveClass('nav-link'),
    className: "nav-link"
  }, /*#__PURE__*/React.createElement("div", null, /*#__PURE__*/React.createElement("div", null, /*#__PURE__*/React.createElement(I18n, null, "Past Appointments"))))))), /*#__PURE__*/React.createElement("div", {
    className: "sidebar-group sidebar-group--tech-bars"
  }, /*#__PURE__*/React.createElement("div", {
    className: "sidebar-group__label"
  }, /*#__PURE__*/React.createElement(I18n, null, "Tech Bars"), /*#__PURE__*/React.createElement(Link, {
    to: "tech-bars",
    className: "view-all"
  }, /*#__PURE__*/React.createElement(I18n, null, "View All"))), /*#__PURE__*/React.createElement(Nav, {
    vertical: true
  }, techBars.map(function (techBar) {
    return /*#__PURE__*/React.createElement(NavItem, {
      key: techBar.id
    }, /*#__PURE__*/React.createElement(Link, {
      to: "appointment/".concat(techBar.values['Id']),
      className: "nav-link"
    }, /*#__PURE__*/React.createElement("div", null, /*#__PURE__*/React.createElement("div", null, /*#__PURE__*/React.createElement(I18n, null, techBar.values['Name'])))), hasTechBarDisplayRole(techBar.values['Name']) && /*#__PURE__*/React.createElement(Dropdown, {
      toggle: toggleDropdown(techBar.id),
      isOpen: openDropdown === techBar.id
    }, /*#__PURE__*/React.createElement(DropdownToggle, {
      color: "link",
      className: "btn-sm"
    }, /*#__PURE__*/React.createElement("span", {
      className: "fa fa-ellipsis-v fa-lg"
    })), /*#__PURE__*/React.createElement(DropdownMenu, {
      right: true
    }, /*#__PURE__*/React.createElement(Link, {
      to: "display/".concat(techBar.values['Id'], "/checkin"),
      onClick: toggleDropdown(techBar.id),
      className: "dropdown-item",
      target: "_blank"
    }, /*#__PURE__*/React.createElement("span", {
      className: "fa fa-fw fa-external-link mr-2"
    }), /*#__PURE__*/React.createElement("span", null, /*#__PURE__*/React.createElement(I18n, null, "Check In"))), /*#__PURE__*/React.createElement(Link, {
      to: "display/".concat(techBar.values['Id'], "/feedback"),
      onClick: toggleDropdown(techBar.id),
      className: "dropdown-item",
      target: "_blank"
    }, /*#__PURE__*/React.createElement("span", {
      className: "fa fa-external-link fa-fw mr-2"
    }), /*#__PURE__*/React.createElement("span", null, /*#__PURE__*/React.createElement(I18n, null, "Feedback"))), /*#__PURE__*/React.createElement(Link, {
      to: "display/".concat(techBar.values['Id'], "/checkin?crosslink"),
      onClick: toggleDropdown(techBar.id),
      className: "dropdown-item",
      target: "_blank"
    }, /*#__PURE__*/React.createElement("span", {
      className: "fa fa-external-link fa-fw mr-2"
    }), /*#__PURE__*/React.createElement("span", null, /*#__PURE__*/React.createElement(I18n, null, "Check In"), " / ", /*#__PURE__*/React.createElement(I18n, null, "Feedback"))), /*#__PURE__*/React.createElement(Link, {
      to: "display/".concat(techBar.values['Id'], "/overhead"),
      onClick: toggleDropdown(techBar.id),
      className: "dropdown-item",
      target: "_blank"
    }, /*#__PURE__*/React.createElement("span", {
      className: "fa fa-external-link fa-fw mr-2"
    }), /*#__PURE__*/React.createElement("span", null, /*#__PURE__*/React.createElement(I18n, null, "Overhead"))))));
  })))), hasSettingsAccess && /*#__PURE__*/React.createElement("div", {
    className: "sidebar-group sidebar-group--settings"
  }, /*#__PURE__*/React.createElement("ul", {
    className: "nav flex-column settings-group"
  }, /*#__PURE__*/React.createElement("li", null, /*#__PURE__*/React.createElement(Link, {
    to: "settings/general",
    className: "nav-link"
  }, /*#__PURE__*/React.createElement(I18n, null, "Settings"), /*#__PURE__*/React.createElement("span", {
    className: "fa fa-fw fa-angle-right"
  }))))));
};
export var mapStateToProps = function mapStateToProps(state) {
  return {
    techBars: state.techBarApp.schedulers.filter(function (s) {
      return s.values['Status'] === 'Active';
    }),
    hasSettingsAccess: selectHasRoleSchedulerManager(state.app.profile) || selectHasRoleSchedulerAdmin(state.app.profile) || selectHasRoleSchedulerAgent(state.app.profile),
    profile: state.app.profile
  };
};

var toggleDropdown = function toggleDropdown(_ref2) {
  var setOpenDropdown = _ref2.setOpenDropdown,
      openDropdown = _ref2.openDropdown;
  return function (dropdownSlug) {
    return function () {
      return setOpenDropdown(dropdownSlug === openDropdown ? false : dropdownSlug);
    };
  };
};

var hasTechBarDisplayRole = function hasTechBarDisplayRole(_ref3) {
  var profile = _ref3.profile;
  return function (techBarName) {
    return Utils.isMemberOf(profile, "Role::Tech Bar Display::".concat(techBarName));
  };
};

export var Sidebar = compose(connect(mapStateToProps), withState('openDropdown', 'setOpenDropdown', false), withHandlers({
  toggleDropdown: toggleDropdown,
  hasTechBarDisplayRole: hasTechBarDisplayRole
}))(SidebarComponent);