import { Modal } from '@wix/design-system';
import React, { useEffect, useState } from 'react';
import { useReactive } from '@wix/bex-utils/react';
import { PickerModalSplash } from '../PickerModalSplash';
export function PickerModal(props) {
    const { dataHook, state, modalProps, renderError, width = '618px', multiple, ...rest } = props;
    const { _isModalOpen, _customContent, _isCustomContentVisible, fetchPickerComponent, fetchFirstPage, fetchInitialProps, } = state;
    const isModalOpen = useReactive(_isModalOpen);
    const fetchPickerComponentStatus = useReactive(fetchPickerComponent.status);
    const fetchFirstPageStatus = useReactive(fetchFirstPage.status);
    const fetchInitialPropsStatus = useReactive(fetchInitialProps.status);
    const customContent = useReactive(_customContent);
    const isCustomContentVisible = useReactive(_isCustomContentVisible);
    useState(() => {
        state.multipleRef.current = multiple;
    });
    useEffect(() => {
        state.multipleRef.current = multiple;
    }, [multiple]);
    useEffect(() => {
        state.onIsOpenChanged();
    }, [isModalOpen]);
    useEffect(() => state.init(), []);
    let child;
    if (fetchPickerComponentStatus.type === 'success' &&
        fetchFirstPageStatus.type === 'success' &&
        fetchInitialPropsStatus.type === 'success') {
        const { data: PickerContentComponent } = fetchPickerComponentStatus;
        child = (React.createElement(PickerContentComponent, { dataHook: dataHook, width: "100%", modalState: state, renderError: renderError, multiple: multiple, ...rest }));
    }
    else {
        child = (React.createElement(PickerModalSplash, { dataHook: dataHook, state: state, width: "100%", renderError: renderError, ...rest, primaryButtonText: undefined, secondaryButtonText: undefined, primaryButtonOnClick: undefined, secondaryButtonOnClick: undefined }));
    }
    return (React.createElement(React.Fragment, null,
        React.createElement(Modal, { dataHook: dataHook ? `${dataHook}-picker-modal` : 'picker-modal-lazy-modal', onRequestClose: () => state.closeModal(), ...modalProps, isOpen: isModalOpen },
            React.createElement("div", { "data-wix-patterns": true, style: { width, maxHeight: '100%', display: 'flex' } }, child)),
        customContent?.({
            isOpen: isCustomContentVisible,
            width,
            close: state.onCreateNew,
        })));
}
//# sourceMappingURL=PickerModal.js.map