import _defineProperty from "@babel/runtime/helpers/esm/defineProperty";
import _objectSpread from "@babel/runtime/helpers/esm/objectSpread2";
import React, { memo } from "react";
import AppBar from "@material-ui/core/AppBar";
import Toolbar from "@material-ui/core/Toolbar";
import Tabs from "@material-ui/core/Tabs";
import Tab from "@material-ui/core/Tab";
import Box from "@material-ui/core/Box";
import { makeStyles } from "@material-ui/core/styles";
import SettingsIcon from "@material-ui/icons/Settings";
import StorageIcon from "@material-ui/icons/Storage";
import BorderColorIcon from "@material-ui/icons/BorderColor";
import MenuIcon from "@material-ui/icons/Menu";
import CollaborateButton from "../CollaborateButton";
import DownloadButton from "../DownloadButton";
import InfoButton from "../InfoButton";
import Button from "@material-ui/core/Button";
import GithubIcon from "../Header/GithubIcon";
import IconButton from "@material-ui/core/IconButton";
import packageJSON from "../../../package.json";
import BrushButton from "../BrushButton";
import useAuth from "../../utils/auth-handlers/use-auth.js";
import SlackIcon from "./SlackIcon";
import GitHubButton from "react-github-btn";
import { useTranslation } from "react-i18next";

var capitalize = function capitalize(s) {
  return s.charAt(0).toUpperCase() + s.slice(1);
};

var useStyles = makeStyles(function (theme) {
  return {
    headerButton: {
      marginLeft: 16
    },
    grow: {
      flexGrow: 1
    },
    list: {
      width: 300
    },
    tab: {
      color: "#000",
      "& .icon": {}
    },
    fullHeightTab: _objectSpread(_objectSpread({}, theme.mixins.toolbar), {}, _defineProperty({}, theme.breakpoints.down("sm"), {
      minWidth: 20
    })),
    tabWrapper: {
      display: "flex",
      flexDirection: "row",
      alignItems: "center",
      textTransform: "none",
      color: "#000",
      "&&& svg": {
        marginBottom: 0,
        marginRight: 8,
        width: 18,
        height: 18
      }
    }
  };
});

var getIcon = function getIcon(t) {
  switch (t) {
    case "Setup":
      return /*#__PURE__*/React.createElement(SettingsIcon, {
        className: "icon"
      });

    case "Label":
      return /*#__PURE__*/React.createElement(BorderColorIcon, {
        className: "icon"
      });

    case "Samples":
      return /*#__PURE__*/React.createElement(StorageIcon, {
        className: "icon"
      });

    default:
      return /*#__PURE__*/React.createElement("div", null);
  }
};

