let _ = t => t,
  _t;
import React, { useState } from 'react';
import styled from '@modern-js/runtime/styled';
import { useTranslation } from 'react-i18next';
import { uuid } from "../utils\\uuid";
import RightContent from "../components\\RightContent";
import { jsx as _jsx } from "react/jsx-runtime";
import { jsxs as _jsxs } from "react/jsx-runtime";
import { Fragment as _Fragment } from "react/jsx-runtime";
const ProLayout = styled.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] = useState(0);
  const {
    t
  } = useTranslation();
  return /*#__PURE__*/_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__*/_jsxs(_Fragment, {
      children: [/*#__PURE__*/_jsxs("div", {
        className: "tabsContainer",
        children: [icon && /*#__PURE__*/_jsx("img", {
          className: "icon",
          src: icon
        }), title && /*#__PURE__*/_jsx("div", {
          className: "titleContainer",
          children: t(title)
        }), topbarTabs.map((tab, tIdx) => /*#__PURE__*/_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${uuid()}`)), rightContentItems && /*#__PURE__*/_jsx(RightContent, {
          contents: rightContentItems
        })]
      }), topbarTabs.length > 0 && /*#__PURE__*/_jsx("div", {
        className: "tabsContetnt",
        children: (_topbarTabs$selectTab = topbarTabs[selectTab]) === null || _topbarTabs$selectTab === void 0 ? void 0 : _topbarTabs$selectTab.content
      })]
    }), React.Children.count(children) > 0 && /*#__PURE__*/_jsx("div", {
      className: "ProContentLayout",
      children: children
    })]
  });
};
export default PageLayout;