import { ActionIcon, Avatar, Button, Select, Text, Textarea, Title, Box, Popover, Flex } from '@mantine/core';
import { IconChevronDown, IconPointFilled, IconTrash, IconTrashX } from '@tabler/icons-react';
import React, { useEffect, useState, useRef } from 'react';
import { useDisclosure } from '@mantine/hooks';
import { useDispatch, useSelector } from "react-redux";
import { useEditor, EditorContent } from '@tiptap/react';
import { Link, RichTextEditor } from '@mantine/tiptap';
import StarterKit from '@tiptap/starter-kit';
import Underline from '@tiptap/extension-underline';
import Placeholder from '@tiptap/extension-placeholder';
import Mention from '@tiptap/extension-mention';
import TextAlign from '@tiptap/extension-text-align';
import { createComment, deleteComment } from "../../Settings/store/taskSlice";
import { modals } from "@mantine/modals";
import { hasPermission, useProjectPermissions } from "../../ui/permissions";
import { translate } from '../../../utils/i18n';
import { set } from 'date-fns';
// import {createComment} from "../../../Settings/store/taskSlice";
const TaskComment = ({ task, selectedValue }) => {
const dispatch = useDispatch();
const rawMembers = task && task.project && task.project.members;
const [comments, setComments] = useState(task && task.comments ? task.comments : []);
const [commentText, setCommentText] = useState('');
const { loggedUserId, name } = useSelector((state) => state.auth.user)
const { loggedInUser } = useSelector((state) => state.auth.session)
const [mentionPopoverOpened, setMentionPopoverOpened] = useState(false);
const [popoverTarget, setPopoverTarget] = useState(null);
const [mentionItems, setMentionItems] = useState([]);
const [mentionCommand, setMentionCommand] = useState(() => () => { });
const mentionAnchorRef = useRef(null);
const formatTimestamp = (timestamp) => {
const now = new Date();
const commentTime = new Date(timestamp);
const timeDiff = Math.abs(now - commentTime) / 1000; // in seconds
if (timeDiff < 60) {
return 'Just now';
} else if (timeDiff < 3600) {
const minutes = Math.floor(timeDiff / 60);
return `${minutes} min ago`;
} else if (timeDiff < 86400) {
const hours = Math.floor(timeDiff / 3600);
return `${hours} hour${hours > 1 ? 's' : ''} ago`;
} else {
return commentTime.toLocaleString();
}
};
const handleAddComment = () => {
const timestamp = new Date().toISOString();
const tempDiv = document.createElement('div');
tempDiv.innerHTML = commentText;
// Find all mention elements
const mentions = tempDiv.querySelectorAll('.mention');
const mentionedUsers = Array.from(mentions).map(mention => ({
id: mention.getAttribute('data-id'),
name: mention.getAttribute('data-label')
}));
const newComment = {
user_id: loggedInUser ? loggedInUser.loggedUserId : loggedUserId,
user_name: name,
commentable_id: task && task.id ? task.id : null,
commentable_type: 'task',
content: commentText,
mention_users: mentionedUsers,
created_at: formatTimestamp(timestamp)
};
dispatch(createComment(newComment)).then((response) => {
if (response.payload && response.payload.data) {
setComments([response.payload.data, ...comments]);
editor?.commands.clearContent();
}
});
setCommentText(''); // Clear textarea
};
useEffect(() => {
setComments(task && task.comments ? task.comments : []);
}, [selectedValue, task.comments]);
const commentDeleteHandler = (commentId) => modals.openConfirmModal({
title: (
{translate('You are parmanently deleting this comment')}
),
size: 'sm',
radius: 'md',
withCloseButton: false,
children: (
{translate('Are you sure this comment delete?')}
),
labels: { confirm: translate('Confirm'), cancel: translate('Cancel') },
onCancel: () => console.log('Cancel'),
onConfirm: () => {
if (commentId && commentId !== 'undefined') {
dispatch(deleteComment({ id: commentId, data: { 'deleted_by': loggedInUser ? loggedInUser.loggedUserId : loggedUserId } })).then((response) => {
if (response.payload && response.payload.data) {
setComments(comments.filter(comment => comment.id !== response.payload.data.id));
}
});
}
},
});
const [mentionProps, setMentionProps] = useState(null);
const membersRef = useRef([]);
useEffect(() => {
if (rawMembers && rawMembers.length) {
membersRef.current = rawMembers.map(user => ({
id: user.id,
label: user.name,
avatar: user.avatar
}));
}
}, [rawMembers]);
const editor = useEditor({
extensions: [
StarterKit,
Link.configure({
autolink: true,
linkOnPaste: true,
openOnClick: true,
HTMLAttributes: {
target: '_blank',
rel: 'noopener noreferrer'
}
}),
Underline,
TextAlign.configure({
types: ['heading', 'paragraph'],
}),
Placeholder.configure({ placeholder: 'Type your comment here...' }),
Mention.configure({
HTMLAttributes: {
class: 'mention',
'data-id': 'id',
'data-label': 'label'
},
renderText: ({ node }) => `@${node.attrs.label}`,
suggestion: {
char: '@',
items: ({ query }) =>
membersRef.current.filter(u =>
u.label.toLowerCase().startsWith(query.toLowerCase())
),
render: () => {
return {
onStart: (props) => {
setMentionProps(props);
setMentionItems(props.items);
setMentionCommand(() => props.command);
setMentionPopoverOpened(true);
},
onUpdate: (props) => {
setMentionProps(props);
setMentionItems(props.items);
setMentionCommand(() => props.command);
},
onExit: () => {
setMentionProps(null);
setMentionPopoverOpened(false);
setPopoverTarget(null);
setMentionItems([]);
},
}
},
},
}),
],
content: commentText,
onUpdate: ({ editor }) => {
setCommentText(editor.getHTML());
},
});
const {projectInfo} = useSelector((state) => state.settings.task.projectInfo);
const projectPermissions = useProjectPermissions(task?.project_id);
return (
<>
{selectedValue === 'Only Comments' &&