"use strict";
var import_DocumentCards = require("../DocumentCards.css");
const jsxRuntime = require("react/jsx-runtime");
const _ = require("lodash");
const React = require("react");
const kit_Button = require("./Button.cjs");
const kit_Column = require("./Column.cjs");
const kit_DocumentCard = require("./DocumentCard.cjs");
const kit_Dropdown = require("./Dropdown.cjs");
const kit_Icon = require("./Icon.cjs");
const kit_Message = require("./Message.cjs");
const kit_Row = require("./Row.cjs");
const kit_Select = require("./Select.cjs");
const kit_Surface = require("./Surface.cjs");
const kit_Theme_UI = require("./Theme/UI.cjs");
require("./Theme/themeUtils.cjs");
require("./Theme/themes.cjs");
const kit_useConfirm = require("./useConfirm.cjs");
const kit_utils_usePrevious = require("./utils/usePrevious.cjs");
const breakpointMobile = "768px";
const base = "DocumentCards_base_28b80";
const pageSelectRow = "DocumentCards_pageSelectRow_28b80";
const listContainer = "DocumentCards_listContainer_28b80";
const listItem = "DocumentCards_listItem_28b80";
const action = "DocumentCards_action_28b80";
const docsContainer = "DocumentCards_docsContainer_28b80";
const css = {
  breakpointMobile,
  base,
  pageSelectRow,
  listContainer,
  listItem,
  action,
  docsContainer
};
const DocCards = ({
  docs,
  onNewPage,
  onSave,
  onDelete,
  onError,
  onPageUnloadHook,
  disabled = false
}) => {
  var _a;
  const {
    themeSettings: { className: themeClass }
  } = kit_Theme_UI.useTheme();
  const [currentPage, setCurrentPage] = React.useState(0);
  const [deleteTarget, setDeleteTarget] = React.useState(0);
  const [editedContents, setEditedContents] = React.useState(((_a = docs == null ? void 0 : docs[currentPage]) == null ? void 0 : _a.contents) ?? "");
  const confirm = kit_useConfirm.default();
  const [docChangeSignal, setDocChangeSignal] = React.useState(1);
  const fireDocChangeSignal = React.useCallback(
    () => setDocChangeSignal((prev) => prev === 100 ? 1 : prev + 1),
    [setDocChangeSignal]
  );
  const prevDocCount = kit_utils_usePrevious(docs.length, void 0);
  const DROPDOWN_MENU = React.useMemo(
    () => [{ danger: true, disabled: !onDelete, key: "delete", label: "Delete..." }],
    [onDelete]
  );
  const handleSwitchPage = React.useCallback(
    (pageNumber) => {
      var _a2, _b;
      if (pageNumber === currentPage)
        return;
      if (editedContents !== ((_a2 = docs == null ? void 0 : docs[currentPage]) == null ? void 0 : _a2.contents)) {
        confirm({
          content: /* @__PURE__ */ jsxRuntime.jsx("p", { children: "You have unsaved documents, are you sure you want to switch pages? Unsaved documents will be lost." }),
          onConfirm: () => {
            setCurrentPage(pageNumber);
            fireDocChangeSignal();
          },
          onError: _.noop,
          title: "Unsaved content"
        });
      } else {
        setCurrentPage(pageNumber);
        setEditedContents(((_b = docs == null ? void 0 : docs[currentPage]) == null ? void 0 : _b.contents) ?? "");
        fireDocChangeSignal();
      }
    },
    [currentPage, editedContents, confirm, docs, fireDocChangeSignal]
  );
  React.useEffect(() => {
    if (prevDocCount == null) {
      if (docs.length) {
        handleSwitchPage(0);
        fireDocChangeSignal();
      }
    } else if (docs.length > prevDocCount) {
      handleSwitchPage(docs.length - 1);
    } else if (docs.length < prevDocCount) {
      setCurrentPage(
        (prevPageNumber) => prevPageNumber > deleteTarget ? prevPageNumber - 1 : prevPageNumber
      );
    }
  }, [prevDocCount, docs.length, deleteTarget, handleSwitchPage, fireDocChangeSignal]);
  const handleNewPage = React.useCallback(() => {
    const currentPages = docs.length;
    onNewPage();
    handleSwitchPage(currentPages);
  }, [docs.length, onNewPage, handleSwitchPage]);
  const handleSave = React.useCallback(
    async (doc) => {
      setEditedContents(doc.contents);
      await onSave(docs.map((n, idx) => idx === currentPage ? doc : n));
    },
    [currentPage, docs, onSave]
  );
  const handleDeletePage = React.useCallback(
    (deletePageNumber) => {
      onDelete == null ? void 0 : onDelete(deletePageNumber);
      setDeleteTarget(deletePageNumber);
    },
    [onDelete, setDeleteTarget]
  );
  const handleEditedDocs = React.useCallback((newContents) => {
    setEditedContents(newContents);
  }, []);
  React.useEffect(() => {
    if (docs.length === 0)
      return;
    if (currentPage < 0) {
      setCurrentPage(0);
      fireDocChangeSignal();
    }
    if (currentPage >= docs.length) {
      setCurrentPage(docs.length - 1);
      fireDocChangeSignal();
    }
  }, [currentPage, docs.length, fireDocChangeSignal]);
  React.useEffect(() => {
    setEditedContents((prev) => {
      var _a2;
      return ((_a2 = docs == null ? void 0 : docs[currentPage]) == null ? void 0 : _a2.contents) ?? prev;
    });
  }, [currentPage, docs]);
  const handleDropdown = React.useCallback(
    (pageNumber) => handleDeletePage(pageNumber),
    [handleDeletePage]
  );
  if (docs.length === 0) {
    return /* @__PURE__ */ jsxRuntime.jsx(
      kit_Message,
      {
        description: /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
          /* @__PURE__ */ jsxRuntime.jsx("p", { children: "No documents for this project" }),
          !disabled && /* @__PURE__ */ jsxRuntime.jsx(kit_Button, { onClick: handleNewPage, children: "+ New Document" })
        ] }),
        icon: "document"
      }
    );
  }
  return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: themeClass, children: [
    /* @__PURE__ */ jsxRuntime.jsx(kit_Column, { align: "right", children: !disabled && /* @__PURE__ */ jsxRuntime.jsx(kit_Button, { type: "text", onClick: onNewPage, children: "+ New Doc" }) }),
    /* @__PURE__ */ jsxRuntime.jsxs("div", { className: css.base, children: [
      docs.length > 0 && /* @__PURE__ */ jsxRuntime.jsx("ul", { className: css.listContainer, role: "list", children: docs.map((doc, idx) => /* @__PURE__ */ jsxRuntime.jsx(
        kit_Dropdown,
        {
          disabled,
          isContextMenu: true,
          menu: DROPDOWN_MENU,
          onClick: () => handleDropdown(idx),
          children: /* @__PURE__ */ jsxRuntime.jsx(
            "li",
            {
              className: css.listItem,
              style: {
                borderColor: idx === currentPage ? "var(--theme-stage-border-strong)" : void 0
              },
              onClick: () => handleSwitchPage(idx),
              children: /* @__PURE__ */ jsxRuntime.jsx(kit_Surface, { hover: true, children: /* @__PURE__ */ jsxRuntime.jsxs(kit_Row.Row, { children: [
                /* @__PURE__ */ jsxRuntime.jsx("span", { children: doc.name }),
                /* @__PURE__ */ jsxRuntime.jsx(kit_Column, { align: "right", children: !disabled && /* @__PURE__ */ jsxRuntime.jsx(kit_Dropdown, { menu: DROPDOWN_MENU, onClick: () => handleDropdown(idx), children: /* @__PURE__ */ jsxRuntime.jsx("div", { className: css.action, onClick: (e) => e.stopPropagation(), children: /* @__PURE__ */ jsxRuntime.jsx(kit_Icon.default, { name: "overflow-horizontal", title: "Action menu" }) }) }) })
              ] }) })
            }
          )
        },
        idx
      )) }),
      /* @__PURE__ */ jsxRuntime.jsx("div", { className: [css.pageSelectRow, themeClass].join(" "), children: /* @__PURE__ */ jsxRuntime.jsx(kit_Select.default, { value: currentPage, onSelect: handleSwitchPage, children: docs.map((doc, idx) => {
        return /* @__PURE__ */ jsxRuntime.jsxs(kit_Select.Option, { value: idx, children: [
          /* @__PURE__ */ jsxRuntime.jsx(
            "span",
            {
              style: {
                marginRight: 8,
                visibility: idx === currentPage ? "visible" : "hidden"
              },
              children: /* @__PURE__ */ jsxRuntime.jsx(kit_Icon.default, { name: "checkmark", size: "small", title: "Current document" })
            }
          ),
          /* @__PURE__ */ jsxRuntime.jsx("span", { children: doc.name })
        ] }, idx);
      }) }) }),
      /* @__PURE__ */ jsxRuntime.jsx("div", { className: css.docsContainer, children: /* @__PURE__ */ jsxRuntime.jsx(
        kit_DocumentCard,
        {
          disabled,
          doc: docs == null ? void 0 : docs[currentPage],
          documentChangeSignal: docChangeSignal,
          extra: /* @__PURE__ */ jsxRuntime.jsx(kit_Dropdown, { menu: DROPDOWN_MENU, onClick: () => handleDropdown(currentPage), children: /* @__PURE__ */ jsxRuntime.jsx(
            kit_Button,
            {
              icon: /* @__PURE__ */ jsxRuntime.jsx(kit_Icon.default, { name: "overflow-horizontal", title: "Action menu" }),
              type: "text"
            }
          ) }),
          onChange: handleEditedDocs,
          onError,
          onPageUnloadHook,
          onSaveDocument: handleSave
        }
      ) })
    ] })
  ] });
};
module.exports = DocCards;
