import { useCallback, useEffect, useMemo, useRef, useState } from 'react';
import { action } from '@storybook/addon-actions';
import { Banner, createStringMatcher } from '@pega/cosmos-react-core';
import { Stakeholders } from '@pega/cosmos-react-work';
import { AddAndEditForm, mockNetworkReq, mockRoles, useMockStakeholders } from './Stakeholders.mocks';
export default {
    title: 'Work/Stakeholders',
    component: Stakeholders
};
export const StakeHoldersDemo = (args) => {
    const [loading, setLoading] = useState(true);
    const [mode, setMode] = useState();
    const [editing, setEditing] = useState(null);
    const [formLoading, setFormLoading] = useState(false);
    const [viewAllLoading, setViewAllLoading] = useState(false);
    const [viewAllSearchValue, setViewAllSearchValue] = useState('');
    const [banners, setBanners] = useState(null);
    const bannerHandleRef = useRef(null);
    const [hasServerError, setHasServerError] = useState(false);
    const [mockStakeholders, setMockStakeholders] = useMockStakeholders(() => {
        setLoading(false);
    });
    const [editData, setEditData] = useState();
    const addActions = useCallback((items) => {
        return items.map(({ role, data, ...stakeholder }) => {
            return {
                ...stakeholder,
                onEdit: () => {
                    setFormLoading(true);
                    setEditing(stakeholder.id);
                    setEditData(mockStakeholders.find(ms => ms.id === stakeholder.id)?.data);
                    mockNetworkReq().then(() => setFormLoading(false));
                },
                onRemove: () => {
                    setMockStakeholders(cur => cur.filter(({ id }) => id !== stakeholder.id));
                }
            };
        });
    }, [mockStakeholders]);
    const form = useMemo(() => {
        return {
            loading: formLoading,
            roles: mode === 'add' ? mockRoles : undefined,
            currentRole: editing ? mockStakeholders.find(({ id }) => id === editing)?.role : undefined,
            renderer: AddAndEditForm,
            rendererProps: editData,
            banners,
            onSubmit: ({ selectedRoleName, closeForm }) => {
                setFormLoading(true);
                action(`The selected role is: ${selectedRoleName}`);
                const req = mockNetworkReq(args.formErrorBanner);
                req
                    .then(() => {
                    closeForm();
                })
                    .catch(() => {
                    setBanners(<Banner variant='urgent' messages={['500: Unexpected error']} handle={bannerHandleRef}/>);
                    setHasServerError(true);
                })
                    .finally(() => {
                    setFormLoading(false);
                });
            },
            onDismiss: ({ closeForm }) => {
                closeForm();
            },
            onAfterClose: () => {
                setFormLoading(false);
                setEditing(null);
                setEditData(undefined);
                setMode(undefined);
                setBanners(null);
                setHasServerError(true);
            }
        };
    }, [mode, formLoading, mockRoles, editing, editData, banners]);
    const viewAll = useMemo(() => {
        let viewAllItems = mockStakeholders;
        if (viewAllSearchValue) {
            const filterRegex = createStringMatcher(viewAllSearchValue, 'boundary');
            viewAllItems = mockStakeholders.filter(({ primary }) => filterRegex.test(primary));
        }
        return {
            loading: viewAllLoading,
            items: addActions(viewAllItems),
            onSearch: setViewAllSearchValue,
            onAfterClose: () => {
                if (viewAllLoading)
                    setViewAllLoading(false);
                setViewAllSearchValue('');
            }
        };
    }, [viewAllLoading, mockStakeholders, viewAllSearchValue, addActions]);
    useEffect(() => {
    }, [mode]);
    useEffect(() => {
    }, [editing]);
    useEffect(() => {
        if (hasServerError) {
            bannerHandleRef.current?.focus();
        }
    }, [hasServerError]);
    return (<Stakeholders loading={loading} items={useMemo(() => addActions(mockStakeholders.slice(0, 3)), [addActions, mockStakeholders])} count={loading ? undefined : mockStakeholders.length} onAddNew={args.hideAddNew
            ? undefined
            : () => {
                setMode('add');
                setFormLoading(true);
                mockNetworkReq().then(() => setFormLoading(false));
            }} form={form} onViewAll={() => {
            setMode('viewAll');
            setViewAllLoading(true);
            mockNetworkReq().then(() => setViewAllLoading(false));
        }} viewAll={viewAll}/>);
};
StakeHoldersDemo.args = {
    hideAddNew: false,
    formErrorBanner: false
};
StakeHoldersDemo.argTypes = {
    hideAddNew: { control: { type: 'boolean' } },
    formErrorBanner: { control: { type: 'boolean' } }
};
//# sourceMappingURL=Stakeholders.stories.jsx.map