import { useContext, useEffect, useMemo, useRef, useState } from 'react';
import { action } from '@storybook/addon-actions';
import { useUID, createUID, Banner, menuHelpers } from '@pega/cosmos-react-core';
import { FeedNewPost } from '@pega/cosmos-react-social';
import { loadingTimeoutMS } from '../../core/Progress/Progress.mocks';
import { generateAvailableRecipients, FeedDemoContext, uploadAttachment } from './Feed.mocks';
import { LogActivityPost } from './LogActivityPostType.mocks';
export const FeedNewPostDemo = ({ onSubmit = () => { }, onLogActivitySubmit = () => { } }) => {
    const key = useUID();
    const { showPostTypes, visibilityMode, simulateServerLatency, simulateServerError } = useContext(FeedDemoContext);
    const [postType, setPostType] = useState({ id: 'default', label: 'Message' });
    const [numRecipientOptions, setNumRecipientOptions] = useState(10);
    const [availableRecipients, setAvailableRecipients] = useState([]);
    const [selectedRecipients, setSelectedRecipients] = useState([]);
    const [activeSearch, setActiveSearch] = useState(false);
    const [loading, setLoading] = useState(false);
    const [errorMessages, setErrorMessages] = useState([]);
    const logActivityHandle = useRef(null);
    const logActivityTimeout = useRef(0);
    const [attachments, setAttachments] = useState([]);
    const defaultTimeout = useRef(0);
    useEffect(() => {
        return () => {
            window.localStorage.removeItem('attachments');
        };
    }, []);
    const onFilesAdded = async (addedFiles) => {
        const fileItems = addedFiles.map(file => {
            const fileItem = {
                id: createUID(),
                name: file.name,
                format: file.name.split('.').pop(),
                onPreview: () => action('on preview'),
                onDelete: () => {
                    setAttachments(current => {
                        return current.filter(x => x.name !== file.name);
                    });
                },
                onCancel: () => {
                    setAttachments(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';
            }
            uploadAttachment(fileItem.id, file, (id, progress) => {
                setAttachments(prev => {
                    return prev.map(item => {
                        if (item.id === id) {
                            return { ...item, progress };
                        }
                        return item;
                    });
                });
            });
            return fileItem;
        });
        setAttachments(current => [...current, ...fileItems]);
    };
    const customPostConfig = useMemo(() => {
        if (postType.id === 'log') {
            return {
                content: <LogActivityPost handle={logActivityHandle}/>,
                onSubmit: postEvent => {
                    setErrorMessages([]);
                    const errors = logActivityHandle.current?.getErrors();
                    if (errors && errors.length > 0) {
                        setErrorMessages(errors);
                    }
                    else if (postEvent.visibility === 'private' &&
                        (!postEvent.recipients || postEvent.recipients.length === 0)) {
                        setErrorMessages(['Please select at least one recipient.']);
                    }
                    else {
                        setLoading(true);
                        const formData = logActivityHandle.current?.getFormData();
                        logActivityTimeout.current = window.setTimeout(() => {
                            if (!formData || simulateServerError) {
                                setErrorMessages(['This is a mock server error!']);
                            }
                            else {
                                onLogActivitySubmit({
                                    ...postEvent,
                                    ...formData
                                });
                                logActivityHandle.current?.clearForm();
                                setSelectedRecipients([]);
                            }
                            setLoading(false);
                        }, simulateServerLatency ? loadingTimeoutMS : 0);
                    }
                },
                onCancel: () => {
                    if (loading) {
                        clearTimeout(logActivityTimeout.current);
                        setLoading(false);
                    }
                    else {
                        setErrorMessages([]);
                        const formData = logActivityHandle.current?.getFormData();
                        if (!formData?.activityType &&
                            !formData?.followUpDate &&
                            !formData?.files?.length &&
                            !formData?.comments) {
                            setPostType({ id: 'default', label: 'Message' });
                        }
                        else {
                            logActivityHandle.current?.clearForm();
                        }
                    }
                }
            };
        }
    }, [loading, postType, simulateServerLatency, simulateServerError]);
    const defaultPostConfig = useMemo(() => {
        if (postType.id === 'default') {
            return {
                attachments,
                onFilesAdded,
                onSubmit: postEvent => {
                    setErrorMessages([]);
                    if (postEvent.visibility === 'private' &&
                        (!postEvent.recipients || postEvent.recipients.length === 0)) {
                        setErrorMessages(['Please select at least one recipient.']);
                    }
                    else {
                        setLoading(true);
                        defaultTimeout.current = window.setTimeout(() => {
                            if (simulateServerError) {
                                setErrorMessages(['This is a mock server error!']);
                            }
                            else {
                                onSubmit(postEvent);
                                setAttachments([]);
                                setSelectedRecipients([]);
                                postEvent.clear();
                            }
                            setLoading(false);
                        }, simulateServerLatency ? loadingTimeoutMS : 0);
                    }
                }
            };
        }
    }, [attachments, loading, postType, simulateServerLatency]);
    useEffect(() => {
        setAvailableRecipients(generateAvailableRecipients(numRecipientOptions));
    }, [numRecipientOptions]);
    useEffect(() => {
        setSelectedRecipients([]);
    }, [postType]);
    return (<FeedNewPost id={key} banners={errorMessages.length > 0 ? <Banner variant='urgent' messages={errorMessages}/> : undefined} progress={loading} defaultConfig={defaultPostConfig} customConfig={customPostConfig} visibilityMode={visibilityMode} recipientInput={{
            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);
                }
            }
        }} postType={postType} postTypes={showPostTypes
            ? [
                { id: 'default', label: 'Message' },
                { id: 'log', label: 'Log activity' }
            ]
            : undefined} onPostTypeChange={type => {
            setErrorMessages([]);
            setPostType(type);
        }}/>);
};
//# sourceMappingURL=FeedNewPost.mocks.jsx.map