import { useEffect, useReducer, useState } from 'react';
import { ComboBox, createUID, Flex, FormDialog, Input, SummaryList, Text } from '@pega/cosmos-react-core';
import { loadingTimeoutMS } from '../Progress/Progress.mocks';
const errorText = 'Cannot be blank';
const categories = Array.from({ length: 5 }, (_, i) => `Category ${i + 1}`);
const initialItems = Array.from({ length: 3 }, (_, i) => {
    return {
        id: createUID(),
        name: `Editable item ${i + 1}`,
        category: categories[i]
    };
});
const itemReducer = (items, payload) => {
    switch (payload.type) {
        case 'add': {
            return [...items, { ...payload.item, id: createUID() }];
        }
        case 'edit': {
            return items.map(item => {
                return item.id === payload.item.id
                    ? { ...item, name: payload.item.name, category: payload.item.category }
                    : item;
            });
        }
        case 'remove': {
            const itemIndex = items.findIndex(item => item.id === payload.item.id);
            if (itemIndex === -1)
                return items;
            items.splice(itemIndex, 1);
            return [...items];
        }
        default: {
            return items;
        }
    }
};
const progressStates = {
    loading: 'Loading...',
    submitting: 'Submitting...'
};
export const useMockItems = () => {
    return useReducer(itemReducer, undefined, () => initialItems);
};
export const ItemDialog = ({ target, item: itemProp, dispatch, onComplete }) => {
    const [nameField, setNameField] = useState(() => {
        return {
            value: itemProp?.name ?? null,
            error: null,
            errorOnPriorBlur: false
        };
    });
    const [categoryField, setCategoryField] = useState(() => {
        return {
            value: itemProp?.category ?? null,
            error: null
        };
    });
    const [progress, setProgress] = useState(progressStates.loading);
    useEffect(() => {
        let timerId;
        if (progress === progressStates.loading) {
            timerId = window.setTimeout(() => {
                setProgress(false);
            }, loadingTimeoutMS);
        }
        else if (progress === progressStates.submitting) {
            timerId = window.setTimeout(() => {
                setProgress(false);
                dispatch({ name: nameField.value, category: categoryField.value });
                onComplete();
            }, loadingTimeoutMS);
        }
        return () => {
            window.clearTimeout(timerId);
        };
    }, [progress]);
    return (<FormDialog target={target} heading={`${itemProp ? 'Edit' : 'Add'} item`} progress={progress} onCancel={{
            disabled: progress === progressStates.submitting,
            handler: () => {
                setProgress(false);
                onComplete();
            }
        }} onSubmit={{
            disabled: !!progress || [nameField, categoryField].some(field => !field.value || field.error),
            handler: () => {
                setProgress(progressStates.submitting);
            }
        }}>
      {(!progress || progress !== progressStates.loading) && (<Flex container={{ direction: 'column', gap: 2 }}>
          <Input required label='Name' value={nameField.value ?? ''} onChange={(e) => {
                setNameField(cur => ({
                    ...cur,
                    value: e.target.value,
                    error: !e.target.value && cur.errorOnPriorBlur ? errorText : null
                }));
            }} onBlur={(e) => {
                if (!e.target.value) {
                    setNameField(cur => ({
                        ...cur,
                        error: errorText,
                        errorOnPriorBlur: true
                    }));
                }
                else if (nameField.errorOnPriorBlur) {
                    setNameField(cur => ({ ...cur, errorOnPriorBlur: false }));
                }
            }} status={nameField.error ? 'error' : undefined} info={nameField.error}/>
          <ComboBox required label='Category' selected={categoryField.value
                ? {
                    items: {
                        id: categoryField.value,
                        text: categoryField.value
                    }
                }
                : undefined} menu={{
                mode: 'single-select',
                onItemClick: category => {
                    setCategoryField({
                        value: category,
                        error: null
                    });
                },
                items: categories.map(category => {
                    return {
                        id: category,
                        primary: category,
                        selected: category === categoryField.value
                    };
                })
            }} onBlur={selected => {
                if (!selected) {
                    setCategoryField(cur => ({ ...cur, error: errorText }));
                }
            }} status={categoryField.error ? 'error' : undefined} info={categoryField.error}/>
        </Flex>)}
    </FormDialog>);
};
export const FormDialogMock = () => {
    const [dialogTarget, setDialogTarget] = useState(null);
    const [editItem, setEditItem] = useState(null);
    const [items, dispatch] = useMockItems();
    return (<>
      <SummaryList name='Editable items' icon='list' count={items.length} actions={[
            {
                id: 'Add',
                text: 'Add',
                icon: 'plus',
                onClick: (_, e) => {
                    setDialogTarget(e.currentTarget);
                }
            }
        ]} items={items.map(({ id, name, category }) => {
            return {
                id,
                primary: name,
                secondary: <Text variant='secondary'>{category}</Text>,
                actions: [
                    {
                        id: 'Edit',
                        text: 'Edit',
                        icon: 'pencil',
                        onClick: (_, e, menuButton) => {
                            if (menuButton)
                                setDialogTarget(menuButton);
                            setEditItem({
                                id,
                                name,
                                category
                            });
                        }
                    },
                    {
                        id: 'Remove',
                        text: 'Remove',
                        icon: 'trash',
                        onClick: () => {
                            dispatch({ type: 'remove', item: { id } });
                        }
                    }
                ]
            };
        })}/>

      {dialogTarget && (<ItemDialog target={dialogTarget} item={editItem} dispatch={fields => {
                dispatch(editItem
                    ? { type: 'edit', item: { id: editItem.id, ...fields } }
                    : { type: 'add', item: { ...fields } });
            }} onComplete={() => {
                setDialogTarget(null);
                setEditItem(null);
            }}/>)}
    </>);
};
//# sourceMappingURL=FormDialog.mocks.jsx.map