import React, { useEffect, useState } from 'react';
import { Fade } from '../Fade';
import { observer } from 'mobx-react-lite';
import { RowActionsColumnSlot, } from '../CollectionListItem';
import { CollectionItemActions } from '../CollectionItemActions';
import { Box } from '@wix/design-system';
import { ItemActionsState } from '../../state';
import { useToolbarCollectionContext } from '../ToolbarCollectionContext';
export const CollectionListRow = observer(function CollectionListRow({ fade, element, collection, keyedItem, dataHook, ...rest }) {
    const toolbarState = useToolbarCollectionContext();
    const [state] = useState(() => new ItemActionsState({
        collection,
        keyedItem,
        fade: 'idle',
        reportBi: toolbarState.reportBi,
    }));
    const { type: CollectionListItemComponent, props: collectionListItemProps } = element;
    useEffect(() => {
        if (state.keyedItem !== keyedItem) {
            state.keyedItem = keyedItem;
        }
    }, [keyedItem]);
    const transformColumn = (columnElement) => {
        const { props } = columnElement;
        const overrides = RowActionsColumnSlot.isElementOf(columnElement)
            ? {
                width: 100,
                align: 'right',
                value: (React.createElement(CollectionItemActions, { state: state, collection: collection })),
            }
            : {
                value: (React.createElement(Box, { dataHook: "collection-list-column", color: "D20" }, props.children)),
            };
        return {
            ...props,
            ...overrides,
        };
    };
    let child = (React.createElement(CollectionListItemComponent, { showDivider: true, ...collectionListItemProps, transformColumn: transformColumn }));
    if (fade) {
        child = (React.createElement(Fade, { timeout: 650, ...rest, onExiting: (node) => {
                state.onFadeStart();
                void rest.onExiting?.(node);
            }, onExited: (node) => {
                state.onFadeDone();
                void rest.onExited?.(node);
            } },
            React.createElement("div", { "data-hook": dataHook }, child)));
    }
    return child;
});
//# sourceMappingURL=CollectionListRow.js.map