import React, { useState } from 'react';
import { UserOutlined } from '@ant-design/icons';
import { Menu } from 'antd';
import { Link } from 'react-router-dom';
import { useAppContext } from '../contexts/AppContext';
import { jsx as _jsx } from "react/jsx-runtime";
const VIEWS_KEY = 'views';
const encodeViewKey = (dbName, viewName) => `_views-${dbName}-${viewName}`;
const encodeTableActionKey = (dbName, tableName, action) => `${dbName}-${tableName}-${action}`;
const LeftSideMenu = ({
  dbName,
  tableName,
  action,
  viewName
}) => {
  const {
    getTablesByDbName,
    getViewsByDbName
  } = useAppContext();
  const [openKeys, setOpenKeys] = useState(() => {
    // if view name exist, then expand the menu of views
    if (viewName) {
      return [VIEWS_KEY];
    }
    // if table name not given, then collapse all menus
    if (!tableName) {
      return [];
    }
    // if table name not exist in all tables, then collapse all menus
    // if table name exist, then expand the menu of this table
    const table = getTablesByDbName(dbName).find(({
      name
    }) => name === tableName);
    return table ? [table.name] : [];
  });
  const handleOpenChange = keys => {
    setOpenKeys(keys);
  };

  // if table name not given, then no menu item should be selected
  let selectedKeys;
  if (viewName) {
    selectedKeys = [encodeViewKey(dbName, viewName)];
  } else {
    selectedKeys = tableName ? [encodeTableActionKey(dbName, tableName, action)] : [];
  }
  return /*#__PURE__*/_jsx(Menu, {
    mode: "inline",
    selectedKeys: selectedKeys,
    openKeys: openKeys,
    style: {
      height: '100%',
      borderRight: 0
    },
    onOpenChange: handleOpenChange,
    items: [...getTablesByDbName(dbName).map(({
      name: tName
    }) => ({
      key: tName,
      label: tName,
      icon: /*#__PURE__*/_jsx(UserOutlined, {}),
      children: [{
        key: encodeTableActionKey(dbName, tName, 'list'),
        label: /*#__PURE__*/_jsx(Link, {
          to: `/${dbName}/${tName}/list`,
          children: "List"
        })
      }, {
        key: encodeTableActionKey(dbName, tName, 'create'),
        label: /*#__PURE__*/_jsx(Link, {
          to: `/${dbName}/${tName}/create`,
          children: "Create"
        })
      }, {
        key: encodeTableActionKey(dbName, tName, 'schema'),
        label: /*#__PURE__*/_jsx(Link, {
          to: `/${dbName}/${tName}/schema`,
          children: "Schema"
        })
      }, {
        key: encodeTableActionKey(dbName, tName, 'query'),
        label: /*#__PURE__*/_jsx(Link, {
          to: `/${dbName}/${tName}/query`,
          children: "Query"
        })
      }]
    })), {
      key: VIEWS_KEY,
      label: 'Views',
      icon: /*#__PURE__*/_jsx(UserOutlined, {}),
      children: getViewsByDbName(dbName).map(({
        name: vName
      }) => ({
        key: encodeViewKey(dbName, vName),
        label: /*#__PURE__*/_jsx(Link, {
          to: `/_views/${dbName}/${vName}`,
          children: vName
        })
      }))
    }]
  });
};
LeftSideMenu.defaultProps = {
  tableName: '',
  action: ''
};
export default LeftSideMenu;
//# sourceMappingURL=LeftSideMenu.js.map