"use strict";
var import_DocumentCard = require("../DocumentCard.css");
const jsxRuntime = require("react/jsx-runtime");
const React = require("react");
const kit_Button = require("./Button.cjs");
const kit_Icon = require("./Icon.cjs");
const kit_Input = require("./Input.cjs");
const kit_internal_Markdown = require("./internal/Markdown.cjs");
const kit_Spinner = require("./Spinner.cjs");
const kit_Theme_UI = require("./Theme/UI.cjs");
require("./Theme/themeUtils.cjs");
require("./Theme/themes.cjs");
const kit_utils_error = require("./utils/error.cjs");
const kit_Column = require("./Column.cjs");
const kit_Row = require("./Row.cjs");
const kit_Surface = require("./Surface.cjs");
const base = "DocumentCard_base_df39a";
const css = {
  base
};
const DocumentCard = ({
  disabled = false,
  disableTitle = false,
  doc,
  extra,
  onChange,
  onError,
  onSaveDocument,
  onPageUnloadHook,
  documentChangeSignal
}) => {
  const {
    themeSettings: { className: themeClass }
  } = kit_Theme_UI.useTheme();
  const classes = [css.base, themeClass];
  const [isEditing, setIsEditing] = React.useState(false);
  const [isLoading, setIsLoading] = React.useState(false);
  const [editedDocs, setEditedDocs] = React.useState((doc == null ? void 0 : doc.contents) || "");
  const [editedTitle, setEditedTitle] = React.useState((doc == null ? void 0 : doc.name) || "");
  const [docs, title] = React.useMemo(() => [(doc == null ? void 0 : doc.contents) || "", (doc == null ? void 0 : doc.name) || ""], [doc]);
  const blocker = () => {
    if (isEditing && docs !== editedDocs) {
      const answer = window.confirm(
        "You have unsaved documents, are you sure you want to leave? Unsaved documents will be lost."
      );
      return !answer;
    }
    return false;
  };
  onPageUnloadHook == null ? void 0 : onPageUnloadHook(blocker);
  const existingDocs = React.useRef(docs);
  const existingTitle = React.useRef(title);
  React.useEffect(() => {
    existingDocs.current = docs;
  }, [docs]);
  React.useEffect(() => {
    existingTitle.current = title;
    setEditedTitle(title);
  }, [title]);
  React.useEffect(() => {
    setIsEditing(false);
    setIsLoading(false);
    setEditedDocs(existingDocs.current);
    setEditedTitle(existingTitle.current);
  }, [documentChangeSignal]);
  const editDocs = React.useCallback(() => {
    if (disabled)
      return;
    setIsEditing(true);
  }, [disabled]);
  const cancelEdit = React.useCallback(() => {
    setIsEditing(false);
    setEditedDocs(docs);
    onChange == null ? void 0 : onChange(docs);
    setEditedTitle(title);
  }, [docs, title, onChange]);
  const onSave = React.useCallback(
    async (editDocs2) => {
      await onSaveDocument({ contents: editDocs2, name: editedTitle });
    },
    [onSaveDocument, editedTitle]
  );
  const onSaveTitle = React.useCallback(
    async (editTitle) => {
      await onSaveDocument({ contents: editedDocs, name: editTitle });
    },
    [onSaveDocument, editedDocs]
  );
  const saveDocs = React.useCallback(async () => {
    try {
      setIsLoading(true);
      await (onSave == null ? void 0 : onSave(editedDocs.trim()));
      setIsEditing(false);
    } catch (e) {
      onError(e, {
        publicSubject: "Unable to update documents.",
        silent: true,
        type: kit_utils_error.ErrorType.Api
      });
    }
    setIsLoading(false);
  }, [editedDocs, onSave, onError]);
  const handleEditedDocs = React.useCallback(
    (newDocs) => {
      setEditedDocs(newDocs);
      onChange == null ? void 0 : onChange(newDocs);
    },
    [onChange]
  );
  const handleDocsClick = React.useCallback(
    (e) => {
      if (e.detail > 1 || docs === "")
        editDocs();
    },
    [editDocs, docs]
  );
  React.useEffect(() => {
    setEditedDocs(docs);
    setIsEditing(false);
  }, [docs]);
  return /* @__PURE__ */ jsxRuntime.jsx(kit_Surface, { children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: classes.join(" "), children: [
    /* @__PURE__ */ jsxRuntime.jsxs(kit_Row.Row, { children: [
      /* @__PURE__ */ jsxRuntime.jsx(kit_Column, { children: /* @__PURE__ */ jsxRuntime.jsx(
        kit_Input,
        {
          defaultValue: title,
          disabled: disableTitle || disabled,
          value: editedTitle,
          onBlur: (e) => {
            const newValue = e.currentTarget.value;
            onSaveTitle == null ? void 0 : onSaveTitle(newValue);
          },
          onChange: (e) => {
            const newValue = e.currentTarget.value;
            setEditedTitle(newValue);
          },
          onPressEnter: (e) => {
            e.currentTarget.blur();
          }
        }
      ) }),
      /* @__PURE__ */ jsxRuntime.jsx(kit_Column, { align: "right", children: isEditing ? /* @__PURE__ */ jsxRuntime.jsxs(kit_Row.Row, { children: [
        /* @__PURE__ */ jsxRuntime.jsx(kit_Button, { size: "small", onClick: cancelEdit, children: "Cancel" }),
        /* @__PURE__ */ jsxRuntime.jsx(kit_Button, { size: "small", type: "primary", onClick: saveDocs, children: "Save" })
      ] }) : disabled || /* @__PURE__ */ jsxRuntime.jsxs(kit_Row.Row, { children: [
        /* @__PURE__ */ jsxRuntime.jsx(
          kit_Button,
          {
            icon: /* @__PURE__ */ jsxRuntime.jsx(kit_Icon.default, { name: "pencil", showTooltip: true, size: "small", title: "Edit" }),
            type: "text",
            onClick: editDocs
          }
        ),
        extra
      ] }) })
    ] }),
    /* @__PURE__ */ jsxRuntime.jsx(kit_Spinner, { spinning: isLoading, children: /* @__PURE__ */ jsxRuntime.jsx(
      kit_internal_Markdown,
      {
        disabled,
        editing: isEditing,
        markdown: isEditing ? editedDocs : docs,
        onChange: handleEditedDocs,
        onClick: handleDocsClick
      }
    ) })
  ] }) });
};
module.exports = DocumentCard;
