import React, { Fragment } from 'react';
import { connect } from '../redux/store';
import { compose } from 'recompose';
import { selectCurrentKapp, ErrorNotFound, ErrorUnauthorized, Utils } from '@kineticdata/bundle-common';
import { PageTitle } from './shared/PageTitle';
import { Link } from '@reach/router';
import { CheckIn } from './CheckIn';
import { Feedback } from './Feedback';
import { Overhead } from './Overhead';
import { I18n } from '@kineticdata/react';
export var DisplayTabs = function DisplayTabs(_ref) {
  var techBarId = _ref.techBarId,
      _ref$checkInClassName = _ref.checkInClassName,
      checkInClassName = _ref$checkInClassName === void 0 ? '' : _ref$checkInClassName,
      _ref$feedbackClassNam = _ref.feedbackClassName,
      feedbackClassName = _ref$feedbackClassNam === void 0 ? '' : _ref$feedbackClassNam,
      onClick = _ref.onClick;
  return /*#__PURE__*/React.createElement("div", {
    className: "display-tabs"
  }, /*#__PURE__*/React.createElement(Link, {
    to: "../checkin?crosslink",
    replace: true,
    className: "display-tab-link ".concat(checkInClassName),
    onClick: onClick
  }, /*#__PURE__*/React.createElement("span", null, /*#__PURE__*/React.createElement(I18n, null, "Check In"))), /*#__PURE__*/React.createElement(Link, {
    to: "../feedback?crosslink",
    replace: true,
    className: "display-tab-link ".concat(feedbackClassName),
    onClick: onClick
  }, /*#__PURE__*/React.createElement("span", null, /*#__PURE__*/React.createElement(I18n, null, "Feedback"))));
};
export var DisplayComponent = function DisplayComponent(_ref2) {
  var navigate = _ref2.navigate,
      _ref2$location = _ref2.location,
      search = _ref2$location.search,
      pathname = _ref2$location.pathname,
      kapp = _ref2.kapp,
      techBar = _ref2.techBar,
      mode = _ref2.mode,
      hasTechBarDisplayRole = _ref2.hasTechBarDisplayRole;
  return !hasTechBarDisplayRole ? /*#__PURE__*/React.createElement(ErrorUnauthorized, null) : /*#__PURE__*/React.createElement(Fragment, null, /*#__PURE__*/React.createElement(PageTitle, null), /*#__PURE__*/React.createElement("div", {
    className: "page-container"
  }, /*#__PURE__*/React.createElement("div", {
    className: "page-panel page-panel--display"
  }, techBar && /*#__PURE__*/React.createElement(Fragment, null, /*#__PURE__*/React.createElement("div", {
    className: "location-title"
  }, /*#__PURE__*/React.createElement("span", {
    className: "fa fa-fw fa-map-marker"
  }), /*#__PURE__*/React.createElement(I18n, null, techBar.values['Name'])), mode ? /*#__PURE__*/React.createElement(Fragment, null, mode === 'checkin' && /*#__PURE__*/React.createElement(CheckIn, {
    techBar: techBar,
    crosslink: search.includes('crosslink') || pathname.includes('crosslink')
  }), mode === 'feedback' && /*#__PURE__*/React.createElement(Feedback, {
    techBar: techBar,
    crosslink: search.includes('crosslink') || pathname.includes('crosslink')
  }), mode === 'overhead' && /*#__PURE__*/React.createElement(Overhead, {
    techBar: techBar
  })) : /*#__PURE__*/React.createElement("section", {
    className: "tech-bar-display tech-bar-display--checkin"
  }, /*#__PURE__*/React.createElement("div", {
    className: "full-screen-container"
  }, /*#__PURE__*/React.createElement("div", {
    className: "header bg-dark"
  }), /*#__PURE__*/React.createElement("div", {
    className: "body"
  }, /*#__PURE__*/React.createElement("div", {
    className: "row"
  }, /*#__PURE__*/React.createElement("div", {
    className: "col-3"
  }, /*#__PURE__*/React.createElement("button", {
    className: "btn btn-outline-dark btn-block",
    onClick: function onClick() {
      return navigate('checkin', {
        replace: true
      });
    }
  }, /*#__PURE__*/React.createElement(I18n, null, "Check In"))), /*#__PURE__*/React.createElement("div", {
    className: "col-3"
  }, /*#__PURE__*/React.createElement("button", {
    className: "btn btn-outline-dark btn-block",
    onClick: function onClick() {
      return navigate('feedback', {
        replace: true
      });
    }
  }, /*#__PURE__*/React.createElement(I18n, null, "Feedback"))), /*#__PURE__*/React.createElement("div", {
    className: "col-3"
  }, /*#__PURE__*/React.createElement("button", {
    className: "btn btn-outline-dark btn-block",
    onClick: function onClick() {
      return navigate('checkin?crosslink', {
        replace: true
      });
    }
  }, /*#__PURE__*/React.createElement(I18n, null, "Check In"), " / ", /*#__PURE__*/React.createElement(I18n, null, "Feedback"))), /*#__PURE__*/React.createElement("div", {
    className: "col-3"
  }, /*#__PURE__*/React.createElement("button", {
    className: "btn btn-outline-dark btn-block",
    onClick: function onClick() {
      return navigate('overhead', {
        replace: true
      });
    }
  }, /*#__PURE__*/React.createElement(I18n, null, "Overhead")))))))), !techBar && /*#__PURE__*/React.createElement(ErrorNotFound, null))));
};
export var mapStateToProps = function mapStateToProps(state, props) {
  var techBar = state.techBarApp.schedulers.find(function (scheduler) {
    return scheduler.values['Id'] === props.techBarId;
  });
  return {
    kapp: selectCurrentKapp(state),
    techBar: techBar,
    hasTechBarDisplayRole: techBar && Utils.isMemberOf(state.app.profile, "Role::Tech Bar Display::".concat(techBar.values['Name']))
  };
};
export var Display = compose(connect(mapStateToProps))(DisplayComponent);