'use client';

import { Button, ButtonColor, ButtonSize, ButtonVariant } from "../Button/Button.mjs";
import { useUser } from "../../hooks/useUser/index.mjs";
import { AutoCompleteTextarea } from "../TextArea/AutocompleteTextArea.mjs";
import { Check, X } from "lucide-react";
import { useEffect, useState } from "react";
import { Fragment as Fragment$1, jsx, jsxs } from "react/jsx-runtime";

//#region src/components/ContentEditor/ContentEditorTextArea.tsx
/**
* ContentEditorTextArea Component
*
* An inline editing component for multi-line text with autocomplete functionality,
* user authentication integration, and validation support. This component combines
* the auto-sizing textarea with smart autocomplete features.
*
* ## Features
* - **Auto-sizing Textarea**: Automatically adjusts height to content
* - **Autocomplete Integration**: Smart text completion when user is authenticated
* - **Validation Support**: Optional content validation with visual feedback
* - **Action Buttons**: Built-in save/cancel with support for additional buttons
* - **Keyboard Shortcuts**: Enter to save, Escape to cancel
* - **User Authentication**: Autocomplete features activate based on auth status
* - **Accessibility**: Full ARIA support and keyboard navigation
*
* ## Accessibility
* - Proper ARIA labels and descriptions for all controls
* - Keyboard navigation (Tab, Enter, Escape)
* - Screen reader support for validation states and user auth status
* - Focus management and visual indicators
*
* @param children - Current textarea content
* @param onContentChange - Callback when content is saved
* @param disabled - Whether the editor is disabled
* @param validate - Optional validation function
* @param additionalButtons - Extra buttons to display
* @param props - Additional AutoSizedTextArea component props
*/
const ContentEditorTextArea = ({ children, onContentChange, disabled, validate, additionalButtons, ...props }) => {
	const { isAuthenticated } = useUser();
	const [newValue, setNewValue] = useState(children);
	const [resetIncrementor, setResetIncrementor] = useState(0);
	const isEdited = newValue !== children;
	const handleCancel = () => {
		setNewValue(children);
		setResetIncrementor((prev) => prev + 1);
	};
	const handleValid = () => {
		onContentChange(newValue);
	};
	const handleOnContentChange = (e) => setNewValue(e.currentTarget.value ?? "");
	const handleKeyDown = (e) => {
		if (e.key === "Enter" && (e.metaKey || e.ctrlKey) && !disabled && isValid) {
			e.preventDefault();
			handleValid();
		} else if (e.key === "Escape") {
			e.preventDefault();
			handleCancel();
		}
	};
	useEffect(() => {
		setNewValue(children);
		setResetIncrementor((prev) => prev + 1);
	}, [children]);
	const isValid = validate?.(newValue) ?? true;
	return /* @__PURE__ */ jsxs("div", {
		className: "flex size-full flex-col items-center justify-between gap-2",
		role: "group",
		"aria-label": "Content editor textarea",
		children: [/* @__PURE__ */ jsx(AutoCompleteTextarea, {
			onChange: handleOnContentChange,
			onKeyDown: handleKeyDown,
			variant: "invisible",
			className: "size-full",
			value: children,
			isActive: isAuthenticated,
			disabled,
			"aria-label": "Editable textarea content",
			"aria-describedby": isEdited || additionalButtons ? "content-editor-textarea-actions" : void 0,
			"aria-invalid": !isValid,
			...props
		}, resetIncrementor), (isEdited || additionalButtons) && /* @__PURE__ */ jsxs("div", {
			id: "content-editor-textarea-actions",
			className: "flex w-full items-center justify-end gap-2",
			role: "group",
			"aria-label": "Edit actions",
			children: [isEdited && /* @__PURE__ */ jsxs(Fragment$1, { children: [/* @__PURE__ */ jsx(Button, {
				Icon: Check,
				label: `Save changes${!isValid ? " (invalid content)" : ""}`,
				variant: ButtonVariant.HOVERABLE,
				color: ButtonColor.TEXT,
				size: ButtonSize.ICON_SM,
				className: "cursor-pointer hover:scale-110",
				disabled: disabled || !isValid,
				onClick: handleValid,
				"aria-describedby": !isValid ? "textarea-validation-error" : void 0
			}), /* @__PURE__ */ jsx(Button, {
				Icon: X,
				label: "Cancel changes",
				variant: ButtonVariant.HOVERABLE,
				size: ButtonSize.ICON_SM,
				color: ButtonColor.TEXT,
				className: "cursor-pointer hover:scale-110",
				onClick: handleCancel,
				disabled
			})] }), additionalButtons]
		})]
	}, children);
};

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