import React, { useContext } from 'react';
import PropTypes from 'prop-types';
import RefTableLink from './RefTableLink';
import PageContext from '../contexts/page';
import { columnType } from './types';
import * as constants from '../constants';
import { useAppContext } from '../contexts/AppContext';
import { jsx as _jsx } from "react/jsx-runtime";
import { jsxs as _jsxs } from "react/jsx-runtime";
/**
 * Form field wrapper for detail page
 * TODO When value is an array, how to render RefTableLink
 */
const FieldWrapperForDetailPage = ({
  column,
  value,
  children
}) => {
  const {
    dbName
  } = useContext(PageContext);
  const {
    getTablesByDbName
  } = useAppContext();
  const typeClassName = column.type === constants.STRING_ARRAY ? 'dbm-string-array-form-field' : 'dbm-string-form-field';
  return /*#__PURE__*/_jsxs("div", {
    // key={column.id}
    className: `dbm-form-field ${typeClassName}`,
    "data-debug": JSON.stringify(column),
    children: [/*#__PURE__*/_jsxs("div", {
      className: "dbm-field-label",
      children: [/*#__PURE__*/_jsxs("b", {
        children: [column.name, " (", /*#__PURE__*/_jsx("code", {
          children: column.id
        }), ")", column.type === constants.STRING_ARRAY ? ` (count:${value ? value.length : 0})` : null]
      }), ":", ' ', column.referenceTable && typeof value === 'string' && /*#__PURE__*/_jsx(RefTableLink, {
        dbName: dbName,
        tables: getTablesByDbName(dbName),
        value: value,
        column: column
      })]
    }), children]
  });
};
FieldWrapperForDetailPage.propTypes = {
  column: columnType.isRequired,
  value: PropTypes.oneOfType([PropTypes.number, PropTypes.bool, PropTypes.string, PropTypes.arrayOf(PropTypes.string)]),
  children: PropTypes.node
};
FieldWrapperForDetailPage.defaultProps = {
  value: '',
  children: null
};
export default FieldWrapperForDetailPage;
//# sourceMappingURL=FieldWrapperForDetailPage.js.map