import useEngineContext from "../../hooks/useEngineContext.js";
import locales_default from "./locales.js";
import AddTempModal from "./AddTempModal.js";
import React, { useEffect, useRef, useState } from "react";
import { locales } from "@pisell/utils";
import { Button, Input, PisellModal } from "@pisell/materials";
import Delete_wght300_24px from "@pisell/icon/es/Delete_wght300_24px";
import "./index.less";
//#region src/plus/noteModal/index.tsx
const { TextArea } = Input;
const STORAGE_KEY = "pisell2_note_templates";
const NoteModalContent = ({ open = false, title = "", value = "", onConfirm, onDelete, onCancel, zIndex }) => {
	var _context$engine;
	const context = useEngineContext();
	locales.init(locales_default, (context === null || context === void 0 || (_context$engine = context.engine) === null || _context$engine === void 0 || (_context$engine = _context$engine.props) === null || _context$engine === void 0 ? void 0 : _context$engine.locale) || "en");
	const [noteValue, setNoteValue] = useState(value);
	const [templates, setTemplates] = useState([]);
	const [templateModalOpen, setTemplateModalOpen] = useState(false);
	const inputRef = useRef(null);
	useEffect(() => {
		if (open) {
			const storedTemplates = localStorage.getItem(STORAGE_KEY);
			if (storedTemplates) try {
				setTemplates(JSON.parse(storedTemplates));
			} catch (error) {
				console.error("Failed to parse templates from localStorage:", error);
				setTemplates([]);
			}
			setTimeout(() => {
				var _inputRef$current;
				(_inputRef$current = inputRef.current) === null || _inputRef$current === void 0 || _inputRef$current.focus();
			}, 100);
		}
	}, [open]);
	const saveTemplates = (newTemplates) => {
		localStorage.setItem(STORAGE_KEY, JSON.stringify(newTemplates));
		setTemplates(newTemplates);
	};
	const handleTemplateClick = (template) => {
		setNoteValue((prev) => (prev || "") + " " + (template || ""));
	};
	const handleConfirm = () => {
		onConfirm === null || onConfirm === void 0 || onConfirm(noteValue);
	};
	const handleDelete = () => {
		setNoteValue("");
		onDelete === null || onDelete === void 0 || onDelete();
	};
	const handleCancel = () => {
		setNoteValue("");
		onCancel === null || onCancel === void 0 || onCancel();
	};
	const onAddTemplate = () => {
		setTemplateModalOpen(true);
	};
	const onAddTemplateConfirm = (newTemplate) => {
		if (newTemplate.trim()) {
			saveTemplates([...templates, newTemplate.trim()]);
			setTemplateModalOpen(false);
		}
	};
	const onAddTemplateCancel = () => {
		setTemplateModalOpen(false);
	};
	return /* @__PURE__ */ React.createElement(React.Fragment, null, /* @__PURE__ */ React.createElement(PisellModal, {
		open,
		title: title || locales.getText("pisell2.text.note.modal.title"),
		headerDivider: false,
		onCancel: handleCancel,
		footer: null,
		width: 680,
		centered: true,
		destroyOnClose: true,
		zIndex
	}, /* @__PURE__ */ React.createElement("div", { className: "note-modal-content" }, /* @__PURE__ */ React.createElement("div", { className: "template-section" }, /* @__PURE__ */ React.createElement("div", {
		onClick: onAddTemplate,
		className: "add-template-btn"
	}, locales.getText("pisell2.text.note.modal.btn.add.template")), /* @__PURE__ */ React.createElement("div", {
		className: "note-modal-templates-container",
		onTouchMove: (e) => e.stopPropagation()
	}, /* @__PURE__ */ React.createElement("div", { className: "note-modal-templates-scroll" }, templates.map((template, index) => /* @__PURE__ */ React.createElement("div", {
		key: index,
		style: {
			display: "inline-block",
			marginLeft: "8px"
		}
	}, /* @__PURE__ */ React.createElement("div", {
		className: "note-modal-template-tag",
		onClick: () => handleTemplateClick(template)
	}, template)))))), /* @__PURE__ */ React.createElement("div", { className: "input-section" }, /* @__PURE__ */ React.createElement(TextArea, {
		value: noteValue,
		onChange: (e) => setNoteValue(e.target.value),
		placeholder: locales.getText("pisell2.text.note.modal.placeholder"),
		autoSize: {
			minRows: 4,
			maxRows: 8
		},
		className: "note-input",
		ref: inputRef
	})), /* @__PURE__ */ React.createElement("div", { className: "action-buttons" }, !!value ? /* @__PURE__ */ React.createElement(Button, {
		block: true,
		type: "primary",
		danger: true,
		icon: /* @__PURE__ */ React.createElement(Delete_wght300_24px, { style: { fontSize: 20 } }),
		onClick: handleDelete,
		className: "delete-btn"
	}, locales.getText("pisell2.text.note.modal.btn.delete")) : /* @__PURE__ */ React.createElement(Button, {
		block: true,
		type: "default",
		onClick: handleCancel,
		className: "delete-btn"
	}, locales.getText("pisell2.text.note.modal.btn.cancel")), /* @__PURE__ */ React.createElement(Button, {
		block: true,
		type: "primary",
		onClick: handleConfirm,
		className: "confirm-btn",
		disabled: !noteValue
	}, locales.getText("pisell2.text.note.modal.btn.confirm"))))), templateModalOpen && /* @__PURE__ */ React.createElement(AddTempModal, {
		open: templateModalOpen,
		onCancel: onAddTemplateCancel,
		onConfirm: onAddTemplateConfirm
	}));
};
const NoteModal = (props) => {
	if (!props.open) return null;
	return /* @__PURE__ */ React.createElement(NoteModalContent, props);
};
//#endregion
export { NoteModal as default };
