import { Box, CardGalleryItem, Image, } from '@wix/design-system';
import React, { cloneElement, isValidElement } from 'react';
import { ItemActionsState } from '../../state';
import { observer } from 'mobx-react-lite';
import { useGridItemActions } from './useGridItemActions';
import { MessageActionModal } from '../ActionModal';
import { useToolbarCollectionContext } from '../ToolbarCollectionContext';
function _GridCardItem(props) {
    const { state, keyedItem, index, actionCell, preset, renderItem, draggable, droppable, dragging, dragHandleProps, } = props;
    const toolbarState = useToolbarCollectionContext();
    const [itemActionsState] = React.useState(() => new ItemActionsState({
        collection: state.collection,
        keyedItem,
        fade: 'idle',
        reportBi: toolbarState.reportBi,
    }));
    const { item } = keyedItem;
    const { collection, calcGridProps: { cardFooterSize }, } = state;
    const { itemName } = collection;
    const renderProps = renderItem?.(item, index) ?? {};
    const { backgroundImageNode } = renderProps;
    const imagePlacement = renderProps.imagePlacement ?? state.imagePlacement;
    const { primaryAction, settingsMenu } = useGridItemActions({
        actionCell,
        item,
        index,
        gridState: state,
        keyedItem,
        itemActionsState,
        imagePlacement,
    });
    const textProps = (() => {
        if (preset === 'empty') {
            return {
                title: undefined,
                subtitle: undefined,
                footer: undefined,
            };
        }
        return {
            title: renderProps?.title || itemName(item) || React.createElement(React.Fragment, null, "\u200B"),
            subtitle: preset === 'full' || preset === 'footer'
                ? renderProps?.subtitle || React.createElement(React.Fragment, null, "\u200B")
                : undefined,
            footer: preset === 'footer' ? (React.createElement(Box, { height: "42px", direction: "vertical" }, renderProps?.footer)) : undefined,
        };
    })();
    const primaryActionProps = React.useMemo(() => {
        const merged = {
            ...(primaryAction ?? renderProps?.primaryActionProps),
        };
        return Object.keys(merged).length > 0 ? merged : undefined;
    }, [primaryAction, renderProps?.primaryActionProps]);
    return (React.createElement(React.Fragment, null,
        React.createElement(CardGalleryItem, { tabIndex: 0, dataHook: "grid-card-item", ...renderProps, skin: "outlined", size: cardFooterSize, imagePlacement: imagePlacement, backgroundImageNode: backgroundImageNode == null ? (React.createElement(Image, { borderRadius: 0, height: "100%" })) : isValidElement(backgroundImageNode) ? (cloneElement(backgroundImageNode, {
                style: {
                    borderRadius: 0,
                },
            })) : (backgroundImageNode), ...textProps, primaryActionProps: primaryActionProps, settingsMenu: settingsMenu ?? renderProps.settingsMenu, draggable: draggable, dragging: dragging, droppable: droppable, dragHandleProps: dragHandleProps }),
        React.createElement(MessageActionModal, { state: itemActionsState.confirmModal, ...itemActionsState.confirmModal.value })));
}
export const GridCardItem = observer(_GridCardItem);
//# sourceMappingURL=GridCardItem.js.map