import { useRef, useState } from 'react';
import { action } from '@storybook/addon-actions';
import { FileDisplay, FieldValueList, useToaster, FileUploadItem, FileDisplayList } from '@pega/cosmos-react-core';
import { displayFiles } from './FileDisplay.mocks';
export default {
    title: 'Core/File/Display',
    component: FileDisplay,
    args: {
        withValue: true,
        withPreview: true,
        withDownload: true
    },
    argTypes: {
        withValue: { control: { type: 'boolean' } },
        withPreview: { control: { type: 'boolean' } },
        withDownload: { control: { type: 'boolean' } }
    }
};
export const FileDisplayTypes = (args) => {
    const { push } = useToaster();
    const handlePreview = args.withPreview
        ? (id) => push({ content: `Previewed ${id}` })
        : undefined;
    const handleDownload = args.withDownload
        ? (id) => push({ content: `Downloaded ${id}` })
        : undefined;
    const imageSrc = 'https://www.pega.com/sites/default/files/styles/480/public/media/images/2021-02/pwi-2021-prevcard.jpg';
    const fields = [
        {
            id: '1',
            name: 'Image file with thumbnail',
            value: (<FileDisplay id='item-1' displayText={args.withDisplayText ? 'image.jpg' : undefined} value={args.withValue ? 'https://pbs.twimg.com/media/ENNN5PAXkAE-hag.jpg' : undefined} thumbnail={imageSrc} onPreview={handlePreview} onDownload={handleDownload}/>)
        },
        {
            id: '2',
            name: 'Video file',
            value: (<FileDisplay id='item-2' displayText={args.withDisplayText ? 'video.avi' : undefined} value={args.withValue ? 'https://pega.com/media/some-video.avi' : undefined} onPreview={handlePreview} onDownload={handleDownload}/>)
        },
        {
            id: '3',
            name: 'Audio file',
            value: (<FileDisplay id='item-3' displayText={args.withDisplayText ? 'recording.mp3' : undefined} value={args.withValue ? 'https://pega.com/media/sprint-review-recording.mp3' : undefined} onPreview={handlePreview} onDownload={handleDownload}/>)
        },
        {
            id: '4',
            name: 'Document file',
            value: (<FileDisplay id='item-4' displayText={args.withDisplayText ? 'document.doc' : undefined} value={args.withValue ? 'https://pega.com/media/document.doc' : undefined} onPreview={handlePreview} onDownload={handleDownload}/>)
        },
        {
            id: '5',
            name: 'PDF file',
            value: (<FileDisplay id='item-5' displayText={args.withDisplayText ? 'invoice.pdf' : undefined} value={args.withValue ? 'https://pega.com/media/invoice.pdf' : undefined} onPreview={handlePreview} onDownload={handleDownload}/>)
        },
        {
            id: '6',
            name: 'Presentation file',
            value: (<FileDisplay id='item-6' displayText={args.withDisplayText ? 'review.pps' : undefined} value={args.withValue ? 'https://pega.com/media/review.pps' : undefined} onPreview={handlePreview} onDownload={handleDownload}/>)
        },
        {
            id: '7',
            name: 'Spreadsheet file',
            value: (<FileDisplay id='item-7' displayText={args.withDisplayText ? 'welfare.xlsx' : undefined} value={args.withValue ? 'https://pega.com/media/welfare.xlsx' : undefined} onPreview={handlePreview} onDownload={handleDownload}/>)
        },
        {
            id: '8',
            name: 'Email',
            value: (<FileDisplay id='item-8' displayText={args.withDisplayText ? 'message.eml' : undefined} value={args.withValue ? 'https://pega.com/media/message.eml' : undefined} onPreview={handlePreview} onDownload={handleDownload}/>)
        },
        {
            id: '9',
            name: 'Database',
            value: (<FileDisplay id='item-9' displayText={args.withDisplayText ? 'data.odb' : undefined} value={args.withValue ? 'https://pega.com/media/data.odb' : undefined} onPreview={handlePreview} onDownload={handleDownload}/>)
        },
        {
            id: '10',
            name: 'Zip file',
            value: (<FileDisplay id='item-10' displayText={args.withDisplayText ? 'compress.zip' : undefined} value={args.withValue ? 'https://pega.com/media/compress.zip' : undefined} onPreview={handlePreview} onDownload={handleDownload}/>)
        },
        {
            id: '11',
            name: 'Unknown file type',
            value: (<FileDisplay id='item-11' displayText={args.withDisplayText ? 'foo.xyz' : undefined} value={args.withValue ? 'https://pega.com/media/foo.xyz' : undefined} onPreview={handlePreview} onDownload={handleDownload}/>)
        },
        {
            id: '12',
            name: 'Image file',
            value: (<FileDisplay id='item-12' displayText={args.withDisplayText ? 'image.jpg' : undefined} value={args.withValue ? 'https://pbs.twimg.com/media/ENNN5PAXkAE-hag.jpg' : undefined} onPreview={handlePreview} onDownload={handleDownload}/>)
        }
    ];
    return <FieldValueList fields={fields}/>;
};
FileDisplayTypes.args = {
    withDisplayText: true
};
FileDisplayTypes.argTypes = {
    withDisplayText: { control: { type: 'boolean' } }
};
export const FileDisplayDemo = (args) => {
    const { push } = useToaster();
    const handlePreview = args.withPreview
        ? (id) => push({ content: `Previewed ${id}` })
        : undefined;
    const handleDownload = args.withDownload
        ? (id) => push({ content: `Downloaded ${id}` })
        : undefined;
    const imageSrc = args.withPreview
        ? 'https://www.pega.com/sites/default/files/styles/480/public/media/images/2021-02/pwi-2021-prevcard.jpg'
        : 'https://pega.com/media/compress.zip';
    return (<FileDisplay id='item-1' variant={args.variant} displayText={args.displayText} value={args.withValue ? imageSrc : undefined} onPreview={handlePreview} onDownload={handleDownload} compact={args.compact} previewFromActions={args.previewFromActions}/>);
};
FileDisplayDemo.args = {
    variant: 'file',
    displayText: 'Pega World iNspire',
    compact: false,
    previewFromActions: false
};
FileDisplayDemo.argTypes = {
    variant: { options: ['file', 'text', 'link'], control: { type: 'radio' } },
    displayText: { control: { type: 'text' } },
    compact: { control: { type: 'boolean' } },
    previewFromActions: { control: { type: 'boolean' } }
};
export const FileDisplayListDemo = (args) => {
    const [loading, setLoading] = useState(false);
    const timeout = useRef();
    const items = args.items ?? displayFiles;
    const delayedFiles = !loading ? items : undefined;
    const handleDownloadAll = () => action(`${items.length} files Downloaded`);
    return (<FileDisplayList variant={args.variant} items={args.compact ? delayedFiles : items} compact={args.compact} count={args.compact ? items.length : undefined} heading={args.compact ? args.heading ?? 'Files' : undefined} onDownloadAll={args.enableDownloadAll ? handleDownloadAll : undefined} onDialogOpen={() => {
            setLoading(true);
            timeout.current = setTimeout(() => {
                setLoading(false);
                timeout.current = undefined;
            }, 2000);
        }} onDialogClose={() => {
            clearTimeout(timeout.current);
            timeout.current = undefined;
            setLoading(false);
        }} progress={args.compact && loading}/>);
};
FileDisplayListDemo.parameters = {
    controls: { exclude: ['withPreview', 'withDownload', 'withValue'] }
};
FileDisplayListDemo.args = {
    variant: 'file',
    compact: false,
    enableDownloadAll: true
};
FileDisplayListDemo.argTypes = {
    variant: { options: ['file', 'text', 'link'], control: { type: 'radio' } },
    compact: { control: { type: 'boolean' } },
    enableDownloadAll: { control: { type: 'boolean' } },
    withValue: { table: { disable: true } },
    withPreview: { table: { disable: true } },
    withDownload: { table: { disable: true } }
};
export const FileUploadItemDemo = (args) => {
    const { push } = useToaster();
    const handlePreview = args.withPreview
        ? (name) => push({ content: `Previewed ${name}` })
        : undefined;
    const handleDownload = args.withDownload
        ? (name) => push({ content: `Downloaded ${name}` })
        : undefined;
    const imageSrc = 'https://www.pega.com/sites/default/files/styles/480/public/media/images/2021-02/pwi-2021-prevcard.jpg';
    return (<FileUploadItem name={args.name} meta={args.meta} error={args.error} progress={args.progress} thumbnail={imageSrc} onPreview={handlePreview} onDownload={handleDownload}/>);
};
FileUploadItemDemo.args = {
    name: 'Pega World iNspire',
    meta: 'Some additional information',
    error: false,
    progress: 100
};
FileUploadItemDemo.argTypes = {
    withValue: { table: { disable: true } },
    name: { control: { type: 'text' } },
    meta: { control: { type: 'text' } },
    error: { control: { type: 'boolean' } },
    progress: { control: { type: 'number' } }
};
//# sourceMappingURL=FileDisplay.stories.jsx.map