import { useCallback, useEffect, useState } from 'react';
import { Predictions } from '@pega/cosmos-react-work';
import { formatNumber, useConfiguration } from '@pega/cosmos-react-core';
import { FraudRiskRenderer } from './Predictions.mocks';
export default {
    title: 'Work/Predictions',
    component: Predictions
};
export const PredictionsDemo = () => {
    const { locale } = useConfiguration();
    const getFormattedPercentage = useCallback((value) => formatNumber(value, {
        locale,
        options: {
            style: 'unit',
            unit: 'percent'
        }
    }), []);
    const [predictionsItems, setPredictionsItems] = useState([
        {
            id: '1',
            label: 'Fraud risk',
            value: getFormattedPercentage(76),
            additionalInfo: <FraudRiskRenderer />
        },
        {
            id: '2',
            label: 'Predict the likehood of case completion',
            value: getFormattedPercentage(73)
        },
        {
            id: '3',
            label: 'Probability to churn',
            value: getFormattedPercentage(82)
        }
    ]);
    useEffect(() => {
        const timeout = setTimeout(() => {
            if (predictionsItems.length < 4) {
                setPredictionsItems([
                    ...predictionsItems,
                    {
                        id: '4',
                        label: 'Risk of missing SLA',
                        value: getFormattedPercentage(19)
                    }
                ]);
            }
        }, 3000);
        return () => clearTimeout(timeout);
    }, [predictionsItems, getFormattedPercentage]);
    return <Predictions count={predictionsItems.length} items={predictionsItems}/>;
};
//# sourceMappingURL=Predictions.stories.jsx.map