"use strict";

Object.defineProperty(exports, "__esModule", {
  value: true
});
exports.default = void 0;
var _react = _interopRequireWildcard(require("react"));
var _styled = _interopRequireDefault(require("@modern-js/runtime/styled"));
var _reactI18next = require("react-i18next");
var _uuid = require("../utils\\uuid");
var _RightContent = _interopRequireDefault(require("../components\\RightContent"));
var _jsxRuntime = require("react/jsx-runtime");
let _ = t => t,
  _t;
function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function (nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || typeof obj !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
const ProLayout = _styled.default.div(_t || (_t = _`
  .ProContentLayout {
    position: ${0};
    bottom: 0;
    left: 0;
    right: 0;
    width: ${0};
    top: ${0}px;
    overflow-y: auto;
  }

  .icon {
    position: absolute;
    left: 34px;
  }

  .titleContainer {
    position: absolute;
    left: 64px;
  }

  .tabsContainer {
    -webkit-align-items: center;
    -webkit-box-align: center;
    -ms-flex-align: center;
    height: ${0};
    background: white;
    align-items: center;
    position: relative;
    z-index: 1;
    display: -webkit-box;
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
    -webkit-flex-flow: column nowrap;
    -ms-flex-flow: column nowrap;
    flex-flow: column nowrap;
    width: 100%;
    -webkit-flex: 0 0 auto;
    -ms-flex: 0 0 auto;
    flex: 0 0 auto;
    flex-direction: row;
    justify-content: flex-start;
    flex-wrap: nowrap;
    align-content: center;
  }

  .tab {
    width: 100%;
    text-align: center;
    cursor: pointer;
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    height: 40px;
    font-size: 16px;
  }

  .tab a {
    width: 100%;
    display: block;
  }
`), props => props.fix ? 'fixed' : 'content', props => typeof props.width === 'number' ? `${props.width}px` : props.width, props => props.top, props => typeof props.topbarHeight === 'number' ? `${props.topbarHeight}px` : props.topbarHeight);
const PageLayout = ({
  title,
  width,
  children,
  offset: _offset = 0,
  customTopSidebar,
  topbarTabs,
  topbarHeight,
  contentTopOffset: _contentTopOffset = 50,
  rightContentItems,
  icon,
  fix: _fix = true,
  onClick
}) => {
  var _topbarTabs$selectTab;
  const [selectTab, setSelectTab] = (0, _react.useState)(0);
  const {
    t
  } = (0, _reactI18next.useTranslation)();
  return /*#__PURE__*/(0, _jsxRuntime.jsxs)(ProLayout, {
    width: width,
    offset: _offset,
    top: _contentTopOffset,
    onClick: () => onClick === null || onClick === void 0 ? void 0 : onClick(),
    fix: _fix,
    topbarHeight: topbarHeight || 40,
    children: [customTopSidebar ? customTopSidebar : topbarTabs && /*#__PURE__*/(0, _jsxRuntime.jsxs)(_jsxRuntime.Fragment, {
      children: [/*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
        className: "tabsContainer",
        children: [icon && /*#__PURE__*/(0, _jsxRuntime.jsx)("img", {
          className: "icon",
          src: icon
        }), title && /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
          className: "titleContainer",
          children: t(title)
        }), topbarTabs.map((tab, tIdx) => /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
          id: `tabs${tIdx}`,
          className: "tab",
          style: {
            borderBottom: tIdx === selectTab ? '2px solid  #000' : '0px',
            boxShadow: tIdx === selectTab ? 'none' : '0 2px 0 rgb(135 134 134 / 16%)',
            fontFamily: tIdx === selectTab ? 'Poppins-SemiBold' : 'Poppins'
          },
          onClick: _e => {
            var _tab$onClick;
            setSelectTab(tIdx);
            (_tab$onClick = tab.onClick) === null || _tab$onClick === void 0 ? void 0 : _tab$onClick.call(tab);
          },
          children: tab.name
        }, `topSidebarTabs${(0, _uuid.uuid)()}`)), rightContentItems && /*#__PURE__*/(0, _jsxRuntime.jsx)(_RightContent.default, {
          contents: rightContentItems
        })]
      }), topbarTabs.length > 0 && /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
        className: "tabsContetnt",
        children: (_topbarTabs$selectTab = topbarTabs[selectTab]) === null || _topbarTabs$selectTab === void 0 ? void 0 : _topbarTabs$selectTab.content
      })]
    }), _react.default.Children.count(children) > 0 && /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
      className: "ProContentLayout",
      children: children
    })]
  });
};
var _default = PageLayout;
exports.default = _default;