import React, { useContext } from 'react';
import { message, Popover } from 'antd';
import { QuestionCircleOutlined } from '@ant-design/icons';
import StringFormFieldValue from './StringFormFieldValue';
import RefTableLink from './RefTableLink';
import PageContext from '../contexts/page';
import PresetsButtons from './PresetsButtons';
import { useAppContext } from '../contexts/AppContext';
import { FieldValueWarning } from './FormValidations';
import { validatePrimaryKey } from './Form/helpers';
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 popoverContent = /*#__PURE__*/_jsx("div", {
  children: /*#__PURE__*/_jsxs("p", {
    children: ["When db mode is split-table, single record will be created as a file on filesystem.", /*#__PURE__*/_jsx("br", {}), "But on some filesystem, e.g. macOS or Linux, the filename length limit is 255.", /*#__PURE__*/_jsx("br", {}), "So we need to check the length of filename, and warn user if it is too long."]
  })
});
const isFilenameTooLong = val => (val + '.json').length > 255;

/**
 * To render a form field for table_column.type="STRING"
 */
export default function StringFormField(props) {
  const {
    column,
    value,
    inputProps,
    preview,
    onChange
  } = props;
  const appCtx = useAppContext();
  const pageCtx = useContext(PageContext);
  const warnPrimaryKeyInvalid = value => message.warning( /*#__PURE__*/_jsxs("div", {
    children: ["Found duplicated item in db", ' ', /*#__PURE__*/_jsx("a", {
      href: `/${pageCtx.dbName}/${pageCtx.tableName}/update?${pageCtx.primaryKey}=${value}`,
      children: value
    })]
  }), 10);
  const handleChange = (val, evt) => {
    onChange(val, evt);

    // When db mode is split-table, download the (big) table file will take a long time.
    // So will not check about duplicated item, cause we don't have the full table data.
    if (!pageCtx.appModes.includes('split-table')) {
      // validate the primary field in form, e.g. duplication check
      // TODO maybe do this in antd Form component
      // TODO why do we assume the type of primary column in a table is always `string`?
      if (column.id === pageCtx.primaryKey) {
        if (!validatePrimaryKey(val, props.rows, pageCtx.primaryKey)) {
          warnPrimaryKeyInvalid(val);
        }
      }
    } else {
      // When db mode is split-table, single record will be created as a file on filesystem
      // But on some filesystem, e.g. macOS or Linux, the filename length limit is 255.
      // So we need to check the length of filename, and warn user if it is too long.
      if (column.id === pageCtx.primaryKey) {
        if (isFilenameTooLong(val)) {
          message.warning('Filename length is too long, please keep it under 255 characters', 10);
        }
      }
    }
  };
  return /*#__PURE__*/_jsxs("div", {
    className: "dbm-form-field dbm-string-form-field",
    children: [/*#__PURE__*/_jsx("b", {
      children: column.name
    }), ":", ' ', pageCtx.appModes.includes('split-table') && column.id === pageCtx.primaryKey && /*#__PURE__*/_jsxs(_Fragment, {
      children: [/*#__PURE__*/_jsx(Popover, {
        content: popoverContent,
        title: "Primary Key Info",
        children: /*#__PURE__*/_jsx(QuestionCircleOutlined, {})
      }), ' ']
    }), /*#__PURE__*/_jsx(PresetsButtons, {
      column: column,
      onChange: handleChange
    }), ' ', /*#__PURE__*/_jsx(RefTableLink, {
      column: column,
      tables: appCtx.getTablesByDbName(pageCtx.dbName),
      dbName: pageCtx.dbName,
      value: value
    }), /*#__PURE__*/_jsx(FieldValueWarning, {
      expectedTypes: ['string', 'undefined'],
      value: value
    }), /*#__PURE__*/_jsx(StringFormFieldValue, {
      inputProps: {
        ...inputProps,
        status: isFilenameTooLong(value || '') ? 'error' : undefined
      },
      preview: preview,
      value: value,
      onChange: handleChange
    })]
  });
}
//# sourceMappingURL=StringFormField.js.map