import React, { useContext } from 'react';
import { Typography } from 'antd';
import { Link } from 'react-router-dom';
import { utils } from '@db-man/github';
import * as constants from '../constants';
import { getUrlParams } from '../utils';
import PageContext from '../contexts/page';

// Use `Typography` so can apply dark theme to text
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 {
  Text
} = Typography;

/**
 * This component depends on page context, so only used in Application/Page
 */
const NavBar = () => {
  const {
    dbName,
    tableName,
    action,
    primaryKey,
    githubDb,
    columns
  } = useContext(PageContext);
  const renderReferenceTableLink = () => {
    return columns.filter(column => column.referenceTable).map((column, idx) => /*#__PURE__*/_jsxs("span", {
      children: [/*#__PURE__*/_jsx(Text, {
        children: `${column.referenceTable}(`
      }), /*#__PURE__*/_jsx("a", {
        href: `/${dbName}/${column.referenceTable}/create`,
        children: "Create"
      }, 'create-link'), /*#__PURE__*/_jsx(Text, {
        children: ","
      }), /*#__PURE__*/_jsx("a", {
        href: `/${dbName}/${column.referenceTable}/list`,
        children: "List"
      }, 'list-link'), /*#__PURE__*/_jsx(Text, {
        children: `)`
      })]
    }, idx));
  };
  const primaryKeyVal = getUrlParams()[primaryKey];
  const filter = encodeURIComponent(JSON.stringify({
    [primaryKey]: primaryKeyVal
  }));

  // Only when appModes have "split-table"
  const githubFileLink = primaryKeyVal ? /*#__PURE__*/_jsx("a", {
    title: "GitHub File Path",
    href: githubDb?.getGitHubFullPath(`${localStorage.getItem(constants.LS_KEY_GITHUB_REPO_PATH)}/${dbName}/${tableName}/${utils.validFilename(primaryKeyVal)}.json`),
    target: "_blank",
    rel: "noreferrer",
    children: `${utils.validFilename(primaryKeyVal)}.json`
  }) : null;
  const createLink = /*#__PURE__*/_jsx(Link, {
    to: {
      pathname: `/${dbName}/${tableName}/create`
    },
    children: "Create"
  });
  // primary key value can contain special characters like '#'
  // but for <Link> component, for the search part, '#' is not allowed
  // so need to encodeURI the primary key value
  const updateOrGetLink = /*#__PURE__*/_jsx(Link, {
    to: {
      pathname: `/${dbName}/${tableName}/${action === 'get' ? 'update' : 'get'}`,
      search: `?${primaryKey}=${encodeURIComponent(primaryKeyVal)}`
    },
    children: action === 'get' ? 'Update' : 'Get'
  });
  const listLink = /*#__PURE__*/_jsx(Link, {
    to: {
      pathname: `/${dbName}/${tableName}/list`,
      search: `?filter=${filter}`
    },
    children: "List"
  });
  return /*#__PURE__*/_jsxs("div", {
    className: "dbm-nav-bar",
    children: [/*#__PURE__*/_jsxs("span", {
      children: [/*#__PURE__*/_jsxs(Text, {
        children: ["Table: ", tableName, " ("]
      }), /*#__PURE__*/_jsx("span", {
        children: createLink
      }), /*#__PURE__*/_jsx(Text, {
        children: ","
      }), /*#__PURE__*/_jsx("span", {
        children: updateOrGetLink
      }), /*#__PURE__*/_jsx(Text, {
        children: ","
      }), /*#__PURE__*/_jsx("span", {
        children: listLink
      }), /*#__PURE__*/_jsx(Text, {
        children: ")"
      })]
    }), /*#__PURE__*/_jsx(Text, {
      children: " | "
    }), /*#__PURE__*/_jsxs("span", {
      children: [/*#__PURE__*/_jsx(Text, {
        children: "Ref tables: ["
      }), /*#__PURE__*/_jsx("span", {
        children: renderReferenceTableLink()
      }), /*#__PURE__*/_jsx(Text, {
        children: "]"
      })]
    }), /*#__PURE__*/_jsx(Text, {
      children: " | "
    }), /*#__PURE__*/_jsx(Text, {
      children: "GitHub Link: "
    }), /*#__PURE__*/_jsx("a", {
      title: "GitHub File Path",
      href: githubDb?.getDataUrl(dbName, tableName),
      target: "_blank",
      rel: "noreferrer",
      children: githubDb?.getDataPath(dbName, tableName)
    }), githubFileLink && /*#__PURE__*/_jsxs(_Fragment, {
      children: [/*#__PURE__*/_jsx(Text, {
        children: "::"
      }), githubFileLink]
    })]
  });
};
export default NavBar;
//# sourceMappingURL=NavBar.js.map