import { useCallback, useEffect, useImperativeHandle, useMemo, useRef, useState } from 'react';
import { createUID, Form, ComboBox, DateInput, FileInput, FileList, Flex, menuHelpers, DateTimeDisplay, FieldValueList } from '@pega/cosmos-react-core';
import { FeedRichText, FeedRichTextViewer } from '@pega/cosmos-react-social';
import { getActivityTypeOptions } from './Feed.mocks';
export const LogActivityPost = ({ handle, data }) => {
    const [activityType, setActivityType] = useState(data?.activityType?.id ?? '');
    const [activityTypeError, setActivityTypeError] = useState('');
    const [followUpDate, setFollowUpDate] = useState(data?.followUpDate ?? '');
    const [followUpDateError, setFollowUpDateError] = useState('');
    const [files, setFiles] = useState(data?.files ?? []);
    const [filesError, setFilesError] = useState('');
    const rteRef = useRef(null);
    const [activityTypes, setActivityTypes] = useState(getActivityTypeOptions(data?.activityType?.id));
    const selectedType = useMemo(() => menuHelpers.getSelected(activityTypes)[0], [activityTypes]);
    const selectActivityType = useCallback((id) => {
        setActivityTypes(curr => menuHelpers.selectItem(curr, id, 'single-select'));
        setActivityType(id);
    }, []);
    const onFilesAdded = async (addedFiles) => {
        const fileItems = addedFiles.map(file => {
            const fileItem = {
                id: createUID(),
                name: file.name,
                format: file.name.split('.').pop(),
                onDelete: () => {
                    setFiles(current => {
                        return current.filter(x => x.name !== file.name);
                    });
                },
                onCancel: () => {
                    setFiles(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;
        });
        setFiles(current => [...current, ...fileItems]);
    };
    useImperativeHandle(handle, () => ({
        clearForm: () => {
            setActivityTypes(getActivityTypeOptions());
            setActivityType('');
            setActivityTypeError('');
            setFollowUpDate('');
            setFollowUpDateError('');
            setFiles([]);
            setFilesError('');
            rteRef.current?.clear();
        },
        getErrors: () => {
            if (activityType === '') {
                setActivityTypeError('Please select an activity type');
            }
            return [
                activityType === '' ? 'Please select an activity type' : '',
                followUpDateError,
                filesError
            ].filter(err => !!err);
        },
        getFormData: () => {
            return {
                activityType: selectedType,
                followUpDate,
                files,
                comments: rteRef.current?.getPlainText() || ''
            };
        }
    }), [activityType, activityTypeError, followUpDate, followUpDateError, files, filesError]);
    useEffect(() => {
        if (activityType) {
            setActivityTypeError('');
        }
    }, [activityType]);
    useEffect(() => {
        setFollowUpDateError('');
        if (followUpDate) {
            const date = new Date(followUpDate);
            const today = new Date();
            if (date <= today) {
                setFollowUpDateError('Follow-up date must be in the future');
            }
        }
    }, [followUpDate]);
    useEffect(() => {
        if (files.some(file => !!file.error)) {
            setFilesError('File size cannot exceed 100MB');
        }
        else {
            setFilesError('');
        }
    }, [files]);
    return (<Form>
      <Flex container={{ direction: 'column', gap: 1 }}>
        <ComboBox label='Activity type' info={activityTypeError} status={activityTypeError ? 'error' : undefined} required selected={selectedType
            ? {
                items: {
                    id: selectedType.id,
                    text: selectedType.primary
                }
            }
            : undefined} menu={{
            items: activityTypes,
            onItemClick: selectActivityType
        }} onBlur={value => {
            if (!value)
                setActivityTypeError('Please select an activity type');
        }}/>
        <DateInput label='Follow-up date' value={followUpDate} info={followUpDateError} status={followUpDateError ? 'error' : undefined} onChange={({ valueAsISOString, state }) => {
            if (state !== 'incomplete' && state !== 'invalid') {
                setFollowUpDate(valueAsISOString || '');
            }
        }}/>
        <FileInput label='Upload files' multiple onFilesAdded={onFilesAdded} files={files} info={filesError} status={filesError ? 'error' : undefined}/>
        <FeedRichText label='Comments' ref={rteRef} defaultValue={data?.comments}/>
      </Flex>
    </Form>);
};
export const LogActivityPostContent = ({ activityType, followUpDate, files = [], comments = '' }) => {
    return (<Flex container={{ direction: 'column', gap: 1 }}>
      <FieldValueList fields={[
            { name: 'Activity type', value: activityType.primary },
            {
                name: 'Follow-up date',
                value: <DateTimeDisplay value={followUpDate} variant='date' format='long'/>
            }
        ]}/>

      {files.length > 0 && (<FieldValueList variant='stacked' fields={[{ name: 'Files', value: <FileList items={files} type='item'/> }]}/>)}

      {!!comments && (<FieldValueList variant='stacked' fields={[
                {
                    name: 'Comments',
                    value: <FeedRichTextViewer content={comments}/>
                }
            ]}/>)}
    </Flex>);
};
//# sourceMappingURL=LogActivityPostType.mocks.jsx.map