import { useCallback, useContext, useEffect, useMemo, useRef, useState } from 'react';
import { action } from '@storybook/addon-actions';
import { Avatar, Banner, createUID, menuHelpers, useElement, useUID } from '@pega/cosmos-react-core';
import { AutopilotConfig, AutopilotGlimpse, FeedPost } from '@pega/cosmos-react-social';
import { Glimpse } from '@pega/cosmos-react-work';
import { loadingTimeoutMS } from '../../core/Progress/Progress.mocks';
import { FeedReplyDemo } from './FeedReply.mocks';
import { FeedDemoContext, FeedPostDemoContext, feedUserGlimpseDetails, generateAvailableRecipients } from './Feed.mocks';
import { LogActivityPost, LogActivityPostContent } from './LogActivityPostType.mocks';
export const FeedPostDemo = ({ id, fullname, username, icon, content, visibility, postType, recipients, attachments: postAttachments, replies, postTimestamp = new Date(2022, 0, 1), userStatus, likes: userLikes, onDelete = () => { } }) => {
    const defaultReplies = Array.from(Array(12).keys(), index => {
        return (<FeedReplyDemo key={`reply-story-${index + 1}`} fullname={fullname} username={username} content={`This is reply number ${index + 1}!`}/>);
    });
    const key = useUID();
    const { simulateServerLatency, simulateServerError, posts, setPosts } = useContext(FeedDemoContext);
    const [postContent, setPostContent] = useState(content);
    const [likes, setLikes] = useState(userLikes ?? []);
    const [liked, setLiked] = useState(false);
    const [edited, setEdited] = useState(false);
    const [editTimestamp, setEditTimestamp] = useState(new Date());
    const [numRecipientOptions, setNumRecipientOptions] = useState(10);
    const [availableRecipients, setAvailableRecipients] = useState([]);
    const [selectedRecipients, setSelectedRecipients] = useState([]);
    const [activeSearch, setActiveSearch] = useState(false);
    const [glimpseContent, setGlimpseContent] = useState();
    const [glimpseTarget, setGlimpseTarget] = useElement(null);
    const [extraReplies, setExtraReplies] = useState([]);
    const [replyInputShown, setReplyInputShown] = useState(false);
    const [replyAttachments, setReplyAttachments] = useState([]);
    const [replyLoading, setReplyLoading] = useState(false);
    const [replyErrorMessages, setReplyErrorMessages] = useState([]);
    const replyTimeout = useRef(0);
    const [replyCount, setReplyCount] = useState(replies ? replies.length : defaultReplies.length);
    const [repliesLoading, setRepliesLoading] = useState(false);
    const [repliesShown, setRepliesShown] = useState(3);
    const [additionalLikeAdded, setAdditionalLikeAdded] = useState(false);
    const [allRecipientsVisible, setAllRecipientsVisible] = useState(!!recipients);
    const [recipientsList, setRecipientsList] = useState(recipients ||
        availableRecipients.slice(0, !allRecipientsVisible ? 10 : availableRecipients.length));
    const [editMode, setEditMode] = useState();
    const [editLoading, setEditLoading] = useState(false);
    const [editErrorMessages, setEditErrorMessages] = useState([]);
    const editTimeout = useRef(0);
    const logActivityHandle = useRef(null);
    const updatePost = (updatedContent) => {
        const oldPosts = [...posts];
        const postIndex = oldPosts.findIndex(p => p.id === id);
        if (postIndex > -1) {
            const postToUpdate = { ...oldPosts[postIndex] };
            postToUpdate.content = updatedContent;
            oldPosts[postIndex] = postToUpdate;
            setPosts(oldPosts);
        }
    };
    const onShowMoreReplies = () => {
        setRepliesLoading(true);
        setTimeout(() => {
            setRepliesShown(curr => {
                if (curr + 3 <= defaultReplies.length)
                    return curr + 3;
                return defaultReplies.length;
            });
            setRepliesLoading(false);
        }, 1000);
    };
    const onShowLessReplies = () => {
        setRepliesLoading(true);
        setTimeout(() => {
            setRepliesShown(3);
            setRepliesLoading(false);
        }, 1000);
    };
    const onFilesAdded = (files) => {
        const fileItems = files.map(file => {
            const fileItem = {
                id: createUID(),
                name: file.name,
                format: file.name.split('.').pop(),
                onPreview: () => action('on preview'),
                onDelete: () => {
                    setReplyAttachments(current => {
                        return current.filter(x => x.name !== file.name);
                    });
                }
            };
            if (file.type.includes('image')) {
                fileItem.thumbnail = URL.createObjectURL(file);
            }
            if (file.size / 1000000 > 100) {
                fileItem.error = 'File size cannot exceed 100MB';
            }
            return fileItem;
        });
        setReplyAttachments(current => [...current, ...fileItems]);
    };
    const getInitialLikes = () => {
        if (likes.length)
            return;
        setLikes(userLikes || []);
    };
    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 loaded after the onLoadMoreLikes callback was triggered'],
                        visual: <Avatar size='m' name='Generated Like'/>,
                        id: 'generatedLike'
                    }
                ]);
                setAdditionalLikeAdded(true);
            }, 1000);
        }
    }, [likesLoading]);
    const [recipientsLoading, setRecipientsLoading] = useState(false);
    const getAllRecipients = () => {
        if (!recipientsLoading) {
            setRecipientsLoading(true);
            setTimeout(() => {
                setRecipientsLoading(false);
                setRecipientsList(oldRecipients => [
                    ...oldRecipients,
                    {
                        primary: 'Additional Recipient',
                        secondary: [
                            'This recipient was loaded after the onLoadMoreRecipients callback was triggered'
                        ],
                        visual: <Avatar size='m' name='Additional Recipient'/>,
                        value: 'additionalRecipient',
                        id: 'additionalRecipient'
                    }
                ]);
                setAllRecipientsVisible(true);
            }, 1000);
        }
    };
    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'/>);
                }
            }
        }
    };
    const onEdit = useMemo(() => {
        if ((!postType || postType.id === 'default') &&
            typeof postContent === 'string' &&
            !postContent.includes('<pega-autopilot/>')) {
            return () => setEditMode('default');
        }
        if (postType?.id === 'log') {
            const postData = posts.find(p => p.id === id)?.content;
            if (!postData?.comments || !postData.comments.includes('<pega-autopilot/>')) {
                return () => setEditMode('log');
            }
        }
    }, [postContent, postType]);
    useEffect(() => {
        setAvailableRecipients(generateAvailableRecipients(numRecipientOptions));
    }, [numRecipientOptions]);
    useEffect(() => {
        if (!editMode) {
            setSelectedRecipients([]);
        }
        else {
            setSelectedRecipients(recipientsList);
        }
    }, [editMode]);
    const recipientInput = useMemo(() => ({
        availableRecipients,
        recipients: selectedRecipients,
        onAdd: itemID => {
            const recipient = availableRecipients.find(item => item.id === itemID);
            if (recipient)
                setSelectedRecipients(cur => [...cur, recipient]);
        },
        onRemove: itemID => {
            setSelectedRecipients(cur => cur.filter(item => item.id !== itemID));
        },
        onToggle: itemID => {
            setAvailableRecipients(cur => menuHelpers.toggleSelected(cur, itemID, 'multi-select'));
        },
        onSearch: search => {
            if (search) {
                setActiveSearch(true);
                setAvailableRecipients(menuHelpers
                    .flatten(generateAvailableRecipients(1000))
                    .filter(({ primary }) => {
                    return primary.toLowerCase().includes(search.toLowerCase());
                }));
            }
            else {
                setActiveSearch(false);
                setAvailableRecipients(generateAvailableRecipients(numRecipientOptions));
            }
        },
        onMenuOpen: () => {
            if (!activeSearch)
                setNumRecipientOptions(10);
        },
        loadMore: () => {
            if (numRecipientOptions < 1000 && !activeSearch) {
                setNumRecipientOptions(prev => prev + 10);
            }
        }
    }), [activeSearch, availableRecipients, numRecipientOptions, selectedRecipients]);
    const editConfig = useMemo(() => {
        if (!editMode)
            return;
        if (!postType || postType.id === 'default') {
            return {
                progress: editLoading,
                recipientInput,
                banners: editErrorMessages.length > 0 ? (<Banner variant='urgent' messages={editErrorMessages}/>) : undefined,
                onEditSubmit: ({ value, visibility: editVisibility, recipients: editRecipients }) => {
                    setEditErrorMessages([]);
                    if (editVisibility === 'private' &&
                        (!editRecipients?.length ||
                            (editRecipients?.length === 1 && editRecipients[0].id === username))) {
                        setEditErrorMessages(['Please select at least one user, other than yourself.']);
                    }
                    else {
                        setEditLoading(true);
                        editTimeout.current = window.setTimeout(() => {
                            if (simulateServerError) {
                                setEditErrorMessages(['This is a mock server error!']);
                            }
                            else {
                                setPostContent(value);
                                setEdited(true);
                                setEditTimestamp(new Date());
                                setEditMode(undefined);
                                updatePost(value);
                                if (editVisibility === 'private' && !!editRecipients?.length) {
                                    setRecipientsList(editRecipients);
                                }
                            }
                            setEditLoading(false);
                        }, simulateServerLatency ? loadingTimeoutMS : 0);
                    }
                },
                onEditCancel: () => {
                    if (editLoading) {
                        clearTimeout(editTimeout.current);
                        setEditLoading(false);
                    }
                    else {
                        setEditErrorMessages([]);
                        setEditMode(undefined);
                    }
                }
            };
        }
        if (postType.id === 'log') {
            const postData = posts.find(p => p.id === id)?.content;
            return {
                editContent: <LogActivityPost handle={logActivityHandle} data={postData}/>,
                recipientInput,
                progress: editLoading,
                banners: editErrorMessages.length > 0 ? (<Banner variant='urgent' messages={editErrorMessages}/>) : undefined,
                onEditSubmit: ({ visibility: editVisibility, recipients: editRecipients }) => {
                    setEditErrorMessages([]);
                    const errors = logActivityHandle.current?.getErrors();
                    if (errors && errors.length > 0) {
                        setEditErrorMessages(errors);
                    }
                    else if (editVisibility === 'private' &&
                        (!editRecipients?.length ||
                            (editRecipients?.length === 1 && editRecipients[0].id === username))) {
                        setEditErrorMessages(['Please select at least one user, other than yourself.']);
                    }
                    else {
                        setEditLoading(true);
                        const formData = logActivityHandle.current?.getFormData();
                        editTimeout.current = window.setTimeout(() => {
                            if (!formData) {
                                setEditErrorMessages(['This is a mock server error!']);
                                setEditLoading(false);
                            }
                            else {
                                setPostContent(<LogActivityPostContent {...formData}/>);
                                logActivityHandle.current?.clearForm();
                                setEdited(true);
                                setEditTimestamp(new Date());
                                setEditMode(undefined);
                                updatePost(formData);
                                if (editVisibility === 'private' && !!editRecipients?.length) {
                                    setRecipientsList(editRecipients);
                                }
                            }
                            setEditLoading(false);
                        }, simulateServerLatency ? loadingTimeoutMS : 0);
                    }
                },
                onEditCancel: () => {
                    if (editLoading) {
                        clearTimeout(editTimeout.current);
                        setEditLoading(false);
                    }
                    else {
                        setEditErrorMessages([]);
                        logActivityHandle.current?.clearForm();
                        setEditMode(undefined);
                    }
                }
            };
        }
    }, [
        posts,
        editMode,
        editLoading,
        editErrorMessages,
        postType,
        recipientInput,
        simulateServerLatency,
        simulateServerError
    ]);
    return (<FeedPostDemoContext.Provider value={useMemo(() => ({ setReplyInputShown }), [setReplyInputShown])}>
      <FeedPost id={id} key={key} fullname={fullname} username={username} icon={icon} postTimestamp={postTimestamp} content={postContent} visibility={visibility} postType={postType} recipients={recipientsList} recipientsCount={allRecipientsVisible ? recipientsList.length : recipientsList.length + 1} attachments={postAttachments} liked={liked} userStatus={userStatus} likes={likes} likeCount={likes.length} maxContentHeight={80} 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;
                });
            }
            else {
                setLikes(oldLikes => [user, ...oldLikes]);
            }
            setLiked(curr => !curr);
        }} onCommentClick={() => setReplyInputShown(true)} onLikeCountInteraction={getInitialLikes} likesLoading={likesLoading} onLoadMoreLikes={!additionalLikeAdded ? generateNewLike : undefined} recipientsLoading={recipientsLoading} onLoadMoreRecipients={!allRecipientsVisible ? getAllRecipients : undefined} onUserClick={onUserClick} menuItems={[
            { primary: 'Custom action', id: 'custom', onClick: () => { } },
            { primary: 'Delete', id: 'delete', onClick: onDelete }
        ]} onEdit={onEdit} editConfig={editConfig} edited={edited} editTimestamp={editTimestamp} replies={replies
            ? [...replies, ...extraReplies]
            : [...defaultReplies.slice(-repliesShown), ...extraReplies]} replyCount={replyCount} repliesLoading={repliesLoading} onShowMoreReplies={onShowMoreReplies} onShowLessReplies={repliesShown > 3 ? onShowLessReplies : undefined} replyInput={{
            attachments: replyAttachments,
            onFilesAdded,
            progress: replyLoading,
            banners: replyErrorMessages.length > 0 ? (<Banner variant='urgent' messages={replyErrorMessages}/>) : undefined,
            onSubmit: replyEvent => {
                setReplyErrorMessages([]);
                setReplyAttachments([]);
                setReplyLoading(true);
                replyTimeout.current = window.setTimeout(() => {
                    if (simulateServerError) {
                        setReplyErrorMessages(['This is a mock server error!']);
                    }
                    else {
                        replyEvent.attachments.forEach(file => {
                            delete file.onDelete;
                            file.onPreview = () => action('on preview');
                            file.onDownload = () => action('on download');
                            file.onEdit = () => action('on edit');
                        });
                        setExtraReplies(oldReplies => [
                            ...oldReplies,
                            <FeedReplyDemo key={`replies-${oldReplies.length}`} fullname='Demo User' username='demo_user' userStatus='active' content={replyEvent.value} attachments={replyEvent.attachments} postTimestamp={new Date()}/>
                        ]);
                        setReplyCount(oldReplyCount => oldReplyCount + 1);
                        const triggersAutopilot = replyEvent.value.match(AutopilotConfig.regexPattern);
                        if (triggersAutopilot &&
                            triggersAutopilot.length &&
                            triggersAutopilot.length > 0) {
                            setExtraReplies(oldReplies => [
                                ...oldReplies,
                                <FeedReplyDemo key={`autopilot-${createUID()}`} fullname='Autopilot' username='autopilot' content='This is just an automatic reply. In order to truly experience the power of the Pega GenAI™ virtual assistant, make sure to interact with Autopilot in a production environment!' postTimestamp={new Date()}/>
                            ]);
                            setReplyCount(oldReplyCount => oldReplyCount + 1);
                        }
                        replyEvent.clear();
                        setReplyInputShown(false);
                    }
                    setReplyLoading(false);
                }, simulateServerLatency ? loadingTimeoutMS : 0);
            }
        }} replyInputShown={replyInputShown}/>
      {glimpseTarget && glimpseContent}
    </FeedPostDemoContext.Provider>);
};
//# sourceMappingURL=FeedPost.mocks.jsx.map