import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
import { useState, useEffect, useRef, Fragment } from 'react';
import '../Comments.scss';
import Icon from '../../Icon';
import Tooltip from '../../Tooltip';
import Typography from '../../Typography';
import MentionUser from '../mentionUser/MentionUser';
import { DETECT_AT_CHAR_IN_COMMENT, DETECT_AT_CHAR_BETWEEN_STRINGS_IN_COMMENT, DETECT_MENTIONED_USERNAME_BEFORE_CARET, DETECT_AT_CHAR_AT_START, CHECK_AT_FOLLOWED_BY_WORD, DETECT_WORD_START_WITH_AT, } from '../../../../src/validations/regex';
import { formatUserDetails, findUserByName } from '../commentCommonUtils';
const ChildComment = ({ handleInsertNode, handleEditNode, handleDeleteNode, comment, depth = 0, isDisable, userDetails, isEditDeleteActionAllowed = true, createdByID, rowBreakCharCount = 83, isVewMode = false, deleteEnable = true, }) => {
    const [input, setInput] = useState('');
    const [editMode, setEditMode] = useState(false);
    const [showInput, setShowInput] = useState(false);
    const [expand, setExpand] = useState(true);
    const [usersObj, setUsersObj] = useState([]);
    const [hasAtSymbol, setHasAtSymbol] = useState(false);
    const [mentionedUserEmails, setMentionedUserEmails] = useState([]);
    const [mentionPosition, setMentionPosition] = useState({ top: 0, left: 0 });
    const [textAfterAt, setTextAfterAt] = useState('');
    const textAreaRef = useRef(null);
    const mentionRef = useRef(null);
    const mentionReplyRef = useRef(null);
    useEffect(() => {
        if (editMode && comment?.description) {
            setInput(comment?.description);
        }
    }, [editMode, comment.description]);
    useEffect(() => {
        const formattedUsersDetails = formatUserDetails(userDetails);
        setUsersObj(formattedUsersDetails);
    }, [userDetails]);
    useEffect(() => {
        const mentionedNames = input.match(DETECT_AT_CHAR_IN_COMMENT) || [];
        const updatedEmails = mentionedNames
            .map((name) => {
            return findUserByName(name, usersObj);
        })
            .filter(Boolean);
        setMentionedUserEmails(updatedEmails);
    }, [input]);
    useEffect(() => {
        const handleClickOutside = (event) => {
            const clickedOutsideMentionUser = mentionRef.current &&
                !mentionRef.current.contains(event.target) &&
                textAreaRef.current &&
                !textAreaRef.current.contains(event.target);
            const clickedOutsideTextarea = mentionReplyRef.current &&
                !mentionReplyRef.current.contains(event.target) &&
                textAreaRef.current &&
                !textAreaRef.current.contains(event.target);
            if (clickedOutsideMentionUser || clickedOutsideTextarea) {
                setHasAtSymbol(false);
                setInput((prev) => prev.replace(/(?:^|\s)(@\w*)$/, ''));
            }
        };
        if (hasAtSymbol) {
            document.addEventListener('mousedown', handleClickOutside);
        }
        return () => {
            document.removeEventListener('mousedown', handleClickOutside);
        };
    }, [hasAtSymbol]);
    const { modifiedByUname, createdByUname, modifiedOn, createdOn } = comment || {};
    const randomPastTime = modifiedOn ?? createdOn ?? new Date().toLocaleString();
    const firstName = modifiedByUname ?? createdByUname ?? 'Anonymous';
    const isDepthLimitReached = depth > 2;
    const avatar = firstName ? firstName.charAt(0).toUpperCase() : 'A';
    useEffect(() => {
        if (editMode && comment.description) {
            setInput(comment.description);
        }
    }, [editMode, comment.description]);
    const handleNewComment = () => {
        setShowInput(true);
    };
    const onAddComment = () => {
        if (input.trim().length === 0)
            return;
        if (editMode) {
            handleEditNode(comment.id, input, mentionedUserEmails);
            setShowInput(false);
            setInput('');
        }
        else {
            setExpand(true);
            handleInsertNode(comment.id, input, mentionedUserEmails);
            setShowInput(false);
            setInput('');
        }
        if (editMode)
            setEditMode(false);
    };
    const getCaretCoordinates = (element, position) => {
        const div = document.createElement('div');
        const copyStyle = getComputedStyle(element);
        div.style.cssText = `
        position: absolute;
        visibility: hidden;
        white-space: pre-wrap;
        word-wrap: break-word;
        overflow: auto;
        width: ${element.offsetWidth}px;
        height: ${element.offsetHeight}px;
        font-family: ${copyStyle.fontFamily};
        font-size: ${copyStyle.fontSize};
        padding: ${copyStyle.padding};
        border: ${copyStyle.border};
        box-sizing: ${copyStyle.boxSizing};
        line-height: ${copyStyle.lineHeight};
      `;
        div.scrollTop = element.scrollTop;
        div.scrollLeft = element.scrollLeft;
        document.body.appendChild(div);
        const text = element.value.slice(0, position);
        div.textContent = text || '.';
        const span = document.createElement('span');
        span.textContent = '.';
        div.appendChild(span);
        const spanRect = span.getBoundingClientRect();
        document.body.removeChild(div);
        return {
            top: spanRect.top - 20,
            left: spanRect.left,
        };
    };
    useEffect(() => {
        const updateMentionPosition = () => {
            if (!textAreaRef.current)
                return;
            const textareaEl = textAreaRef?.current;
            const dropdownEl = editMode
                ? mentionRef?.current
                : mentionReplyRef?.current;
            const caretPosition = textAreaRef.current.selectionStart;
            const caretCoords = getCaretCoordinates(textareaEl, caretPosition);
            const dropdownHeight = dropdownEl?.getBoundingClientRect().height ?? 0;
            const inputRect = textareaEl?.getBoundingClientRect();
            if (!inputRect)
                return;
            const spaceBelow = window.innerHeight - inputRect.bottom;
            const spaceAbove = inputRect.top;
            const showAbove = spaceBelow < dropdownHeight && spaceAbove > dropdownHeight;
            setMentionPosition({
                top: showAbove
                    ? caretPosition - dropdownHeight - 16
                    : caretPosition + 32,
                left: caretCoords.left + 10,
            });
        };
        updateMentionPosition();
    }, [input]);
    const textAreaInputChange = (e) => {
        const textAreaValue = e.target.value;
        setInput(textAreaValue);
        const mentionedUserNames = textAreaValue.match(/@\S+/g) || [];
        const mentionedUserEmails = mentionedUserNames
            .map((name) => {
            return findUserByName(name, usersObj);
        })
            .filter((email) => email !== null);
        setMentionedUserEmails(mentionedUserEmails);
        const caretPosition = e.target.selectionStart;
        const textBeforeCaret = textAreaValue.slice(0, caretPosition);
        const match = textBeforeCaret.match(CHECK_AT_FOLLOWED_BY_WORD);
        const mentionWords = match?.[1] || '';
        setTextAfterAt(mentionWords);
        const hasExplicitAtSymbol = DETECT_AT_CHAR_AT_START.test(textBeforeCaret);
        setHasAtSymbol(!!hasExplicitAtSymbol);
    };
    const handleKeyDown = (e) => {
        if (e.key === '@') {
            setHasAtSymbol(true);
        }
        else if (e.key === 'Backspace' && textAreaRef.current) {
            const caretPos = textAreaRef.current.selectionStart;
            const textBeforeCaret = input.slice(0, caretPos);
            if (textBeforeCaret.endsWith('@')) {
                setHasAtSymbol(false);
            }
            const mentionMatch = textBeforeCaret.match(DETECT_MENTIONED_USERNAME_BEFORE_CARET);
            if (mentionMatch) {
                e.preventDefault();
                const mentionText = mentionMatch[1];
                const mentionIndex = textBeforeCaret.lastIndexOf(mentionText || '');
                const updatedInput = input.slice(0, mentionIndex) + input.slice(caretPos);
                setInput(updatedInput);
                setHasAtSymbol(false);
                setMentionedUserEmails(() => {
                    const nameMentionsInText = (updatedInput.match(/@\w+/g) || []).map((m) => m.slice(1));
                    return nameMentionsInText
                        .map((username) => {
                        return findUserByName(username, usersObj);
                    })
                        .filter(Boolean);
                });
                setTimeout(() => {
                    textAreaRef.current?.setSelectionRange(mentionIndex, mentionIndex);
                }, 0);
            }
        }
    };
    const optionClicked = (name) => {
        if (!textAreaRef.current)
            return;
        const caretPosition = textAreaRef.current.selectionStart;
        const textBeforeCaret = input.slice(0, caretPosition);
        const mentionNameMatch = textBeforeCaret.match(DETECT_AT_CHAR_BETWEEN_STRINGS_IN_COMMENT);
        if (mentionNameMatch) {
            const mentionNameStart = textBeforeCaret.lastIndexOf(mentionNameMatch[1] || '');
            const remainder = input.slice(caretPosition);
            const mentionedUserName = `@${name.replace(/\s+/g, '')} `;
            const newText = input.slice(0, mentionNameStart) + mentionedUserName + remainder;
            setInput(newText);
            setHasAtSymbol(false);
            setTimeout(() => {
                textAreaRef.current?.focus();
                textAreaRef.current?.setSelectionRange(mentionNameStart + mentionedUserName.length + 1, mentionNameStart + mentionedUserName.length + 1);
            }, 0);
            setMentionedUserEmails(() => {
                const nameMentionsInText = (newText.match(/@\w+/g) || []).map((word) => word.slice(1));
                const updatedUserEmails = nameMentionsInText
                    .map((username) => {
                    return findUserByName(username, usersObj);
                })
                    .filter(Boolean);
                return updatedUserEmails;
            });
        }
    };
    return (_jsx("div", { className: "commentsContainer", children: _jsxs("div", { className: 'comment-wrapper', children: [_jsxs("div", { className: 'commentContainer', children: [_jsx("div", { className: "commentContainer__avatar", children: comment?.profileImage ? (_jsx("img", { height: 30, width: 30, src: `data:image/jpeg;base64,${comment?.profileImage}` })) : (avatar) }), _jsxs("div", { className: "ff-message-container", children: [_jsxs("div", { className: "ff-message", children: [_jsx("div", { className: "ff-message-name", children: firstName }), _jsx("div", { className: "ff-message-time", children: randomPastTime })] }), _jsxs("div", { className: "ff-editable-container", children: [!editMode && (_jsx(Typography, { className: "typography-text", children: comment?.description
                                                ?.split(DETECT_WORD_START_WITH_AT)
                                                .map((part, index) => part.startsWith('@') ? (_jsx("b", { children: part }, `highlight-${index}`)) : (_jsx(Fragment, { children: part }, `text-${index}`))) })), editMode && (_jsxs("div", { className: "inputContainer", children: [_jsx("textarea", { rows: input.length < rowBreakCharCount ? 1 : 3, className: "inputContainer_input first_input", value: input, autoFocus: true, placeholder: 'Edit comment', ref: textAreaRef, onChange: (e) => textAreaInputChange(e), onKeyDown: handleKeyDown }), hasAtSymbol && (_jsx("div", { id: "mention-user", style: {
                                                        position: 'absolute',
                                                        top: `${mentionPosition.top}px`,
                                                        left: `${mentionPosition.left}px`,
                                                    }, children: _jsx(MentionUser, { hasAtSymbol: hasAtSymbol, usersObj: usersObj, optionClicked: optionClicked, charsAfterAt: textAfterAt, mentionUserRef: mentionRef }) })), _jsxs("div", { className: "edit-comment", children: [_jsx("div", { className: "reply", children: _jsx(Tooltip, { title: editMode ? 'Update' : 'Add', children: _jsx(Icon, { name: "comment_reply", hoverEffect: true, disabled: (editMode &&
                                                                        input.trim() ===
                                                                            (comment?.description?.trim() ?? '')) ||
                                                                        input.trim().length === 0, onClick: () => {
                                                                        onAddComment();
                                                                        setEditMode(false);
                                                                        setShowInput(false);
                                                                    } }) }) }), _jsx("div", { className: "reply", onClick: () => {
                                                                setEditMode(false);
                                                                setShowInput(false);
                                                                setInput('');
                                                            }, children: _jsx(Tooltip, { title: editMode ? 'Cancel' : 'Close', children: _jsx(Icon, { name: "close", color: "var(--ff-delete-button-attachment)", hoverEffect: true }) }) })] })] })), _jsxs("div", { className: "comment-actions", children: [!isDepthLimitReached &&
                                                    depth < 2 &&
                                                    comment.comments?.length > 0 && (_jsx("div", { className: "action-icon", onClick: () => setExpand((prevExpand) => !prevExpand), children: _jsx(Tooltip, { title: `${expand ? 'collapse' : 'expand'}`, children: _jsx(Icon, { name: expand ? 'collapse-arrow' : 'expand-arrow', disabled: editMode || showInput, hoverEffect: true }) }) })), !isDepthLimitReached &&
                                                    depth < 2 &&
                                                    comment.comments?.length === 0 && (_jsx("div", { className: "action-icon", children: _jsx(Icon, { name: "expand-arrow", disabled: true }) })), !isVewMode && (_jsxs("div", { className: "ff-comment-action-item", children: [depth < 2 && (_jsx("div", { className: "action-icon", children: _jsx(Tooltip, { title: "Reply", children: _jsx(Icon, { name: "comment_icon", disabled: editMode || isDisable, hoverEffect: true, onClick: handleNewComment }) }) })), isEditDeleteActionAllowed && (_jsx("div", { className: "action-icon", children: _jsx(Tooltip, { title: "Edit", children: _jsx(Icon, { name: "edit", disabled: showInput || isDisable, hoverEffect: true, onClick: () => setEditMode(true) }) }) })), isEditDeleteActionAllowed && deleteEnable && (_jsx("div", { className: "action-icon", children: _jsx(Tooltip, { title: "Delete", children: _jsx(Icon, { name: "delete", color: "var(--ff-delete-button-attachment)", onClick: () => {
                                                                        if (showInput)
                                                                            return;
                                                                        handleDeleteNode(comment.id);
                                                                    }, disabled: editMode || showInput || isDisable, hoverEffect: true }) }) }))] }))] })] })] })] }), _jsx("div", { className: "comment-reply-container", children: showInput && (_jsxs("div", { className: "inputContainer", children: [_jsx("textarea", { rows: input.length < rowBreakCharCount ? 1 : 3, className: "inputContainer_input first_input", value: input, autoFocus: true, placeholder: 'Add reply comments', ref: textAreaRef, onChange: (e) => textAreaInputChange(e), onKeyDown: handleKeyDown }), hasAtSymbol && (_jsx("div", { id: "mention-user", style: {
                                    position: 'absolute',
                                    top: `${mentionPosition.top}px`,
                                    left: `${mentionPosition.left}px`,
                                }, children: _jsx(MentionUser, { hasAtSymbol: hasAtSymbol, usersObj: usersObj, optionClicked: optionClicked, charsAfterAt: textAfterAt, mentionUserRef: mentionReplyRef }) })), _jsxs("div", { className: "edit-comment", children: [_jsx("div", { className: "reply", onClick: () => {
                                            onAddComment();
                                            setEditMode(false);
                                            setShowInput(false);
                                        }, children: _jsx(Tooltip, { title: "Reply", children: _jsx(Icon, { name: "comment_reply", hoverEffect: true, disabled: Boolean(!input.length) }) }) }), _jsx("div", { className: "reply", onClick: () => {
                                            setEditMode(false);
                                            setShowInput(false);
                                            setInput('');
                                        }, children: _jsx(Tooltip, { title: "Cancel", children: _jsx(Icon, { name: "close", color: "var(--ff-delete-button-attachment)", hoverEffect: true }) }) })] })] })) }), expand && comment.comments?.length > 0 && (_jsx("div", { className: `child-comments ${depth === 0 ? 'first-level-child' : ''} ${depth === 1 ? 'second-level-child' : ''}`, children: comment.comments.map((childComment) => (_jsx("div", { className: `child-comments child-comments-${depth + 1}`, children: _jsx(ChildComment, { handleInsertNode: handleInsertNode, handleEditNode: handleEditNode, handleDeleteNode: handleDeleteNode, comment: childComment, depth: depth + 1, isDisable: isDisable, userDetails: userDetails, isEditDeleteActionAllowed: comment.createdBy === createdByID, createdByID: createdByID, isVewMode: isVewMode }) }, childComment.id))) }))] }) }));
};
export default ChildComment;
//# sourceMappingURL=ChildComment.js.map