import React, { useMemo } from "react";
import Box from "@material-ui/core/Box";
import Workspace from "react-material-workspace-layout/Workspace";
import { styled } from "@material-ui/core/styles";
import DeleteIcon from "@material-ui/icons/Delete";
var HeaderLeftSideContainer = styled("div")({
  fontSize: 24,
  fontWeight: "bold"
});
export default (function (_ref) {
  var children = _ref.children,
      onNext = _ref.onNext,
      onPrev = _ref.onPrev,
      onRemoveSample = _ref.onRemoveSample,
      _ref$currentSampleInd = _ref.currentSampleIndex,
      currentSampleIndex = _ref$currentSampleInd === void 0 ? 0 : _ref$currentSampleInd,
      _ref$numberOfSamples = _ref.numberOfSamples,
      numberOfSamples = _ref$numberOfSamples === void 0 ? 1 : _ref$numberOfSamples,
      _ref$globalSampleInde = _ref.globalSampleIndex,
      globalSampleIndex = _ref$globalSampleInde === void 0 ? 1 : _ref$globalSampleInde,
      titleContent = _ref.titleContent,
      onClickHeaderItem = _ref.onClickHeaderItem;
  var headerItems = useMemo(function () {
    return [onRemoveSample && {
      name: "Delete",
      icon: /*#__PURE__*/React.createElement(DeleteIcon, null),
      onClick: function onClick() {
        return onRemoveSample(globalSampleIndex);
      }
    }, (currentSampleIndex > 0 || onPrev) && {
      name: "Prev",
      onClick: onPrev,
      disabled: currentSampleIndex === 0
    }, {
      name: "Next",
      onClick: onNext
    }, {
      name: "Save"
    }].filter(Boolean);
  }, [currentSampleIndex, globalSampleIndex, onNext, onPrev, onRemoveSample]);
  return /*#__PURE__*/React.createElement(Workspace, {
    headerLeftSide: titleContent === undefined ? /*#__PURE__*/React.createElement(Box, {
      paddingLeft: 2
    }, /*#__PURE__*/React.createElement(HeaderLeftSideContainer, null, "Sample", " ", numberOfSamples > 1 ? "".concat(currentSampleIndex, " / ").concat(numberOfSamples) : "".concat(globalSampleIndex))) : titleContent,
    onClickHeaderItem: onClickHeaderItem,
    headerItems: headerItems,
    iconSidebarItems: [],
    rightSidebarItems: []
  }, /*#__PURE__*/React.createElement(Box, {
    padding: 2,
    style: {
      width: "100%"
    }
  }, children));
});