"use strict";

var __makeTemplateObject = undefined && undefined.__makeTemplateObject || function (cooked, raw) {
  if (Object.defineProperty) {
    Object.defineProperty(cooked, "raw", { value: raw });
  } else {
    cooked.raw = raw;
  }
  return cooked;
};
Object.defineProperty(exports, "__esModule", { value: true });
var React = require("react");
var styled_1 = require("../../styled");
var graphcool_styles_1 = require("graphcool-styles");
var Tab_1 = require("./Tab");
var react_redux_1 = require("react-redux");
var reselect_1 = require("reselect");
var selectors_1 = require("../../state/sessions/selectors");
var TabBar = function TabBar(_a) {
  var sessions = _a.sessions,
      isApp = _a.isApp,
      selectedSessionId = _a.selectedSessionId,
      onNewSession = _a.onNewSession;
  return React.createElement(
    StyledTabBar,
    null,
    React.createElement(
      Tabs,
      { isApp: isApp },
      sessions.map(function (session) {
        return React.createElement(Tab_1.default, { key: session.id, session: session, selectedSessionId: selectedSessionId });
      }),
      React.createElement(
        Plus,
        { onClick: onNewSession },
        React.createElement(graphcool_styles_1.Icon, { src: require('graphcool-styles/icons/stroke/add.svg'), width: 34, height: 34, stroke: true, strokeWidth: 4 })
      )
    )
  );
};
var mapStateToProps = reselect_1.createStructuredSelector({
  sessions: selectors_1.getSessionsArray,
  selectedSessionId: selectors_1.getSelectedSessionIdFromRoot
});
exports.default = react_redux_1.connect(mapStateToProps)(TabBar);
var StyledTabBar = styled_1.styled.div(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  color: white;\n  height: 57px;\n  background: ", ";\n  overflow: hidden;\n  -webkit-app-region: drag;\n  &:hover {\n    overflow-x: overlay;\n  }\n"], ["\n  color: white;\n  height: 57px;\n  background: ", ";\n  overflow: hidden;\n  -webkit-app-region: drag;\n  &:hover {\n    overflow-x: overlay;\n  }\n"])), function (p) {
  return p.theme.editorColours.background;
});
var Tabs = styled_1.withProps()(styled_1.styled.div)(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n  display: flex;\n  align-items: center;\n  margin-top: 16px;\n  padding-left: ", ";\n"], ["\n  display: flex;\n  align-items: center;\n  margin-top: 16px;\n  padding-left: ", ";\n"])), function (p) {
  return p.isApp ? '43px' : '0';
});
var Plus = styled_1.styled.div(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n  box-sizing: border-box;\n  display: flex;\n  height: 43px;\n  width: 43px;\n  margin-left: 10px;\n  border-radius: 2px;\n  border-bottom: 2px solid ", ";\n  background: ", ";\n  justify-content: center;\n  align-items: center;\n  svg {\n    stroke: ", ";\n  }\n  &:hover {\n    background: ", ";\n  }\n"], ["\n  box-sizing: border-box;\n  display: flex;\n  height: 43px;\n  width: 43px;\n  margin-left: 10px;\n  border-radius: 2px;\n  border-bottom: 2px solid ", ";\n  background: ", ";\n  justify-content: center;\n  align-items: center;\n  svg {\n    stroke: ", ";\n  }\n  &:hover {\n    background: ", ";\n  }\n"])), function (p) {
  return p.theme.editorColours.navigationBar;
}, function (p) {
  return p.theme.editorColours.tabInactive;
}, function (p) {
  return p.theme.editorColours.icon;
}, function (p) {
  return p.theme.editorColours.tab;
});
var templateObject_1, templateObject_2, templateObject_3;
//# sourceMappingURL=TabBar.jsx.map