import { useRef, useState } from 'react';
import { Button, DateTimeDisplay, Lightbox } from '@pega/cosmos-react-core';
import { mockData, mockBadResources } from './Lightbox.mocks';
export default {
    title: 'Core/Lightbox',
    component: Lightbox,
    parameters: {
        layout: 'centered'
    }
};
export const LightboxDemo = (args) => {
    const demoButtonRef = useRef(null);
    const [open, setOpen] = useState(false);
    const [items, setItems] = useState();
    const onClick = () => {
        setItems((args.error ? mockBadResources : mockData.slice(0, args.limit)).map(item => {
            return {
                ...item,
                metadata: [
                    item.format,
                    'John smith',
                    <DateTimeDisplay value={new Date()} variant='date'/>
                ]
            };
        }));
    };
    const onItemDownload = async (id) => {
        const currentItem = items?.find(item => item.id === id);
        if (!currentItem)
            return;
        if (currentItem.src) {
            const objectURL = URL.createObjectURL(await (await fetch(currentItem.src)).blob());
            const a = document.createElement('a');
            a.href = objectURL;
            a.download = currentItem.name ?? id;
            document.body.appendChild(a);
            a.click();
            document.body.removeChild(a);
            URL.revokeObjectURL(objectURL);
        }
    };
    const onItemError = (id) => {
        setItems(item => {
            return item?.map(obj => (obj.id === id ? { ...obj, error: true } : obj));
        });
    };
    return (<>
      <Button ref={demoButtonRef} onClick={() => {
            setOpen(true);
            onClick();
        }}>
        Open Lightbox
      </Button>
      {open && (<Lightbox items={items ?? []} cycle={args.cycle || undefined} onAfterClose={() => {
                setOpen(false);
            }} onItemDownload={onItemDownload} onItemError={onItemError}/>)}
    </>);
};
LightboxDemo.args = {
    limit: 15,
    cycle: false,
    error: false
};
LightboxDemo.argTypes = {
    limit: { control: { type: 'number' } },
    cycle: { control: { type: 'boolean' } },
    error: { control: { type: 'boolean' } }
};
//# sourceMappingURL=Lightbox.stories.jsx.map