import { defineCustomElements } from '@coveo/atomic/loader';
import React, { useRef, useEffect } from 'react';
import { AtomicAriaLive as AtomicAriaLive$1, AtomicCommerceBreadbox as AtomicCommerceBreadbox$1, AtomicCommerceCategoryFacet as AtomicCommerceCategoryFacet$1, AtomicCommerceDidYouMean as AtomicCommerceDidYouMean$1, AtomicCommerceFacet as AtomicCommerceFacet$1, AtomicCommerceFacets as AtomicCommerceFacets$1, AtomicCommerceInterface as AtomicCommerceInterface$1, AtomicCommerceLayout as AtomicCommerceLayout$1, AtomicCommerceLoadMoreProducts as AtomicCommerceLoadMoreProducts$1, AtomicCommerceNoProducts as AtomicCommerceNoProducts$1, AtomicCommerceNumericFacet as AtomicCommerceNumericFacet$1, AtomicCommercePager as AtomicCommercePager$1, AtomicCommerceProductList as AtomicCommerceProductList$1, AtomicCommerceProductsPerPage as AtomicCommerceProductsPerPage$1, AtomicCommerceQueryError as AtomicCommerceQueryError$1, AtomicCommerceQuerySummary as AtomicCommerceQuerySummary$1, AtomicCommerceRecommendationInterface as AtomicCommerceRecommendationInterface$1, AtomicCommerceRecommendationList as AtomicCommerceRecommendationList$1, AtomicCommerceRefineModal as AtomicCommerceRefineModal$1, AtomicCommerceRefineToggle as AtomicCommerceRefineToggle$1, AtomicCommerceSearchBox as AtomicCommerceSearchBox$1, AtomicCommerceSearchBoxInstantProducts as AtomicCommerceSearchBoxInstantProducts$1, AtomicCommerceSearchBoxQuerySuggestions as AtomicCommerceSearchBoxQuerySuggestions$1, AtomicCommerceSearchBoxRecentQueries as AtomicCommerceSearchBoxRecentQueries$1, AtomicCommerceSortDropdown as AtomicCommerceSortDropdown$1, AtomicCommerceText as AtomicCommerceText$1, AtomicCommerceTimeframeFacet as AtomicCommerceTimeframeFacet$1, AtomicComponentError as AtomicComponentError$1, AtomicFocusTrap as AtomicFocusTrap$1, AtomicGeneratedAnswerFeedbackModal as AtomicGeneratedAnswerFeedbackModal$1, AtomicIcon as AtomicIcon$1, AtomicLayoutSection as AtomicLayoutSection$1, AtomicNumericRange as AtomicNumericRange$1, AtomicProduct as AtomicProduct$1, AtomicProductChildren as AtomicProductChildren$1, AtomicProductDescription as AtomicProductDescription$1, AtomicProductExcerpt as AtomicProductExcerpt$1, AtomicProductFieldCondition as AtomicProductFieldCondition$1, AtomicProductImage as AtomicProductImage$1, AtomicProductLink as AtomicProductLink$1, AtomicProductMultiValueText as AtomicProductMultiValueText$1, AtomicProductNumericFieldValue as AtomicProductNumericFieldValue$1, AtomicProductPrice as AtomicProductPrice$1, AtomicProductRating as AtomicProductRating$1, AtomicProductSectionActions as AtomicProductSectionActions$1, AtomicProductSectionBadges as AtomicProductSectionBadges$1, AtomicProductSectionBottomMetadata as AtomicProductSectionBottomMetadata$1, AtomicProductSectionChildren as AtomicProductSectionChildren$1, AtomicProductSectionDescription as AtomicProductSectionDescription$1, AtomicProductSectionEmphasized as AtomicProductSectionEmphasized$1, AtomicProductSectionMetadata as AtomicProductSectionMetadata$1, AtomicProductSectionName as AtomicProductSectionName$1, AtomicProductSectionVisual as AtomicProductSectionVisual$1, AtomicProductText as AtomicProductText$1, AtomicTimeframe as AtomicTimeframe$1 } from '@coveo/atomic/components';
import { createComponent } from '@lit/react';
import { createRoot } from 'react-dom/client';
import { renderToString } from 'react-dom/server';

