import React from 'react';
import { Layout } from 'antd';
import { Outlet, useParams } from 'react-router-dom';
import BreadcrumbWrapper from './BreadcrumbWrapper';
import LeftSideMenu from '../components/LeftSideMenu';
import PageHeaderContent from '../components/PageHeaderContent';
import { useAppContext } from '../contexts/AppContext';
import { jsx as _jsx } from "react/jsx-runtime";
import { jsxs as _jsxs } from "react/jsx-runtime";
const {
  Header,
  Content,
  Sider
} = Layout;

// PageLayout provides a layout for the page with top nav, a left side menu and right content
// the right content is defined in <Outlet /> which pass from `element` props in `<Route path='/' element={<PageLayout />}>`
export default function PageLayout() {
  const {
    dbs
  } = useAppContext();
  const {
    dbName,
    tableName,
    action,
    viewName
  } = useParams();
  return /*#__PURE__*/_jsxs(Layout, {
    children: [/*#__PURE__*/_jsx(Header, {
      className: "header",
      style: {
        height: '30px',
        lineHeight: '30px'
      },
      children: /*#__PURE__*/_jsx(PageHeaderContent, {})
    }), /*#__PURE__*/_jsxs(Layout, {
      children: [/*#__PURE__*/_jsx(Sider, {
        width: 300,
        className: "site-layout-background",
        collapsible: true,
        children: dbName && dbs[dbName] ? /*#__PURE__*/_jsx(LeftSideMenu, {
          dbName: dbName,
          tableName: tableName,
          action: action,
          viewName: viewName
        }) : null
      }), /*#__PURE__*/_jsxs(Layout, {
        style: {
          padding: '0 24px 24px'
        },
        children: [/*#__PURE__*/_jsx(BreadcrumbWrapper, {
          dbName: dbName,
          tableName: tableName,
          action: action
        }), /*#__PURE__*/_jsx(Content, {
          className: "site-layout-background",
          style: {
            // padding: 24,
            margin: 0,
            minHeight: 280
          },
          children: /*#__PURE__*/_jsx(Outlet, {})
        })]
      })]
    })]
  });
}
//# sourceMappingURL=PageLayout.js.map