import { useState, useCallback, useContext, useRef } from 'react';
import { Avatar, Banner, useElement, useUID } from '@pega/cosmos-react-core';
import { AutopilotGlimpse, FeedReply } from '@pega/cosmos-react-social';
import { Glimpse } from '@pega/cosmos-react-work';
import { loadingTimeoutMS } from '../../core/Progress/Progress.mocks';
import { FeedDemoContext, FeedPostDemoContext, feedUserGlimpseDetails } from './Feed.mocks';
export const FeedReplyDemo = ({ fullname, username, content, attachments, postTimestamp = new Date(2022, 0, 1), userStatus }) => {
    const key = useUID();
    const { simulateServerLatency, simulateServerError } = useContext(FeedDemoContext);
    const { setReplyInputShown } = useContext(FeedPostDemoContext);
    const [likes, setLikes] = useState([]);
    const [liked, setLiked] = useState(false);
    const [likeCount, setLikeCount] = useState(0);
    const [replyContent, setReplyContent] = useState(content);
    const [edited, setEdited] = useState(false);
    const [editTimestamp, setEditTimestamp] = useState(new Date());
    const [glimpseContent, setGlimpseContent] = useState();
    const [glimpseTarget, setGlimpseTarget] = useElement(null);
    const [additionalLikeAdded, setAdditionalLikeAdded] = useState(false);
    const [editMode, setEditMode] = useState(false);
    const [editLoading, setEditLoading] = useState(false);
    const [editErrorMessages, setEditErrorMessages] = useState([]);
    const editTimeout = useRef(0);
    const getInitialLikes = () => {
        if (likes.length)
            return;
        setLikes([]);
    };
    const [likesLoading, setLikesLoading] = useState(false);
    const generateNewLike = useCallback(() => {
        if (!likesLoading) {
            setLikesLoading(true);
            setTimeout(() => {
                setLikesLoading(false);
                setLikes(oldLikes => [
                    ...oldLikes,
                    {
                        primary: 'Generated Like',
                        secondary: ['This like was added after the onLoadMore callback triggered'],
                        visual: <Avatar size='m' name='Generated Like'/>,
                        id: 'generatedLike'
                    }
                ]);
                setAdditionalLikeAdded(true);
            }, 1000);
        }
    }, [likesLoading]);
    const onUserClick = ({ username: glimpseUsername }, clickEvent) => {
        if (clickEvent) {
            setGlimpseTarget(clickEvent.target);
            if (glimpseUsername === 'autopilot') {
                setGlimpseContent(<AutopilotGlimpse target={clickEvent.target} onDismiss={() => {
                        setGlimpseTarget(null);
                    }} placement='right'/>);
            }
            else {
                const userDetails = feedUserGlimpseDetails.find(x => x.username === glimpseUsername);
                if (userDetails) {
                    setGlimpseContent(<Glimpse {...userDetails} target={clickEvent.target} onDismiss={() => {
                            setGlimpseTarget(null);
                        }} placement='right'/>);
                }
            }
        }
    };
    return (<>
      <FeedReply id={key} key={key} postTimestamp={postTimestamp} content={replyContent} attachments={attachments} username={username} fullname={fullname} liked={liked} userStatus={userStatus} likes={likes} likeCount={likeCount >= 10 ? likeCount + 1 : likeCount} maxContentHeight={40} menuItems={[{ primary: 'Custom action', id: 'custom', onClick: () => { } }]} onEdit={typeof content === 'string' && !content.includes('<pega-autopilot/>')
            ? () => setEditMode(true)
            : undefined} editConfig={editMode
            ? {
                progress: editLoading,
                banners: editErrorMessages.length > 0 ? (<Banner variant='urgent' messages={editErrorMessages}/>) : undefined,
                onEditSubmit: ({ value }) => {
                    setEditErrorMessages([]);
                    setEditLoading(true);
                    editTimeout.current = window.setTimeout(() => {
                        if (simulateServerError) {
                            setEditErrorMessages(['This is a mock server error!']);
                        }
                        else {
                            setReplyContent(value);
                            setEdited(true);
                            setEditTimestamp(new Date());
                            setEditMode(false);
                        }
                        setEditLoading(false);
                    }, simulateServerLatency ? loadingTimeoutMS : 0);
                },
                onEditCancel: () => {
                    if (editLoading) {
                        clearTimeout(editTimeout.current);
                        setEditLoading(false);
                    }
                    else {
                        setEditErrorMessages([]);
                        setEditMode(false);
                    }
                }
            }
            : undefined} edited={edited} editTimestamp={editTimestamp} onCommentClick={() => setReplyInputShown(true)} onLikeClick={({ user }) => {
            const userLikedIndex = likes.findIndex(x => x.id === user.id);
            if (userLikedIndex !== -1) {
                setLikes(oldLikes => {
                    const oldLikesArr = [...oldLikes];
                    oldLikesArr.splice(userLikedIndex, 1);
                    return oldLikesArr;
                });
                setLikeCount(curr => curr - 1);
            }
            else {
                setLikes(oldLikes => [user, ...oldLikes]);
                setLikeCount(curr => curr + 1);
            }
            setLiked(curr => !curr);
        }} onLikeCountInteraction={getInitialLikes} onLoadMoreLikes={!additionalLikeAdded ? generateNewLike : undefined} likesLoading={likesLoading} onUserClick={onUserClick}/>
      {glimpseTarget && glimpseContent}
    </>);
};
//# sourceMappingURL=FeedReply.mocks.jsx.map