defineCustomElements();

const AtomicAriaLive = createComponent({
    tagName: 'atomic-aria-live',
    react: React,
    elementClass: AtomicAriaLive$1,
});
const AtomicCommerceBreadbox = createComponent({
    tagName: 'atomic-commerce-breadbox',
    react: React,
    elementClass: AtomicCommerceBreadbox$1,
});
const AtomicCommerceCategoryFacet = createComponent({
    tagName: 'atomic-commerce-category-facet',
    react: React,
    elementClass: AtomicCommerceCategoryFacet$1,
});
const AtomicCommerceDidYouMean = createComponent({
    tagName: 'atomic-commerce-did-you-mean',
    react: React,
    elementClass: AtomicCommerceDidYouMean$1,
});
const AtomicCommerceFacet = createComponent({
    tagName: 'atomic-commerce-facet',
    react: React,
    elementClass: AtomicCommerceFacet$1,
});
const AtomicCommerceFacets = createComponent({
    tagName: 'atomic-commerce-facets',
    react: React,
    elementClass: AtomicCommerceFacets$1,
});
const AtomicCommerceInterface = createComponent({
    tagName: 'atomic-commerce-interface',
    react: React,
    elementClass: AtomicCommerceInterface$1,
});
const AtomicCommerceLayout = createComponent({
    tagName: 'atomic-commerce-layout',
    react: React,
    elementClass: AtomicCommerceLayout$1,
});
const AtomicCommerceLoadMoreProducts = createComponent({
    tagName: 'atomic-commerce-load-more-products',
    react: React,
    elementClass: AtomicCommerceLoadMoreProducts$1,
});
const AtomicCommerceNoProducts = createComponent({
    tagName: 'atomic-commerce-no-products',
    react: React,
    elementClass: AtomicCommerceNoProducts$1,
});
const AtomicCommerceNumericFacet = createComponent({
    tagName: 'atomic-commerce-numeric-facet',
    react: React,
    elementClass: AtomicCommerceNumericFacet$1,
});
const AtomicCommercePager = createComponent({
    tagName: 'atomic-commerce-pager',
    react: React,
    elementClass: AtomicCommercePager$1,
});
const AtomicCommerceProductList = createComponent({
    tagName: 'atomic-commerce-product-list',
    react: React,
    elementClass: AtomicCommerceProductList$1,
});
const AtomicCommerceProductsPerPage = createComponent({
    tagName: 'atomic-commerce-products-per-page',
    react: React,
    elementClass: AtomicCommerceProductsPerPage$1,
});
const AtomicCommerceQueryError = createComponent({
    tagName: 'atomic-commerce-query-error',
    react: React,
    elementClass: AtomicCommerceQueryError$1,
});
const AtomicCommerceQuerySummary = createComponent({
    tagName: 'atomic-commerce-query-summary',
    react: React,
    elementClass: AtomicCommerceQuerySummary$1,
});
const AtomicCommerceRecommendationInterface = createComponent({
    tagName: 'atomic-commerce-recommendation-interface',
    react: React,
    elementClass: AtomicCommerceRecommendationInterface$1,
});
const AtomicCommerceRecommendationList = createComponent({
    tagName: 'atomic-commerce-recommendation-list',
    react: React,
    elementClass: AtomicCommerceRecommendationList$1,
});
const AtomicCommerceRefineModal = createComponent({
    tagName: 'atomic-commerce-refine-modal',
    react: React,
    elementClass: AtomicCommerceRefineModal$1,
});
const AtomicCommerceRefineToggle = createComponent({
    tagName: 'atomic-commerce-refine-toggle',
    react: React,
    elementClass: AtomicCommerceRefineToggle$1,
});
const AtomicCommerceSearchBox = createComponent({
    tagName: 'atomic-commerce-search-box',
    react: React,
    elementClass: AtomicCommerceSearchBox$1,
});
const AtomicCommerceSearchBoxInstantProducts = createComponent({
    tagName: 'atomic-commerce-search-box-instant-products',
    react: React,
    elementClass: AtomicCommerceSearchBoxInstantProducts$1,
});
const AtomicCommerceSearchBoxQuerySuggestions = createComponent({
    tagName: 'atomic-commerce-search-box-query-suggestions',
    react: React,
    elementClass: AtomicCommerceSearchBoxQuerySuggestions$1,
});
const AtomicCommerceSearchBoxRecentQueries = createComponent({
    tagName: 'atomic-commerce-search-box-recent-queries',
    react: React,
    elementClass: AtomicCommerceSearchBoxRecentQueries$1,
});
const AtomicCommerceSortDropdown = createComponent({
    tagName: 'atomic-commerce-sort-dropdown',
    react: React,
    elementClass: AtomicCommerceSortDropdown$1,
});
const AtomicCommerceText = createComponent({
    tagName: 'atomic-commerce-text',
    react: React,
    elementClass: AtomicCommerceText$1,
});
const AtomicCommerceTimeframeFacet = createComponent({
    tagName: 'atomic-commerce-timeframe-facet',
    react: React,
    elementClass: AtomicCommerceTimeframeFacet$1,
});
const AtomicComponentError = createComponent({
    tagName: 'atomic-component-error',
    react: React,
    elementClass: AtomicComponentError$1,
});
const AtomicFocusTrap = createComponent({
    tagName: 'atomic-focus-trap',
    react: React,
    elementClass: AtomicFocusTrap$1,
});
const AtomicGeneratedAnswerFeedbackModal = createComponent({
    tagName: 'atomic-generated-answer-feedback-modal',
    react: React,
    elementClass: AtomicGeneratedAnswerFeedbackModal$1,
});
const AtomicIcon = createComponent({
    tagName: 'atomic-icon',
    react: React,
    elementClass: AtomicIcon$1,
});
const AtomicLayoutSection = createComponent({
    tagName: 'atomic-layout-section',
    react: React,
    elementClass: AtomicLayoutSection$1,
});
const AtomicNumericRange = createComponent({
    tagName: 'atomic-numeric-range',
    react: React,
    elementClass: AtomicNumericRange$1,
});
const AtomicProduct = createComponent({
    tagName: 'atomic-product',
    react: React,
    elementClass: AtomicProduct$1,
});
const AtomicProductChildren = createComponent({
    tagName: 'atomic-product-children',
    react: React,
    elementClass: AtomicProductChildren$1,
});
const AtomicProductDescription = createComponent({
    tagName: 'atomic-product-description',
    react: React,
    elementClass: AtomicProductDescription$1,
});
const AtomicProductExcerpt = createComponent({
    tagName: 'atomic-product-excerpt',
    react: React,
    elementClass: AtomicProductExcerpt$1,
});
const AtomicProductFieldCondition = createComponent({
    tagName: 'atomic-product-field-condition',
    react: React,
    elementClass: AtomicProductFieldCondition$1,
});
const AtomicProductImage = createComponent({
    tagName: 'atomic-product-image',
    react: React,
    elementClass: AtomicProductImage$1,
});
const AtomicProductLink = createComponent({
    tagName: 'atomic-product-link',
    react: React,
    elementClass: AtomicProductLink$1,
});
const AtomicProductMultiValueText = createComponent({
    tagName: 'atomic-product-multi-value-text',
    react: React,
    elementClass: AtomicProductMultiValueText$1,
});
const AtomicProductNumericFieldValue = createComponent({
    tagName: 'atomic-product-numeric-field-value',
    react: React,
    elementClass: AtomicProductNumericFieldValue$1,
});
const AtomicProductPrice = createComponent({
    tagName: 'atomic-product-price',
    react: React,
    elementClass: AtomicProductPrice$1,
});
const AtomicProductRating = createComponent({
    tagName: 'atomic-product-rating',
    react: React,
    elementClass: AtomicProductRating$1,
});
const AtomicProductSectionActions = createComponent({
    tagName: 'atomic-product-section-actions',
    react: React,
    elementClass: AtomicProductSectionActions$1,
});
const AtomicProductSectionBadges = createComponent({
    tagName: 'atomic-product-section-badges',
    react: React,
    elementClass: AtomicProductSectionBadges$1,
});
const AtomicProductSectionBottomMetadata = createComponent({
    tagName: 'atomic-product-section-bottom-metadata',
    react: React,
    elementClass: AtomicProductSectionBottomMetadata$1,
});
const AtomicProductSectionChildren = createComponent({
    tagName: 'atomic-product-section-children',
    react: React,
    elementClass: AtomicProductSectionChildren$1,
});
const AtomicProductSectionDescription = createComponent({
    tagName: 'atomic-product-section-description',
    react: React,
    elementClass: AtomicProductSectionDescription$1,
});
const AtomicProductSectionEmphasized = createComponent({
    tagName: 'atomic-product-section-emphasized',
    react: React,
    elementClass: AtomicProductSectionEmphasized$1,
});
const AtomicProductSectionMetadata = createComponent({
    tagName: 'atomic-product-section-metadata',
    react: React,
    elementClass: AtomicProductSectionMetadata$1,
});
const AtomicProductSectionName = createComponent({
    tagName: 'atomic-product-section-name',
    react: React,
    elementClass: AtomicProductSectionName$1,
});
const AtomicProductSectionVisual = createComponent({
    tagName: 'atomic-product-section-visual',
    react: React,
    elementClass: AtomicProductSectionVisual$1,
});
const AtomicProductText = createComponent({
    tagName: 'atomic-product-text',
    react: React,
    elementClass: AtomicProductText$1,
});
const AtomicTimeframe = createComponent({
    tagName: 'atomic-timeframe',
    react: React,
    elementClass: AtomicTimeframe$1,
});

