import _slicedToArray from "@babel/runtime/helpers/esm/slicedToArray";
import _taggedTemplateLiteral from "@babel/runtime/helpers/esm/taggedTemplateLiteral";
var _templateObject;
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";
var ProLayout = styled.div(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  .ProContentLayout {\n    position: ", ";\n    bottom: 0;\n    left: 0;\n    right: 0;\n    width: ", ";\n    top: ", "px;\n    overflow-y: auto;\n  }\n\n  .icon {\n    position: absolute;\n    left: 34px;\n  }\n\n  .titleContainer {\n    position: absolute;\n    left: 64px;\n  }\n\n  .tabsContainer {\n    -webkit-align-items: center;\n    -webkit-box-align: center;\n    -ms-flex-align: center;\n    height: ", ";\n    background: white;\n    align-items: center;\n    position: relative;\n    z-index: 1;\n    display: -webkit-box;\n    display: -webkit-flex;\n    display: -ms-flexbox;\n    display: flex;\n    -webkit-flex-flow: column nowrap;\n    -ms-flex-flow: column nowrap;\n    flex-flow: column nowrap;\n    width: 100%;\n    -webkit-flex: 0 0 auto;\n    -ms-flex: 0 0 auto;\n    flex: 0 0 auto;\n    flex-direction: row;\n    justify-content: flex-start;\n    flex-wrap: nowrap;\n    align-content: center;\n  }\n\n  .tab {\n    width: 100%;\n    text-align: center;\n    cursor: pointer;\n    position: relative;\n    display: flex;\n    align-items: center;\n    justify-content: center;\n    height: 40px;\n    font-size: 16px;\n  }\n\n  .tab a {\n    width: 100%;\n    display: block;\n  }\n"])), function (props) {
  return props.fix ? 'fixed' : 'content';
}, function (props) {
  return typeof props.width === 'number' ? "".concat(props.width, "px") : props.width;
}, function (props) {
  return props.top;
}, function (props) {
  return typeof props.topbarHeight === 'number' ? "".concat(props.topbarHeight, "px") : props.topbarHeight;
});
var PageLayout = function PageLayout(_ref) {
  var _topbarTabs$selectTab;
  var title = _ref.title,
    width = _ref.width,
    children = _ref.children,
    _ref$offset = _ref.offset,
    offset = _ref$offset === void 0 ? 0 : _ref$offset,
    customTopSidebar = _ref.customTopSidebar,
    topbarTabs = _ref.topbarTabs,
    topbarHeight = _ref.topbarHeight,
    _ref$contentTopOffset = _ref.contentTopOffset,
    contentTopOffset = _ref$contentTopOffset === void 0 ? 50 : _ref$contentTopOffset,
    rightContentItems = _ref.rightContentItems,
    icon = _ref.icon,
    _ref$fix = _ref.fix,
    fix = _ref$fix === void 0 ? true : _ref$fix,
    _onClick = _ref.onClick;
  var _useState = useState(0),
    _useState2 = _slicedToArray(_useState, 2),
    selectTab = _useState2[0],
    setSelectTab = _useState2[1];
  var _useTranslation = useTranslation(),
    t = _useTranslation.t;
  return /*#__PURE__*/_jsxs(ProLayout, {
    width: width,
    offset: offset,
    top: contentTopOffset,
    onClick: function onClick() {
      return _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(function (tab, tIdx) {
          return /*#__PURE__*/_jsx("div", {
            id: "tabs".concat(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: function 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".concat(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;