import { runInAction } from 'mobx';
import React, { useState } from 'react';
import { useCreatePickerContentState } from '../../hooks/usePickerContent';
import { PickerContentState } from '../../state';
import { PickerContentAdditionalStep } from './PickerContentAdditionalStep';
import { PickerContentItemsSelection } from './PickerContentItemsSelection';
import { fromMultipleSelectionToBoolean } from '../MaxSelection';
import { observer } from 'mobx-react-lite';
function _PickerContentWrapped(props) {
    const { state: params, renderPickerContent, primaryButtonOnClick, backButtonOnClick, continueButtonOnClick, } = props;
    const createPickerContentState = useCreatePickerContentState();
    const [isAdditionalStepShown, showAdditionalStep] = useState(false);
    const [state] = useState(() => params instanceof PickerContentState
        ? params
        : createPickerContentState(params));
    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]);
    return isAdditionalStepShown ? (React.createElement(PickerContentAdditionalStep, { ...props, pickerContentState: state, onBackButtonClick: () => {
            picker.onBackButtonClick();
            showAdditionalStep(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) {
                picker.onContinueButtonClick();
                showAdditionalStep(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