// biome-ignore lint/style/useImportType: <React is needed>
const DefaultProps$1 = {
    onReady: (executeFirstRequest) => {
        return executeFirstRequest ? executeFirstRequest() : Promise.resolve();
    },
    localization: () => { },
};
/**
 * This component serves as a wrapper for the core AtomicCommerceInterface.
 * @param props
 * @returns
 */
const InterfaceWrapper$1 = (props) => {
    const mergedProps = { ...DefaultProps$1, ...props };
    if (!mergedProps.engine) {
        throw new Error('The "engine" prop is required.');
        //TODO, maybe: provide a default engine
    }
    const { engine, localization, onReady, ...allOtherProps } = mergedProps;
    const interfaceRef = useRef(null);
    let initialization = null;
    useEffect(() => {
        const commerceInterfaceAtomic = interfaceRef.current;
        if (!initialization) {
            initialization = commerceInterfaceAtomic.initializeWithEngine(engine);
            initialization.then(() => {
                localization(commerceInterfaceAtomic.i18n);
                onReady(commerceInterfaceAtomic.executeFirstRequest.bind(commerceInterfaceAtomic));
            });
        }
    }, [engine, initialization, localization, onReady]);
    return (React.createElement(AtomicCommerceInterface, { ref: interfaceRef, ...allOtherProps }, props.children));
};

