import React, { Fragment } from 'react';
import { connect } from '../redux/store';
import { compose, withHandlers, withState } from 'recompose';
import { selectCurrentKapp, Constants, Utils } from '@kineticdata/bundle-common';
import { PageTitle } from './shared/PageTitle';
import { Link } from '@reach/router';
import { Dropdown, DropdownToggle, DropdownMenu } from 'reactstrap';
import { mapTechBarsForDistance, sortTechBarsByDistance } from '../redux/modules/techBarApp';
import { SESSION_ITEM_USER_LOCATION, SESSION_ITEM_CURRENT_TECH_BAR } from '../constants';
import { I18n } from '@kineticdata/react';
export var TechBarsComponent = function TechBarsComponent(_ref) {
  var kapp = _ref.kapp,
      techBars = _ref.techBars,
      openDropdown = _ref.openDropdown,
      toggleDropdown = _ref.toggleDropdown,
      hasTechBarDisplayRole = _ref.hasTechBarDisplayRole,
      currentTechBar = _ref.currentTechBar,
      selectCurrentTechBar = _ref.selectCurrentTechBar;
  return /*#__PURE__*/React.createElement(Fragment, null, /*#__PURE__*/React.createElement(PageTitle, {
    parts: ['All Tech Bars']
  }), /*#__PURE__*/React.createElement("div", {
    className: "page-container page-container--tech-bar container"
  }, /*#__PURE__*/React.createElement("div", {
    className: "page-panel"
  }, /*#__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("h1", null, /*#__PURE__*/React.createElement(I18n, null, "All Tech Bars")))), /*#__PURE__*/React.createElement("section", null, /*#__PURE__*/React.createElement("div", {
    className: "cards cards--thirds"
  }, techBars.map(function (techBar) {
    return /*#__PURE__*/React.createElement("div", {
      className: "card",
      key: techBar.id,
      style: currentTechBar && techBar.id === currentTechBar.id ? {
        borderTopColor: Constants.COLORS.sunflower
      } : undefined
    }, /*#__PURE__*/React.createElement("div", {
      className: "card__bar card__bar--xs card__bar--subtle",
      style: currentTechBar && techBar.id === currentTechBar.id ? {
        borderTopColor: Constants.COLORS.sunflower
      } : undefined
    }), /*#__PURE__*/React.createElement("div", {
      className: "card__row flex-grow-1"
    }, /*#__PURE__*/React.createElement("div", {
      className: "card__row-prepend"
    }, /*#__PURE__*/React.createElement("span", {
      className: "fa fa-map-marker fa-3x"
    })), /*#__PURE__*/React.createElement("div", {
      className: "card__col"
    }, /*#__PURE__*/React.createElement("div", {
      className: "card__row"
    }, /*#__PURE__*/React.createElement("strong", null, /*#__PURE__*/React.createElement(I18n, null, techBar.values['Name']))), techBar.values['Location'] && /*#__PURE__*/React.createElement("div", {
      className: "card__row-meta text-muted pt-0"
    }, /*#__PURE__*/React.createElement(I18n, null, techBar.values['Location'])), techBar.values['Description'] && /*#__PURE__*/React.createElement("div", {
      className: "card__row-meta pt-1"
    }, /*#__PURE__*/React.createElement(I18n, null, techBar.values['Description'])), techBar.values['Details'] && /*#__PURE__*/React.createElement("div", {
      className: "card__row-meta pt-1"
    }, /*#__PURE__*/React.createElement(I18n, null, techBar.values['Details']))), hasTechBarDisplayRole(techBar.values['Name']) && /*#__PURE__*/React.createElement("div", {
      className: "card__row-append"
    }, /*#__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-2x"
    })), /*#__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"))))))), /*#__PURE__*/React.createElement("div", {
      className: "card__col pt-0 flex-grow-0"
    }, /*#__PURE__*/React.createElement("div", {
      className: "card__row"
    }, /*#__PURE__*/React.createElement(Link, {
      to: "../appointment/".concat(techBar.values['Id']),
      className: "btn btn-primary flex-grow-1"
    }, /*#__PURE__*/React.createElement(I18n, null, "Schedule Now"), " \u2192")), techBars.size > 1 && /*#__PURE__*/React.createElement("div", {
      className: "card__row"
    }, currentTechBar && techBar.id === currentTechBar.id ? /*#__PURE__*/React.createElement("button", {
      className: "btn btn-sm btn-success",
      disabled: true
    }, /*#__PURE__*/React.createElement(I18n, null, "Current Tech Bar")) : /*#__PURE__*/React.createElement("button", {
      className: "btn btn-link btn-sm",
      onClick: function onClick() {
        return selectCurrentTechBar(techBar.id);
      }
    }, /*#__PURE__*/React.createElement(I18n, null, "Set as Current Tech Bar")))));
  }))))));
};
export var mapStateToProps = function mapStateToProps(state, props) {
  return {
    kapp: selectCurrentKapp(state),
    techBars: state.techBarApp.schedulers.filter(function (s) {
      return s.values['Status'] === 'Active';
    }).map(props.userLocation ? mapTechBarsForDistance(props.userLocation) : function (t) {
      return t;
    }).sort(props.userLocation ? sortTechBarsByDistance : function () {
      return 0;
    }),
    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));
  };
};

var selectCurrentTechBar = function selectCurrentTechBar(_ref4) {
  var techBars = _ref4.techBars,
      setCurrentTechBar = _ref4.setCurrentTechBar;
  return function (id) {
    sessionStorage.setItem(SESSION_ITEM_CURRENT_TECH_BAR, id);
    setCurrentTechBar(techBars.find(function (t) {
      return t.id === id;
    }));
  };
};

export var TechBars = compose(withState('userLocation', 'setUserLocation', function () {
  try {
    var locObj = JSON.parse(sessionStorage.getItem(SESSION_ITEM_USER_LOCATION));

    if (locObj && locObj.latitude != null && locObj.longitude != null) {
      return locObj;
    }
  } catch (e) {}

  return null;
}), connect(mapStateToProps), withState('currentTechBar', 'setCurrentTechBar', function (_ref5) {
  var techBars = _ref5.techBars;
  var techBarId = sessionStorage.getItem(SESSION_ITEM_CURRENT_TECH_BAR);
  return techBarId ? techBars.find(function (t) {
    return t.id === techBarId;
  }) : null;
}), withState('openDropdown', 'setOpenDropdown', false), withHandlers({
  toggleDropdown: toggleDropdown,
  hasTechBarDisplayRole: hasTechBarDisplayRole,
  selectCurrentTechBar: selectCurrentTechBar
}))(TechBarsComponent);