'use client';


import { cn } from "../../utils/cn.mjs";
import { Button, ButtonColor, ButtonSize, ButtonVariant } from "../Button/Button.mjs";
import { Check, Pencil, X } from "lucide-react";
import { useCallback, useEffect, useRef, useState } from "react";
import { jsx, jsxs } from "react/jsx-runtime";

//#region src/components/EditableField/EditableFieldLayout.tsx
const EditableFieldLayout = ({ value = "", onCancel, onSave, onClick, children, isDisabled,...props }) => {
	const [isEditing, setIsEditing] = useState(false);
	const editableFieldRef = useRef(null);
	const handleSave = (e) => {
		e.stopPropagation();
		setIsEditing(false);
		onSave();
	};
	const handleCancel = (e) => {
		e.stopPropagation();
		setIsEditing(false);
		onCancel();
	};
	const result = !value || value === "" ? "-" : value;
	const handleClickOutside = useCallback((e) => {
		const selection = window.getSelection();
		if (selection && selection.toString().trim() !== "") return;
		if (editableFieldRef.current && !editableFieldRef.current.contains(e.target)) {
			setIsEditing(false);
			onSave();
		}
	}, [onSave]);
	useEffect(() => {
		if (isEditing) document.addEventListener("click", handleClickOutside);
		else document.removeEventListener("click", handleClickOutside);
		return () => document.removeEventListener("click", handleClickOutside);
	}, [handleClickOutside, isEditing]);
	return /* @__PURE__ */ jsxs("span", {
		className: "group/editable-field flex gap-2",
		role: "button",
		tabIndex: 0,
		onClick: (e) => {
			setIsEditing(true);
			onClick?.(e);
		},
		ref: editableFieldRef,
		...props,
		children: [/* @__PURE__ */ jsxs("div", {
			className: cn("flex flex-1 gap-2", isEditing ? "display" : "hidden"),
			children: [
				children,
				/* @__PURE__ */ jsx(Button, {
					label: "Save",
					variant: ButtonVariant.HOVERABLE,
					size: ButtonSize.ICON_SM,
					color: ButtonColor.TEXT,
					Icon: Check,
					onClick: handleSave,
					disabled: isDisabled,
					className: "!text-current",
					role: "button",
					tabIndex: 0,
					"aria-label": "Save changes",
					"data-testid": "editable-field-save-button"
				}),
				/* @__PURE__ */ jsx(Button, {
					label: "Cancel",
					color: ButtonColor.TEXT,
					variant: ButtonVariant.HOVERABLE,
					className: "!text-current",
					size: ButtonSize.ICON_SM,
					Icon: X,
					onClick: handleCancel,
					disabled: isDisabled,
					role: "button",
					tabIndex: 0,
					"aria-label": "Cancel changes",
					"data-testid": "editable-field-cancel-button"
				})
			]
		}, String(isEditing)), /* @__PURE__ */ jsxs("div", {
			className: cn("flex flex-1 gap-2", isEditing ? "hidden" : "display"),
			children: [/* @__PURE__ */ jsx("span", {
				className: "ml-2 flex w-full whitespace-pre-wrap p-1 text-sm leading-6",
				children: result
			}), /* @__PURE__ */ jsx(Button, {
				label: "Edit",
				Icon: Pencil,
				color: ButtonColor.TEXT,
				variant: ButtonVariant.HOVERABLE,
				size: ButtonSize.ICON_SM,
				className: "!text-current invisible group-hover/editable-field:visible",
				disabled: isDisabled,
				onClick: (e) => {
					e.stopPropagation();
					setIsEditing(true);
				}
			})]
		})]
	});
};

//#endregion
export { EditableFieldLayout };
//# sourceMappingURL=EditableFieldLayout.mjs.map