/**
 * This component serves as a wrapper for the core AtomicCommerceProductList.
 *
 * @param props
 * @returns
 */
const ListWrapper$1 = (props) => {
    const { template, ...otherProps } = props;
    const commerceProductListRef = useRef(null);
    useEffect(() => {
        commerceProductListRef.current?.setRenderFunction((product, root, linkContainer) => {
            const templateResult = template(product);
            if (hasLinkTemplate$1(templateResult)) {
                createRoot(linkContainer).render(templateResult.linkTemplate);
                createRoot(root).render(templateResult.contentTemplate);
                return renderToString(templateResult.contentTemplate);
            }
            if (linkContainer !== undefined) {
                createRoot(root).render(templateResult);
                otherProps.display === 'grid'
                    ? createRoot(linkContainer).render(React.createElement(AtomicProductLink, null))
                    : // biome-ignore lint/complexity/noUselessFragments: <>
                        createRoot(linkContainer).render(React.createElement(React.Fragment, null));
            }
            return renderToString(templateResult);
        });
    }, [otherProps.display, template]);
    return (React.createElement(AtomicCommerceProductList, { ref: commerceProductListRef, ...otherProps }));
};
const hasLinkTemplate$1 = (template) => {
    return template.linkTemplate !== undefined;
};

// biome-ignore lint/style/useImportType: <React is needed>
const DefaultProps = {
    localization: () => { },
};
/**
 * This component serves as a wrapper for the core AtomicCommerceRecommendationInterface.
 * @param props
 * @returns
 */