var HeaderToolbar = function HeaderToolbar(_ref) {
  var tabs = _ref.tabs,
      currentTab = _ref.currentTab,
      onChangeTab = _ref.onChangeTab,
      additionalButtons = _ref.additionalButtons,
      onOpenDrawer = _ref.onOpenDrawer,
      _ref$title = _ref.title,
      title = _ref$title === void 0 ? "Universal Data Tool" : _ref$title,
      interfaceType = _ref.interfaceType,
      isDesktop = _ref.isDesktop,
      fileOpen = _ref.fileOpen,
      sessionBoxOpen = _ref.sessionBoxOpen,
      changeSessionBoxOpen = _ref.changeSessionBoxOpen,
      inSession = _ref.inSession,
      onCreateSession = _ref.onCreateSession,
      onLeaveSession = _ref.onLeaveSession,
      onJoinSession = _ref.onJoinSession,
      onDownload = _ref.onDownload,
      selectedBrush = _ref.selectedBrush,
      onChangeSelectedBrush = _ref.onChangeSelectedBrush,
      isSmall = _ref.isSmall,
      authConfig = _ref.authConfig,
      changeLoginDrawerOpen = _ref.changeLoginDrawerOpen,
      collaborateError = _ref.collaborateError,
      isWelcomePage = _ref.isWelcomePage;
  var c = useStyles();

  var _useAuth = useAuth(),
      authProvider = _useAuth.authProvider,
      isLoggedIn = _useAuth.isLoggedIn,
      logout = _useAuth.logout;

  var _useTranslation = useTranslation(),
      t = _useTranslation.t;

  return /*#__PURE__*/React.createElement(AppBar, {
    color: "default",
    position: "static"
  }, /*#__PURE__*/React.createElement(Toolbar, {
    variant: "dense"
  }, !isDesktop && /*#__PURE__*/React.createElement(IconButton, {
    onClick: onOpenDrawer,
    className: c.headerButton
  }, /*#__PURE__*/React.createElement(MenuIcon, null)), fileOpen ? title : "Universal Data Tool v" + packageJSON.version, fileOpen && /*#__PURE__*/React.createElement(InfoButton, null), /*#__PURE__*/React.createElement(CollaborateButton, {
    sessionBoxOpen: sessionBoxOpen,
    changeSessionBoxOpen: changeSessionBoxOpen,
    fileOpen: fileOpen,
    inSession: inSession,
    onCreateSession: onCreateSession,
    onLeaveSession: onLeaveSession,
    onJoinSession: onJoinSession,
    error: collaborateError
  }), fileOpen && /*#__PURE__*/React.createElement(BrushButton, {
    selectedBrush: selectedBrush,
    onChangeSelectedBrush: onChangeSelectedBrush
  }), !isDesktop && fileOpen && /*#__PURE__*/React.createElement(DownloadButton, {
    interfaceType: interfaceType,
    onDownload: onDownload
  }), /*#__PURE__*/React.createElement("div", {
    className: c.grow
  }), additionalButtons, tabs.length > 0 && /*#__PURE__*/React.createElement(Tabs, {
    onChange: function onChange(e, newTab) {
      return onChangeTab(newTab.toLowerCase());
    },
    value: currentTab
  }, tabs.map(function (t) {
    return /*#__PURE__*/React.createElement(Tab, {
      key: t,
      classes: {
        root: c.fullHeightTab,
        wrapper: c.tabWrapper
      },
      className: c.tab,
      icon: getIcon(t),
      label: isSmall ? "" : t,
      value: t.toLowerCase()
    });
  })), authProvider !== "none" && !isLoggedIn && /*#__PURE__*/React.createElement(Button, {
    onClick: function onClick() {
      changeLoginDrawerOpen(true);
    },
    className: c.headerButton
  }, t("login-with"), " ", capitalize(authProvider)), isLoggedIn && /*#__PURE__*/React.createElement(Button, {
    onClick: logout,
    className: c.headerButton
  }, t("logout")), !isSmall && !isWelcomePage && /*#__PURE__*/React.createElement(IconButton, {
    href: "https://github.com/UniversalDataTool/universal-data-tool",
    className: c.headerButton,
    target: "_blank"
  }, /*#__PURE__*/React.createElement(GithubIcon, null)), !isSmall && isWelcomePage && /*#__PURE__*/React.createElement(Box, {
    paddingTop: "4px",
    paddingLeft: "8px"
  }, /*#__PURE__*/React.createElement(GitHubButton, {
    href: "https://github.com/UniversalDataTool/universal-data-tool",
    "data-icon": "octicon-star",
    "data-size": "large",
    "data-show-count": "true",
    "aria-label": "Star UniversalDataTool/universal-data-tool on GitHub"
  }, t("star"))), !isSmall && isWelcomePage && /*#__PURE__*/React.createElement(IconButton, {
    href: "https://join.slack.com/t/universaldatatool/shared_invite/zt-d8teykwi-iOSOUfxugKR~M4AJN6VL3g",
    className: c.headerButton
  }, /*#__PURE__*/React.createElement(SlackIcon, null))));
};

export default memo(HeaderToolbar);