import React, { useMemo, useState } from 'react';
import { observer } from 'mobx-react-lite';
import { Box, Loader, Text, TextButton } from '@wix/design-system';
import { PickerContentBaseWrapped, } from './PickerContentBaseWrapped';
import { AdditionalStepState } from '../../state';
import { ChevronLeft } from '@wix/wix-ui-icons-common';
import { st, classes } from './PickerContentAdditionalStep.st.css.js';
const AdditionalStepContentRenderer = ({ renderAdditionalStepContent, item, }) => renderAdditionalStepContent?.({ item }) ?? null;
function _PickerContentAdditionalStep(props) {
    const { pickerContentState, renderItem, renderAdditionalStepContent, additionalStepTitle, additionalStepSubtitle, primaryButtonOnClick, secondaryButtonOnClick, onCloseButtonClick, onBeforeSelectAdditionalStep, onBackButtonClick, additionalStepOverrides = {}, primaryButtonText, autoAdditionalStepOnInitialSelect, height, // extract from rest to disable overrides
    ...rest } = props;
    const [state] = useState(() => (pickerContentState.additionalStep = new AdditionalStepState({
        collection: pickerContentState.picker.collection,
    })));
    const selectedKeyedItem = state.selectedKeyedItem;
    const renderedItemProps = useMemo(() => {
        if (!selectedKeyedItem) {
            return {
                title: '',
                subtitle: '',
            };
        }
        const { item, index } = selectedKeyedItem;
        const renderProps = renderItem(item, index);
        return {
            title: state.collection.itemName(item),
            ...renderProps,
        };
    }, [selectedKeyedItem]);
    const { collection: { translate: t }, } = state;
    const suffixNode = useMemo(() => {
        return [
            additionalStepOverrides.extraNode,
            additionalStepOverrides.extraText,
            renderedItemProps.extraNode,
            renderedItemProps.extraText,
        ].find((node) => node !== undefined);
    }, [
        renderedItemProps,
        additionalStepOverrides.extraNode,
        additionalStepOverrides.extraText,
    ]);
    renderedItemProps.image =
        additionalStepOverrides?.image || renderedItemProps.image;
    renderedItemProps.subtitle =
        additionalStepOverrides?.subtitle || renderedItemProps.subtitle;
    const enablePrimaryButton = additionalStepOverrides?.enablePrimaryButton || false;
    return (React.createElement(PickerContentBaseWrapped, { ...rest, primaryButtonOnClick: async () => {
            state.isLoading = true;
            if (onBeforeSelectAdditionalStep) {
                try {
                    state.isLoading = true;
                    state.additionalData = await onBeforeSelectAdditionalStep?.();
                    primaryButtonOnClick?.();
                }
                catch (err) {
                    console.error(err);
                    state.isLoading = false;
                }
            }
            else {
                primaryButtonOnClick?.();
            }
        }, secondaryButtonOnClick: secondaryButtonOnClick, onCloseButtonClick: onCloseButtonClick, title: additionalStepTitle, subtitle: additionalStepSubtitle, primaryButtonText: state.isLoading ? React.createElement(Loader, { size: "tiny" }) : primaryButtonText, secondaryButtonText: t('cairo.cancel.button'), primaryButtonProps: {
            disabled: state.isLoading || !enablePrimaryButton,
        }, sideActions: autoAdditionalStepOnInitialSelect ? undefined : (React.createElement(TextButton, { prefixIcon: React.createElement(ChevronLeft, null), dataHook: "back-button", onClick: () => onBackButtonClick() }, t('cairo.pickerModal.back.button'))) },
        React.createElement(Box, { direction: "vertical", paddingLeft: "SP5", paddingRight: "SP5", paddingBottom: "SP4", gap: "SP4", overflow: "auto", height: "100%", dataHook: "additional-step-content" },
            React.createElement(Box, { direction: "vertical" },
                React.createElement(Box, { gap: "SP3" },
                    React.createElement(Box, { align: "center" }, renderedItemProps.image),
                    React.createElement("div", { className: st(classes.titles) },
                        React.createElement(Box, null,
                            React.createElement(Text, { dataHook: "title", ellipsis: true }, renderedItemProps.title)),
                        React.createElement(Box, null,
                            React.createElement(Text, { secondary: true, light: true, dataHook: "subtitle", ellipsis: true }, renderedItemProps.subtitle))),
                    suffixNode !== undefined && (React.createElement("div", { className: st(classes.suffix) }, typeof suffixNode === 'string' ? (React.createElement(Text, { secondary: true, dataHook: "suffix-text" }, suffixNode)) : (React.createElement(Box, { dataHook: "suffix-node" }, suffixNode)))))),
            React.createElement(Box, { direction: "vertical", minHeight: "100px", width: "100%", dataHook: "additional-step-widget", position: "relative" }, selectedKeyedItem && (React.createElement(AdditionalStepContentRenderer, { renderAdditionalStepContent: renderAdditionalStepContent, item: selectedKeyedItem.item }))))));
}
export const PickerContentAdditionalStep = observer(_PickerContentAdditionalStep);
//# sourceMappingURL=PickerContentAdditionalStep.js.map