const InterfaceWrapper = (props) => {
    const mergedProps = { ...DefaultProps, ...props };
    if (!mergedProps.engine) {
        throw new Error('The "engine" prop is required.');
    }
    const { engine, localization, ...allOtherProps } = mergedProps;
    const interfaceRef = useRef(null);
    let initialization = null;
    useEffect(() => {
        const CommerceRecommendationInterfaceAtomic = interfaceRef.current;
        if (!initialization) {
            initialization =
                CommerceRecommendationInterfaceAtomic.initializeWithEngine(engine);
            initialization.then(() => {
                localization(CommerceRecommendationInterfaceAtomic.i18n);
            });
        }
    }, [localization, engine, initialization]);
    return (React.createElement(AtomicCommerceRecommendationInterface, { engine: engine, ref: interfaceRef, ...allOtherProps }, props.children));
};

/**
 * This component serves as a wrapper for the core AtomicCommerceRecommendationList.
 *
 * @param props
 * @returns
 */
const ListWrapper = (props) => {
    const { template, ...otherProps } = props;
    const commerceRecommendationListRef = useRef(null);
    useEffect(() => {
        commerceRecommendationListRef.current?.setRenderFunction((product, root, linkContainer) => {
            const templateResult = template(product);
            if (hasLinkTemplate(templateResult)) {
                createRoot(linkContainer).render(templateResult.linkTemplate);
                createRoot(root).render(templateResult.contentTemplate);
                return renderToString(templateResult.contentTemplate);
            }
            else {
                createRoot(root).render(templateResult);
                otherProps.display === 'grid'
                    ? createRoot(linkContainer).render(React.createElement(AtomicProductLink, null))
                    : // biome-ignore lint/complexity/noUselessFragments: <>
                        createRoot(linkContainer).render(React.createElement(React.Fragment, null));
                return renderToString(templateResult);
            }
        });
    }, [otherProps.display, template]);
    return (React.createElement(AtomicCommerceRecommendationList, { ref: commerceRecommendationListRef, ...otherProps }));
};
const hasLinkTemplate = (template) => {
    return template.linkTemplate !== undefined;
};

export { AtomicAriaLive, AtomicCommerceBreadbox, AtomicCommerceCategoryFacet, AtomicCommerceDidYouMean, AtomicCommerceFacet, AtomicCommerceFacets, InterfaceWrapper$1 as AtomicCommerceInterface, AtomicCommerceLayout, AtomicCommerceLoadMoreProducts, AtomicCommerceNoProducts, AtomicCommerceNumericFacet, AtomicCommercePager, ListWrapper$1 as AtomicCommerceProductList, AtomicCommerceProductsPerPage, AtomicCommerceQueryError, AtomicCommerceQuerySummary, InterfaceWrapper as AtomicCommerceRecommendationInterface, ListWrapper as AtomicCommerceRecommendationList, AtomicCommerceRefineModal, AtomicCommerceRefineToggle, AtomicCommerceSearchBox, AtomicCommerceSearchBoxInstantProducts, AtomicCommerceSearchBoxQuerySuggestions, AtomicCommerceSearchBoxRecentQueries, AtomicCommerceSortDropdown, AtomicCommerceText, AtomicCommerceTimeframeFacet, AtomicComponentError, AtomicFocusTrap, AtomicGeneratedAnswerFeedbackModal, AtomicIcon, AtomicLayoutSection, AtomicNumericRange, AtomicProduct, AtomicProductChildren, AtomicProductDescription, AtomicProductExcerpt, AtomicProductFieldCondition, AtomicProductImage, AtomicProductLink, AtomicProductMultiValueText, AtomicProductNumericFieldValue, AtomicProductPrice, AtomicProductRating, AtomicProductSectionActions, AtomicProductSectionBadges, AtomicProductSectionBottomMetadata, AtomicProductSectionChildren, AtomicProductSectionDescription, AtomicProductSectionEmphasized, AtomicProductSectionMetadata, AtomicProductSectionName, AtomicProductSectionVisual, AtomicProductText, AtomicTimeframe };
//# sourceMappingURL=atomic-react.mjs.map
