import React, { useEffect, useState } from 'react';
import { runInAction } from 'mobx';
import { useCreatePickerContentState } from '../../hooks/usePickerContent';
import { PickerContentState } from '../../state';
import { PickerContentAdditionalStep } from './PickerContentAdditionalStep';
import { PickerContentItemsSelection } from './PickerContentItemsSelection';
import { PickerContentBaseWrapped } from './PickerContentBaseWrapped';
import { fromMultipleSelectionToBoolean } from '../MaxSelection';
import { observer } from 'mobx-react-lite';
import { Box, Loader } from '@wix/design-system';
function _PickerContentWrapped(props) {
    const { state: params, renderPickerContent, primaryButtonOnClick, backButtonOnClick, continueButtonOnClick, } = props;
    const createPickerContentState = useCreatePickerContentState();
    const [state] = useState(() => params instanceof PickerContentState
        ? params
        : createPickerContentState(params));
    useEffect(() => {
        return state.init({
            autoAdditionalStepOnInitialSelect: props.autoAdditionalStepOnInitialSelect,
        });
    }, [state]);
    const { isAdditionalStepShown, setIsAdditionalStepShown, isAutoAdditionalStepPending, } = state;
    const { picker, modalState } = state;
    const { _isModalOpen } = modalState;
    const primaryOnClick = ({ currentLevel, numLevels, }) => {
        picker.onPrimaryButtonClick({ currentLevel, numLevels });
        runInAction(() => {
            modalState.onPrimaryButtonClick(state, state.additionalStep?.additionalData);
        });
        primaryButtonOnClick?.();
    };
    const secondaryOnClick = () => {
        picker.onSecondaryButtonOnClick();
        _isModalOpen.value = false;
        props?.secondaryButtonOnClick?.();
    };
    const onCloseButtonClick = (event) => {
        picker.onCloseButtonClick();
        _isModalOpen.value = false;
        props?.onCloseButtonClick?.(event);
    };
    const { collection: { translate: t }, } = picker;
    const selectedValue = picker.collection.bulkSelect.selectedValues?.[0];
    const hasAdditionalStep = React.useMemo(() => selectedValue &&
        props?.hasAdditionalStep?.({
            item: selectedValue,
        }), [selectedValue, props?.hasAdditionalStep]);
    if (isAutoAdditionalStepPending) {
        return (React.createElement(PickerContentBaseWrapped, { dataHook: props.dataHook, width: props.width, secondaryButtonText: t('cairo.cancel.button'), secondaryButtonOnClick: secondaryOnClick, onCloseButtonClick: onCloseButtonClick, primaryButtonProps: { disabled: true } },
            React.createElement(Box, { height: "100%", minHeight: "300px", align: "center", verticalAlign: "middle" },
                React.createElement(Loader, { dataHook: "auto-additional-step-loader" }))));
    }
    return isAdditionalStepShown ? (React.createElement(PickerContentAdditionalStep, { ...props, pickerContentState: state, onBackButtonClick: () => {
            picker.onBackButtonClick();
            setIsAdditionalStepShown(false);
            backButtonOnClick?.({ item: selectedValue });
        }, primaryButtonOnClick: () => {
            primaryOnClick({ currentLevel: 2, numLevels: 2 });
        }, secondaryButtonOnClick: secondaryOnClick, onCloseButtonClick: onCloseButtonClick })) : (React.createElement(PickerContentItemsSelection, { ...props, state: state, primaryButtonOnClick: () => {
            if (
            // currently additional step supports only single selection
            !fromMultipleSelectionToBoolean(props?.multiple) &&
                hasAdditionalStep &&
                selectedValue) {
                picker.onContinueButtonClick();
                setIsAdditionalStepShown(true);
                continueButtonOnClick?.({ item: selectedValue });
            }
            else {
                primaryOnClick({ currentLevel: 1, numLevels: 1 });
            }
        }, primaryButtonText: hasAdditionalStep
            ? t('cairo.continue')
            : props.primaryButtonText || t('cairo.continue'), secondaryButtonOnClick: secondaryOnClick, renderPickerContent: renderPickerContent, onCloseButtonClick: onCloseButtonClick }));
}
export const PickerContentWrapped = observer(_PickerContentWrapped);
//# sourceMappingURL=PickerContentWrapped.js.map