import { useState, useMemo, useCallback, useRef, useContext } from 'react';
import { action } from '@storybook/addon-actions';
import { FileInput, useAfterInitialEffect, Flex, Link, createUID, hasProp } from '@pega/cosmos-react-core';
import { FileServiceContext } from './FileService.mock';
export default {
    title: 'Core/File/Input',
    component: FileInput
};
export const FileInputDemo = (args) => {
    const { files, setFiles, attachFile, deleteFile, cancelFile } = useContext(FileServiceContext);
    const errCounts = useRef({ invalidType: 0, invalidSize: 0 });
    const [hasError, setHasError] = useState(false);
    const [loading, setLoading] = useState(false);
    const [uploadedFileCount, setUploadedFileCount] = useState(0);
    const [filesBeforeCancel, setFilesBeforeCancel] = useState([]);
    const sizeLimit = args.sizeLimit || 100;
    const isMockFileItems = (fileItems) => {
        return fileItems.every(item => hasProp(item, 'format'));
    };
    const onFilesAdded = useCallback((addedFiles) => {
        errCounts.current = { invalidType: 0, invalidSize: 0 };
        const newFiles = addedFiles.filter(f => {
            let isValidSize = true;
            if (f.size / 1000000 > sizeLimit) {
                errCounts.current.invalidSize += 1;
                isValidSize = false;
            }
            return isValidSize;
        });
        setHasError(newFiles.length < addedFiles.length);
        newFiles.forEach((File) => {
            const id = createUID();
            attachFile({
                id,
                thumbnail: File.type.startsWith('image') ? URL.createObjectURL(File) : undefined,
                name: File.name,
                format: File.name.split('.').pop(),
                category: 'category-1',
                File
            });
        });
    }, [attachFile]);
    useAfterInitialEffect(() => {
        if (files.length === 0)
            setHasError(false);
    }, [files.length]);
    const info = useMemo(() => {
        return hasError
            ? errCounts.current.invalidSize > 0 && (<div>{`File size must be less than ${sizeLimit}MB`}</div>)
            : null;
    }, [hasError]);
    const items = isMockFileItems(files)
        ? files.map(({ id, name, format, progress, thumbnail }) => {
            const isLoaded = progress === 100;
            return {
                id,
                name,
                format,
                progress: progress ?? 0,
                thumbnail: isLoaded ? thumbnail : undefined,
                onEdit: isLoaded ? action('edit') : undefined,
                onCancel: () => {
                    cancelFile(id);
                },
                onPreview: isLoaded ? action('on preview') : undefined,
                onDownload: isLoaded ? action('on download') : undefined,
                onDelete: isLoaded
                    ? () => {
                        setTimeout(() => {
                            deleteFile(id);
                        }, 1000);
                    }
                    : undefined
            };
        })
        : [];
    const handleDownloadAll = () => action(`${items.length} files downloaded`);
    return (<FileInput label={args.label} labelHidden={args.labelHidden} multiple={args.multiple} status={hasError ? 'error' : args.status} info={info || args.info} required={args.required} disabled={args.disabled} readOnly={args.readOnly} onFilesAdded={onFilesAdded} onDownloadAll={args.enableDownloadAll ? handleDownloadAll : undefined} files={args.files || items} compact={args.compact} previewFromActions={args.previewFromActions} count={args.compact && args.multiple ? uploadedFileCount : undefined} modal={args.compact && args.multiple
            ? {
                onBeforeOpen: () => {
                    if (items.length > 0) {
                        setLoading(true);
                        setFilesBeforeCancel(files);
                        setTimeout(() => {
                            setLoading(false);
                        }, 1000);
                    }
                    else {
                        setFilesBeforeCancel(files);
                    }
                },
                onCancel: ({ close }) => {
                    if (filesBeforeCancel)
                        setFiles(filesBeforeCancel);
                    close();
                },
                onSubmit: ({ close }) => {
                    setLoading(true);
                    setTimeout(() => {
                        setLoading(false);
                        setUploadedFileCount(items.length);
                        close();
                    }, 1000);
                },
                loading
            }
            : undefined} additionalInfo={args.showAdditionalInfo
            ? {
                content: (<Flex container={{ direction: 'column', alignItems: 'start', gap: 2 }}>
                  <p>
                    Lorem ipsum dolor sit amet, consectetur it, sed do tempor incididunt ut labore
                    magna aliqua. Nibh praesent tristique magna sit amet. Nec tincidunt praesent
                    semper feugiat nibh sed pulvinar proin gravida.
                  </p>
                  <p>
                    Pharetra pharetra massa massa ultricies mi quis hendrerit dolor. Est velit
                    egestas dui id ornare arcu odio ut. Varius sit amet mattis vulputate enim nulla
                    aliquet porttitor lacus.
                  </p>
                  <Link href='/' target='_blank'>
                    Neque vitae
                  </Link>
                </Flex>)
            }
            : undefined} accept={args.accept?.split(',')}/>);
};
FileInputDemo.args = {
    multiple: true,
    sizeLimit: 100,
    label: 'File input label',
    labelHidden: false,
    info: '',
    status: undefined,
    required: false,
    disabled: false,
    readOnly: false,
    showAdditionalInfo: false,
    accept: 'application/pdf, .jpeg, image/png, .doc, .docx',
    compact: false,
    previewFromActions: false,
    enableDownloadAll: true
};
FileInputDemo.argTypes = {
    multiple: { control: { type: 'boolean' } },
    sizeLimit: { control: { type: 'number' } },
    label: { control: { type: 'text' } },
    labelHidden: { control: { type: 'boolean' } },
    info: { control: { type: 'text' } },
    status: {
        options: [undefined, 'success', 'warning', 'error', 'pending'],
        control: { type: 'select' }
    },
    required: { control: { type: 'boolean' } },
    disabled: { control: { type: 'boolean' } },
    readOnly: { control: { type: 'boolean' } },
    showAdditionalInfo: { control: { type: 'boolean' } },
    accept: { control: { type: 'text' } },
    compact: { control: { type: 'boolean' } },
    previewFromActions: { control: { type: 'boolean' } },
    enableDownloadAll: { control: { type: 'boolean' } }
};
//# sourceMappingURL=FileInput.stories.jsx.map