import { ApplicationErrorHandlerCommon, APPLICATION_ERROR_SLOT_FILL } from '@admin-layout/client';
import { Slot } from '@common-stack/components-pro';
import Toast from 'react-native-toast-message';
import * as React from 'react';

const FallbackComponent = () => {
    React.useLayoutEffect(() => {
        Toast.show({
            type: 'error',
            text1: 'Something went wrong...',
        });
    }, []);

    return null;
};

const RendererComponent = (props) => {
    const { applicationErrors, backendError } = props;
    return (
        <>
            {!!backendError && <FallbackComponent />}
            {!!applicationErrors?.length && (
                <Slot
                    name={APPLICATION_ERROR_SLOT_FILL}
                    fillProps={{ active: true, applicationErrors: applicationErrors }}
                />
            )}
        </>
    );
};

export const ApplicationErrorHandler = (props) => {
    const CommonHandler = (ApplicationErrorHandlerCommon as any)(FallbackComponent, Slot, RendererComponent);
    return <CommonHandler {...props} />;
};