import { useCallback, useState } from 'react';
import { MetaList, Text, Status, Link, DateTimeDisplay } from '@pega/cosmos-react-core';
import { Tasks, tasksHelpers as helpers } from '@pega/cosmos-react-work';
import { AIButtonFormDemo } from '../../core/AIButton/AIButton.stories';
import viewGroups from './Tasks.mocks';
export default {
    title: 'Work/Tasks',
    component: Tasks
};
export const TasksDemo = (args) => {
    const [isLimited, setIsLimited] = useState(true);
    const [hasOpenTask, setHasOpenTask] = useState(false);
    const [views, setViews] = useState(viewGroups);
    const [loading, setLoading] = useState(false);
    const activeView = helpers.getSelectedView(views);
    const activeViewTaskCount = args.count ?? activeView?.count ?? 0;
    const onExpandToggle = useCallback(() => {
        if (isLimited) {
            setLoading(true);
            setTimeout(() => {
                setLoading(false);
                setIsLimited(cur => !cur);
            }, 1000);
        }
        else {
            setIsLimited(cur => !cur);
        }
    }, [isLimited]);
    const taskArray = Array.from({
        length: isLimited
            ? Math.min(3, args.count ?? activeViewTaskCount)
            : args.count ?? activeViewTaskCount
    }, (_, i) => {
        const dueIn = 86400000 * i;
        let status = 'info';
        if (i === 0) {
            status = 'urgent';
        }
        else if (i === 1) {
            status = 'warn';
        }
        return {
            id: `${i}`,
            name: `Task ${i + 1}`,
            processName: i % 2 ? 'Demo process' : undefined,
            meta: (<MetaList items={[
                    <Status variant={status}>{status}</Status>,
                    <Text variant='secondary'>
                Due <DateTimeDisplay variant='relative' value={Date.now() + dueIn}/>
              </Text>,
                    <Link href='#demo'>Parent case link</Link>
                ]}/>),
            onOpen: args.openableTasks !== false
                ? () => {
                    setHasOpenTask(true);
                }
                : undefined,
            content: hasOpenTask ? (<AIButtonFormDemo onCancel={() => setHasOpenTask(false)} onSubmit={() => setHasOpenTask(false)}/>) : null
        };
    });
    return (<Tasks name={args.name ?? 'Tasks'} count={activeViewTaskCount} items={taskArray} avatar={args.showVisual && activeView ? { name: activeView.text } : undefined} viewSelector={args.showViewSelector
            ? {
                views,
                onViewSelect: id => {
                    setViews(cur => helpers.selectView(cur, id));
                }
            }
            : undefined} onExpandToggle={args.enableExpand && activeViewTaskCount > 3 ? onExpandToggle : undefined} search={args.search ? {} : undefined} loadingMore={loading}/>);
};
TasksDemo.args = {
    name: 'Assignments',
    showVisual: true,
    showViewSelector: true,
    enableExpand: true,
    openableTasks: true,
    count: 3,
    search: false
};
TasksDemo.argTypes = {
    name: { control: { type: 'text' } },
    showVisual: { control: { type: 'boolean' } },
    showViewSelector: { control: { type: 'boolean' } },
    enableExpand: { control: { type: 'boolean' } },
    count: { control: { type: 'number' } },
    openableTasks: { control: { type: 'boolean' } },
    search: { control: { type: 'boolean' } }
};
//# sourceMappingURL=Tasks.stories.jsx.map