import React, { useMemo } from 'react';
import { Box, CustomModalLayout, Loader, } from '@wix/design-system';
import { useReactive } from '@wix/bex-utils/react';
export function PickerModalSplash(props) {
    const { state, renderError, onCloseButtonClick, ...rest } = props;
    const { minContentHeight, fetchPickerComponent, fetchFirstPage, fetchInitialProps, _isModalOpen, } = state;
    const fetchPickerComponentStatus = useReactive(fetchPickerComponent.status);
    const fetchFirstPageStatus = useReactive(fetchFirstPage.status);
    const fetchInitialPropsStatus = useReactive(fetchInitialProps.status);
    const fetchStatuses = useMemo(() => [
        fetchPickerComponentStatus,
        fetchFirstPageStatus,
        fetchInitialPropsStatus,
    ], [fetchPickerComponentStatus, fetchFirstPageStatus, fetchInitialPropsStatus]);
    const errorStatus = useMemo(() => {
        return fetchStatuses.find((status) => status.type === 'error');
    }, [fetchStatuses]);
    const isFetching = useMemo(() => {
        return fetchStatuses.some((status) => status.type === 'loading' || status.type === 'idle');
    }, [fetchStatuses]);
    let child;
    if (errorStatus) {
        child = renderError({
            err: errorStatus.error,
            isOnline: true,
        });
        child = (React.createElement(Box, { dataHook: "splash-error-container", align: "center", verticalAlign: "middle", padding: "SP6", minHeight: minContentHeight, boxSizing: "border-box" }, child));
    }
    else if (isFetching) {
        child = (React.createElement(Box, { height: minContentHeight, align: "center", verticalAlign: "middle" },
            React.createElement(Loader, { dataHook: "splash-loader" })));
    }
    return (React.createElement(CustomModalLayout, { removeContentPadding: true, closeButtonProps: {
            onClick: (event) => {
                _isModalOpen.value = false;
                onCloseButtonClick?.(event);
            },
            autoFocus: true,
        }, ...rest }, child));
}
//# sourceMappingURL=PickerModalSplash.js.map