import { jsxs, jsx } from "react/jsx-runtime"; import { D as DeleteModal } from "./delete-modal-BrX_mlY2.js"; import { A as Avatar, a as AvatarImage, b as AvatarFallback } from "./avatar-C8iCpF5R.js"; import { B as Button } from "./button-CdJZJLGw.js"; import { C as Card, a as CardHeader, b as CardContent } from "./card-B-gBwpxd.js"; import { T as Textarea } from "./textarea-Z0d4V-ti.js"; import { c as cn } from "./utils-DLCPGU0v.js"; import { usePage, useForm } from "@inertiajs/react"; import { Send, MessageCircle, Trash2 } from "lucide-react"; import "./dialog-DGP_3dPQ.js"; import "@radix-ui/react-dialog"; import "react"; import "@radix-ui/react-avatar"; import "@radix-ui/react-slot"; import "class-variance-authority"; import "clsx"; import "tailwind-merge"; const BlogComments = () => { const { props } = usePage(); const { auth, blog, translate } = props; const { button, frontend, input } = translate; const { data: commentData, setData: setCommentData, post: postComment, processing: commentProcessing, reset: resetComment } = useForm({ content: "", blog_id: blog.id }); const { data: replyData, setData: setReplyData, post: postReply, processing: replyProcessing, reset: resetReply } = useForm({ content: "", blog_id: blog.id, parent_id: null }); const handleSubmitComment = (e) => { e.preventDefault(); if (!commentData.content.trim()) return; postComment(route("blogs.comments.store"), { preserveScroll: true, onSuccess: () => { resetComment(); } }); }; const handleSubmitReply = (e) => { e.preventDefault(); if (!replyData.content.trim()) return; postReply(route("blogs.comments.store"), { preserveScroll: true, onSuccess: () => { resetReply(); } }); }; const formatDate = (dateString) => { return new Date(dateString).toLocaleDateString("en-US", { year: "numeric", month: "short", day: "numeric", hour: "2-digit", minute: "2-digit" }); }; const getUserInitials = (name) => { return name.split(" ").map((n) => n.charAt(0)).join("").toUpperCase().slice(0, 2); }; return /* @__PURE__ */ jsxs("div", { className: cn("space-y-6"), children: [ /* @__PURE__ */ jsxs(Card, { children: [ /* @__PURE__ */ jsx(CardHeader, { children: /* @__PURE__ */ jsx("h4", { className: "text-base font-medium", children: frontend.post_a_comment }) }), /* @__PURE__ */ jsx(CardContent, { children: /* @__PURE__ */ jsxs("form", { onSubmit: handleSubmitComment, className: "space-y-4", children: [ /* @__PURE__ */ jsx( Textarea, { placeholder: input.description, value: commentData.content, onChange: (e) => setCommentData("content", e.target.value), className: "min-h-[100px] resize-none", maxLength: 1e3 } ), /* @__PURE__ */ jsxs("div", { className: "flex items-center justify-between", children: [ /* @__PURE__ */ jsxs("span", { className: "text-muted-foreground text-sm", children: [ commentData.content.length, "/1000 ", frontend.characters ] }), /* @__PURE__ */ jsxs(Button, { type: "submit", disabled: !commentData.content.trim() || commentProcessing, className: "flex items-center gap-2", children: [ /* @__PURE__ */ jsx(Send, { className: "h-4 w-4" }), commentProcessing ? frontend.posting : button.post_comment ] }) ] }) ] }) }) ] }), /* @__PURE__ */ jsx("div", { className: "space-y-4", children: blog.comments.length === 0 ? /* @__PURE__ */ jsxs("div", { className: "py-8 text-center", children: [ /* @__PURE__ */ jsx(MessageCircle, { className: "text-muted-foreground mx-auto mb-2 h-12 w-12" }), /* @__PURE__ */ jsx("p", { className: "text-muted-foreground", children: frontend.no_comments_yet }) ] }) : blog.comments.map((comment) => { var _a; return /* @__PURE__ */ jsx(Card, { className: "overflow-hidden", children: /* @__PURE__ */ jsxs(CardContent, { className: "p-4", children: [ /* @__PURE__ */ jsxs("div", { className: "mb-3 flex items-start justify-between", children: [ /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-3", children: [ /* @__PURE__ */ jsxs(Avatar, { className: "h-10 w-10", children: [ /* @__PURE__ */ jsx(AvatarImage, { src: comment.user.photo || "", alt: comment.user.name }), /* @__PURE__ */ jsx(AvatarFallback, { children: getUserInitials(comment.user.name) }) ] }), /* @__PURE__ */ jsxs("div", { children: [ /* @__PURE__ */ jsx("p", { className: "font-medium", children: comment.user.name }), /* @__PURE__ */ jsx("p", { className: "text-muted-foreground text-sm", children: formatDate(comment.created_at) }) ] }) ] }), ((_a = auth == null ? void 0 : auth.user) == null ? void 0 : _a.id) === comment.user.id && /* @__PURE__ */ jsx( DeleteModal, { routePath: route("blogs.comments.destroy", { id: comment.id }), actionComponent: /* @__PURE__ */ jsx(Button, { variant: "ghost", className: "bg-destructive/8 hover:bg-destructive/6 h-8 w-8", children: /* @__PURE__ */ jsx(Trash2, { className: "text-destructive h-3 w-3" }) }) } ) ] }), /* @__PURE__ */ jsx("div", { className: "mb-3", children: /* @__PURE__ */ jsx("p", { className: "text-sm leading-relaxed whitespace-pre-wrap", children: comment.content }) }), /* @__PURE__ */ jsx("div", { className: "flex items-center gap-2", children: /* @__PURE__ */ jsx(Button, { size: "sm", variant: "outline", onClick: () => setReplyData("parent_id", comment.id), className: "text-xs", children: button.reply }) }), replyData.parent_id === comment.id && /* @__PURE__ */ jsx("div", { className: "mt-4 space-y-3 border-t pt-4", children: /* @__PURE__ */ jsxs("form", { onSubmit: handleSubmitReply, className: "space-y-3", children: [ /* @__PURE__ */ jsx( Textarea, { placeholder: input.description, value: replyData.content, onChange: (e) => setReplyData("content", e.target.value), className: "min-h-[80px] resize-none", maxLength: 1e3 } ), /* @__PURE__ */ jsxs("div", { className: "flex items-center justify-between", children: [ /* @__PURE__ */ jsxs("span", { className: "text-muted-foreground text-xs", children: [ replyData.content.length, "/1000 ", frontend.characters ] }), /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-2", children: [ /* @__PURE__ */ jsx(Button, { type: "button", variant: "outline", size: "sm", onClick: () => resetReply(), children: button.cancel }), /* @__PURE__ */ jsx(Button, { type: "submit", size: "sm", disabled: !replyData.content.trim() || replyProcessing, children: replyProcessing ? frontend.replying : button.reply }) ] }) ] }) ] }) }), comment.replies && comment.replies.length > 0 && /* @__PURE__ */ jsx("div", { className: "mt-5 space-y-5", children: comment.replies.map((reply) => { var _a2; return /* @__PURE__ */ jsxs("div", { className: "border-border space-y-2 border-l pl-4", children: [ /* @__PURE__ */ jsxs("div", { className: "flex items-start justify-between", children: [ /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-2", children: [ /* @__PURE__ */ jsxs(Avatar, { className: "h-8 w-8", children: [ /* @__PURE__ */ jsx(AvatarImage, { src: reply.user.photo || "", alt: reply.user.name }), /* @__PURE__ */ jsx(AvatarFallback, { className: "text-xs", children: getUserInitials(reply.user.name) }) ] }), /* @__PURE__ */ jsxs("div", { children: [ /* @__PURE__ */ jsx("p", { className: "text-sm font-medium", children: reply.user.name }), /* @__PURE__ */ jsx("p", { className: "text-muted-foreground text-xs", children: formatDate(reply.created_at) }) ] }) ] }), ((_a2 = auth == null ? void 0 : auth.user) == null ? void 0 : _a2.id) === reply.user.id && /* @__PURE__ */ jsx( DeleteModal, { routePath: route("blogs.comments.destroy", { id: reply.id }), actionComponent: /* @__PURE__ */ jsx(Button, { variant: "ghost", className: "bg-destructive/8 hover:bg-destructive/6 h-8 w-8", children: /* @__PURE__ */ jsx(Trash2, { className: "text-destructive h-3 w-3" }) }) } ) ] }), /* @__PURE__ */ jsx("p", { className: "pl-10 text-sm leading-relaxed whitespace-pre-wrap", children: reply.content }) ] }, reply.id); }) }) ] }) }, comment.id); }) }) ] }); }; export { BlogComments as default };