import React, { useEffect, useState } from 'react';
import { Carousel, COLOR_TOKENS, Box, } from '@wix/design-system';
import { SuggestionsState } from '../../state/Suggestions/SuggestionsState';
import { observer } from 'mobx-react-lite';
import { useWixPatternsContainer } from '@wix/bex-core/react';
import { MarketingCardSkeleton } from './MarketingCard';
import { VisibilityTrackedCard } from './VisibilityTrackedCard';
import { SuggestionsProvider } from './SuggestionsContext';
const defaultCarouselProps = {
    dots: false,
    infinite: false,
    variableWidth: true,
    slideSpacing: 24,
    controlsPosition: 'overlay',
    showControlsShadow: true,
    gradientColor: COLOR_TOKENS['--wsr-color-D70'],
    gradient: true,
    controlsStartEnd: 'hidden',
};
const SuggestionsContainer = ({ count, children, carouselProps, dataHook, dataState, maxInlineItems, }) => {
    if (count <= maxInlineItems) {
        return (React.createElement("div", { "data-hook": dataHook },
            React.createElement(Box, { direction: "horizontal", gap: "SP4", dataHook: `suggestions-container-${dataState}` }, children)));
    }
    return (React.createElement("div", { "data-hook": dataHook },
        React.createElement(Carousel, { ...defaultCarouselProps, ...carouselProps, dataHook: `suggestions-carousel-${dataState}` }, children)));
};
export const SuggestionItem = ({ children, dataId, }) => (React.createElement("div", { "data-hook": "suggestion-item", "data-id": dataId, style: { display: 'contents' } }, children));
export const Suggestions = observer(({ placementId, renderCard, CardSkeleton = MarketingCardSkeleton, carouselProps, skeletonsNumber = 4, dataHook = 'suggestions', maxInlineItems = 2, }) => {
    const container = useWixPatternsContainer();
    const [state] = useState(() => new SuggestionsState({ placementId, container }));
    useEffect(() => {
        return state.init();
    }, [state]);
    if (state.hasOffers) {
        // use initial cards count for container, to match the count the cards get rendered with
        const cardCount = state.offers.length;
        const cards = state.offers
            .map((offer, index) => {
            const key = offer.offerGuid || `suggestion-${index}`;
            return {
                key,
                offerGuid: offer.offerGuid,
                element: renderCard({
                    offer,
                    index,
                    totalOffers: cardCount,
                }),
            };
        })
            .filter((card) => card.element != null);
        if (cards.length === 0) {
            return null;
        }
        return (React.createElement(SuggestionsProvider, { onOfferClicked: state.onOfferClicked },
            React.createElement(SuggestionsContainer, { count: cardCount, carouselProps: carouselProps, dataHook: dataHook, dataState: "idle", maxInlineItems: maxInlineItems }, cards.map(({ key, offerGuid, element }) => (React.createElement(SuggestionItem, { key: key, dataId: key },
                React.createElement(VisibilityTrackedCard, { itemKey: key, element: element, onObserved: () => offerGuid && state.onOfferViewed(offerGuid) })))))));
    }
    if (state.isFetching) {
        const skeletons = Array.from({ length: skeletonsNumber }).map((_, index) => (React.createElement(SuggestionItem, { key: index },
            React.createElement(CardSkeleton, { index: index, totalOffers: skeletonsNumber }))));
        return (React.createElement(SuggestionsProvider, { onOfferClicked: state.onOfferClicked },
            React.createElement(SuggestionsContainer, { count: skeletonsNumber, carouselProps: { ...carouselProps, controlsPosition: 'none' }, dataHook: dataHook, dataState: "loading", maxInlineItems: maxInlineItems }, skeletons)));
    }
    return null;
});
//# sourceMappingURL=Suggestions.js.map