function _extends() { return _extends = Object.assign ? Object.assign.bind() : function (n) { for (var e = 1; e < arguments.length; e++) { var t = arguments[e]; for (var r in t) ({}).hasOwnProperty.call(t, r) && (n[r] = t[r]); } return n; }, _extends.apply(null, arguments); }
import { useMemo } from "react";
import useColor from "../../../hooks/useColor";
var border = function border(_ref) {
  var borderSideColor = _ref.borderSideColor,
    borderTopColor = _ref.borderTopColor,
    showBorderLeft = _ref.showBorderLeft;
  return _extends({
    borderRight: "1px solid " + borderSideColor,
    borderTop: "2px solid " + borderTopColor
  }, showBorderLeft ? {
    borderLeft: "1px solid " + borderSideColor
  } : {});
};
var useStyleTabs = function useStyleTabs(_ref2) {
  var _ref2$active = _ref2.active,
    active = _ref2$active === void 0 ? false : _ref2$active,
    _ref2$showBorderLeft = _ref2.showBorderLeft,
    showBorderLeft = _ref2$showBorderLeft === void 0 ? false : _ref2$showBorderLeft,
    isDragOverlay = _ref2.isDragOverlay;
  var pickColor = useColor();
  var borderSideColor = pickColor("border");
  var borderTopColor = active ? pickColor("primary") : "transparent";
  var rootStyles = useMemo(function () {
    return {
      cursor: "pointer",
      gap: 1,
      alignItems: "center",
      justifyContent: "start",
      position: "relative",
      padding: [1, 2],
      background: active ? "mainBackground" : "topBarBg",
      height: 8,
      sx: _extends({}, border({
        borderSideColor: borderSideColor,
        borderTopColor: borderTopColor,
        showBorderLeft: showBorderLeft
      }), isDragOverlay && {
        boxShadow: "0 2px 6px rgba(0, 0, 0, 0.15)"
      })
    };
  }, [borderTopColor, borderSideColor, active]);
  return {
    rootStyles: rootStyles
  };
};
export default useStyleTabs;