import React from 'react';
import * as CoreCmsCollection from './core/CmsCollection.js';
import { WixDataQueryResult, type CmsQueryOptions } from '../services/cms-collection-service.js';
import { AsChildChildren } from '@wix/headless-utils/react';
import { Sort as SortPrimitive, type SortValue, type SortOption, type FilterOption, type FilterValue } from '@wix/headless-components/react';
import * as CoreCmsCollectionFilters from './core/CmsCollectionFilters.js';
import type { LineItem } from '@wix/headless-ecom/services';
/**
 * Props for CmsCollection.Root component
 */
export interface RootProps {
    children: (props: CoreCmsCollection.RootRenderProps) => React.ReactNode;
    collection: {
        id: string;
        queryResult?: WixDataQueryResult;
        queryOptions?: CmsQueryOptions;
        initialSort?: SortValue;
        /** Default filters that are always applied (set by site owner).
         * These filters are combined with user-applied filters using AND logic.
         * @example
         * ```tsx
         * // Only show yellow or red cars
         * defaultFilter={{ color: { $hasSome: ['yellow', 'red'] } }}
         *
         * // When user filters by model: Toyota
         * // Result: Toyota cars that are yellow or red
         * ```
         */
        defaultFilter?: FilterValue;
        /** List of field IDs for single reference fields to include */
        singleRefFieldIds?: string[];
        /** List of field IDs for multi reference fields to include */
        multiRefFieldIds?: string[];
    };
    className?: string;
}
/**
 * Root component that provides the CMS Collection service context to its children.
 * This component exposes all collection service properties via render props pattern.
 *
 * @component
 * @example
 * ```tsx
 * import { CmsCollection } from '@wix/cms/components';
 *
 * function CollectionPage() {
 *   return (
 *     <CmsCollection.Root collection={{ id: 'MyCollection' }}>
 *       <CmsCollection.Sort
 *         as="select"
 *         sortOptions={[
 *           { fieldName: 'title', order: 'ASC', label: 'Title (A-Z)' },
 *           { fieldName: 'created', order: 'DESC', label: 'Newest First' },
 *         ]}
 *       />
 *     </CmsCollection.Root>
 *   );
 * }
 *
 * // With reference fields included
 * function CollectionWithReferences() {
 *   return (
 *     <CmsCollection.Root
 *       collection={{
 *         id: 'MyCollection',
 *         singleRefFieldIds: ['author', 'category'],
 *         multiRefFieldIds: ['tags', 'relatedItems']
 *       }}
 *     >
 *       // Custom rendering logic here
 *     </CmsCollection.Root>
 *   );
 * }
 *
 * // With pagination
 * function CollectionWithPagination() {
 *   return (
 *     <CmsCollection.Root collection={{ id: 'MyCollection', queryOptions: { limit: 10 } }}>
 *       {({ queryResult, loading, nextPage, prevPage }) => (
 *         <>
 *           {queryResult?.items.map(item => <div key={item._id}>{item.title}</div>)}
 *           <button onClick={prevPage} disabled={!queryResult?.hasPrev()}>Previous</button>
 *           <button onClick={nextPage} disabled={!queryResult?.hasNext()}>Next</button>
 *         </>
 *       )}
 *     </CmsCollection.Root>
 *   );
 * }
 * ```
 */
export declare const Root: React.ForwardRefExoticComponent<RootProps & React.RefAttributes<HTMLDivElement>>;
/**
 * Props for CmsCollection.Sort component
 */
export interface SortProps {
    /** Predefined sort options for declarative API */
    sortOptions?: Array<SortOption>;
    /** Children components or render function */
    children?: React.ComponentProps<typeof SortPrimitive.Root>['children'];
    /** CSS classes to apply */
    className?: string;
}
/**
 * Sort component that provides sorting controls for the collection items.
 * Wraps the Sort primitive with CMS collection state management.
 *
 * @component
 * @example
 * ```tsx
 * // Define sort options
 * const sortOptions = [
 *   { fieldName: 'title', order: 'ASC' as const, label: 'Title (A-Z)' },
 *   { fieldName: 'title', order: 'DESC' as const, label: 'Title (Z-A)' },
 *   { fieldName: 'price', order: 'ASC' as const, label: 'Price (Low to High)' },
 *   { fieldName: 'price', order: 'DESC' as const, label: 'Price (High to Low)' },
 *   { fieldName: '_createdDate', order: 'DESC' as const, label: 'Newest First' },
 *   { fieldName: '_createdDate', order: 'ASC' as const, label: 'Oldest First' },
 * ];
 *
 * // Custom implementation with render function (asChild is automatically true)
 * <CmsCollection.Sort sortOptions={sortOptions}>
 *   {({ currentSort, options, onChange }) => (
 *     <select
 *       value={`${currentSort?.fieldName ?? ''}-${currentSort?.order ?? ''}`}
 *       onChange={(e) => {
 *         const [fieldName, order] = e.target.value.split('-');
 *         onChange(fieldName || undefined, order || undefined);
 *       }}
 *     >
 *       {options.map((option, i) => (
 *         <option
 *           key={`${option.fieldName}-${option.order}-${i}`}
 *           value={`${option.fieldName ?? ''}-${option.order ?? ''}`}
 *         >
 *           {option.label}
 *         </option>
 *       ))}
 *     </select>
 *   )}
 * </CmsCollection.Sort>
 *
 * // Custom list container with render function
 * <CmsCollection.Sort sortOptions={sortOptions}>
 *   {({ currentSort, options, onChange }) => (
 *     <ul className="flex gap-2">
 *       {options.map((option, i) => (
 *         <li key={i}>
 *           <button
 *             onClick={() => onChange(option.fieldName, option.order)}
 *             className={option.isSelected ? 'bg-primary text-primary-foreground' : ''}
 *           >
 *             {option.label}
 *           </button>
 *         </li>
 *       ))}
 *     </ul>
 *   )}
 * </CmsCollection.Sort>
 * ```
 */
export declare const Sort: React.ForwardRefExoticComponent<SortProps & React.RefAttributes<HTMLElement>>;
/**
 * Props for CmsCollection.FilterResetTrigger component
 */
export interface FilterResetTriggerProps {
    /** Whether to render as a child component */
    asChild?: boolean;
    /** Custom render function when using asChild */
    children?: AsChildChildren<{
        resetFilters: () => void;
        isFiltered: boolean;
    }>;
    /** CSS classes to apply to the default element */
    className?: string;
    /** Label for the button */
    label?: string;
}
/**
 * Reset trigger component for clearing all applied filters.
 * Provides reset functionality and filter state to custom render functions.
 * Only renders when filters are applied.
 *
 * @component
 * @example
 * ```tsx
 * // Default usage
 * <CmsCollection.FilterResetTrigger
 *   label="Clear All Filters"
 *   className="reset-btn"
 * />
 *
 * // Custom rendering with asChild
 * <CmsCollection.FilterResetTrigger asChild>
 *   {({ resetFilters, isFiltered }, ref) => (
 *     <button
 *       ref={ref}
 *       onClick={resetFilters}
 *       disabled={!isFiltered}
 *       className="custom-reset-button"
 *     >
 *       Reset All Filters
 *     </button>
 *   )}
 * </CmsCollection.FilterResetTrigger>
 * ```
 */
export declare const FilterResetTrigger: React.ForwardRefExoticComponent<FilterResetTriggerProps & React.RefAttributes<HTMLButtonElement>>;
/**
 * Single selection filter component for CMS collections.
 * Renders the full platform filter structure and provides filter state via render props.
 *
 * @component
 * @example
 * ```tsx
 * <CmsCollection.SingleFilter
 *   key="category"
 *   label="Category"
 *   displayType="text"
 *   fieldName="category"
 *   validValues={['tech', 'lifestyle', 'business']}
 * >
 *   {({ value, onChange }) => (
 *     <div className="flex gap-2">
 *       <button onClick={() => onChange(value === 'tech' ? 'lifestyle' : 'tech')}>Tech</button>
 *       <button onClick={() => onChange(value === 'lifestyle' ? 'business' : 'lifestyle')}>Lifestyle</button>
 *       <button onClick={() => onChange(value === 'business' ? 'tech' : 'business')}>Business</button>
 *       {value && <button onClick={resetFilter}>Clear</button>}
 *     </div>
 *   )}
 * </CmsCollection.SingleFilter>
 * ```
 */
export declare const SingleFilter: React.ForwardRefExoticComponent<CoreCmsCollectionFilters.SingleFilterProps & React.RefAttributes<HTMLElement>>;
/**
 * Multi-selection filter component for CMS collections.
 * Renders the full platform filter structure and provides filter state via render props.
 *
 * @component
 * @example
 * ```tsx
 * <CmsCollection.MultiFilter
 *   key="tags"
 *   label="Tags"
 *   displayType="text"
 *   fieldName="tags"
 *   fieldType="array"
 *   validValues={['new', 'featured', 'popular']}
 * >
 *   {({ values, onChange, resetFilter }) => (
 *     <div className="flex gap-2">
 *       <button onClick={() => onChange(values.includes('new') ? values.filter(val => val !== 'new') : [...values, 'new'])}>New</button>
 *       <button onClick={() => onChange(values.includes('featured') ? values.filter(val => val !== 'featured') : [...values, 'featured'])}>Featured</button>
 *       <button onClick={() => onChange(values.includes('popular') ? values.filter(val => val !== 'popular') : [...values, 'popular'])}>Popular</button>
 *       {values.length > 0 && <button onClick={resetFilter}>Clear</button>}
 *     </div>
 *   )}
 * </CmsCollection.MultiFilter>
 * ```
 */
export declare const MultiFilter: React.ForwardRefExoticComponent<CoreCmsCollectionFilters.MultiFilterProps & React.RefAttributes<HTMLElement>>;
/**
 * Range filter component for CMS collections.
 * Renders the full platform filter structure and provides filter state via render props.
 *
 * @component
 * @example
 * ```tsx
 * <CmsCollection.RangeFilter
 *   key="price"
 *   label="Price"
 *   displayType="range"
 *   fieldName="price"
 *   validValues={[0, 1000]}
 * >
 *   {({ values, onChange, minBound, maxBound }) => (
 *     <div>
 *       <input
 *         type="range"
 *         min={minBound}
 *         max={maxBound}
 *         value={values[0] ?? minBound}
 *         onChange={(e) => onChange([Number(e.target.value), values[1] ?? maxBound])}
 *       />
 *       <span>{String(values[0] ?? minBound)}</span>
 *     </div>
 *   )}
 * </CmsCollection.RangeFilter>
 * ```
 */
export declare const RangeFilter: React.ForwardRefExoticComponent<CoreCmsCollectionFilters.RangeFilterProps & React.RefAttributes<HTMLElement>>;
/**
 * Props for CmsCollection.Action.AddToCart component
 */
export interface ActionAddToCartProps extends Omit<React.HTMLAttributes<HTMLButtonElement>, 'children'> {
    /** When true, the component will not render its own element but forward its props to its child */
    asChild?: boolean;
    /**
     * Content to render inside the button.
     * Can be static content or a render function for custom behavior.
     */
    children?: React.ReactNode | React.ForwardRefRenderFunction<HTMLButtonElement, {
        /** Whether the button should be disabled */
        disabled?: boolean;
        /** Whether the action is currently loading */
        isLoading: boolean;
        /** Function to execute the action */
        onClick: () => Promise<void>;
        /** Line items that will be processed */
        lineItems: LineItem[];
        /** Error message if any */
        error?: string | null;
    }>;
    /** Text or content to display when not loading */
    label?: string | React.ReactNode;
    /** Text or content to display when loading */
    loadingState?: string | React.ReactNode;
    /** The item ID to add to cart */
    itemId: string;
    /** Additional disabled state (combined with loading state) */
    disabled?: boolean;
    /** Quantity to add (defaults to 1) */
    quantity?: number;
}
/**
 * Add to Cart action button component for CMS collection items.
 * Uses CoreCmsCollection.Action.AddToCart to get CMS data and wraps Commerce.Actions.AddToCart.
 *
 * @component
 * @example
 * ```tsx
 * <CmsCollection.Root collection={{ id: 'MyCollection' }}>
 *   {({ queryResult }) => (
 *     <div>
 *       {queryResult?.items.map(item => (
 *         <div key={item._id}>
 *           <h3>{item.title}</h3>
 *           <CmsCollection.Action.AddToCart itemId={item._id} />
 *         </div>
 *       ))}
 *     </div>
 *   )}
 * </CmsCollection.Root>
 * ```
 */
export declare const ActionAddToCart: React.ForwardRefExoticComponent<ActionAddToCartProps & React.RefAttributes<HTMLButtonElement>>;
/**
 * Props for CmsCollection.Action.BuyNow component
 */
export interface ActionBuyNowProps extends Omit<React.HTMLAttributes<HTMLButtonElement>, 'children'> {
    /** When true, the component will not render its own element but forward its props to its child */
    asChild?: boolean;
    /**
     * Content to render inside the button.
     * Can be static content or a render function for custom behavior.
     */
    children?: React.ReactNode | React.ForwardRefRenderFunction<HTMLButtonElement, {
        /** Whether the button should be disabled */
        disabled?: boolean;
        /** Whether the action is currently loading */
        isLoading: boolean;
        /** Function to execute the action */
        onClick: () => Promise<void>;
        /** Line items that will be processed */
        lineItems: LineItem[];
        /** Error message if any */
        error?: string | null;
    }>;
    /** Text or content to display when not loading */
    label?: string | React.ReactNode;
    /** Text or content to display when loading */
    loadingState?: string | React.ReactNode;
    /** The item IDs to buy now */
    itemIds: string[];
    /** Additional disabled state (combined with loading state) */
    disabled?: boolean;
    /** Quantity to purchase (defaults to 1) */
    quantity?: number;
}
/**
 * Buy Now action button component for CMS collection items.
 * Uses CoreCmsCollection.Action.BuyNow to get CMS data and wraps Commerce.Actions.BuyNow.
 *
 * @component
 * @example
 * ```tsx
 * // BuyNow button per item
 * <CmsCollection.Root collection={{ id: 'MyCollection' }}>
 *   {({ queryResult }) => (
 *     <div>
 *       {queryResult?.items.map(item => (
 *         <div key={item._id}>
 *           <h3>{item.title}</h3>
 *           <CmsCollection.Action.BuyNow itemIds={[item._id]} />
 *         </div>
 *       ))}
 *     </div>
 *   )}
 * </CmsCollection.Root>
 * ```
 *
 * @example
 * ```tsx
 * // One BuyNow button for multiple items
 * function CollectionWithMultiSelect() {
 *   const [selectedItemIds, setSelectedItemIds] = React.useState<string[]>([]);
 *
 *   const toggleItem = (itemId: string) => {
 *     setSelectedItemIds(prev =>
 *       prev.includes(itemId)
 *         ? prev.filter(id => id !== itemId)
 *         : [...prev, itemId]
 *     );
 *   };
 *
 *   return (
 *     <CmsCollection.Root collection={{ id: 'MyCollection' }}>
 *       {({ queryResult }) => (
 *         <div>
 *           {queryResult?.items.map(item => (
 *             <div key={item._id}>
 *               <input
 *                 type="checkbox"
 *                 checked={selectedItemIds.includes(item._id)}
 *                 onChange={() => toggleItem(item._id)}
 *               />
 *               <h3>{item.title}</h3>
 *             </div>
 *           ))}
 *           {selectedItemIds.length > 0 && (
 *             <CmsCollection.Action.BuyNow
 *               itemIds={selectedItemIds}
 *               asChild
 *             >
 *               {({ onClick, disabled, isLoading, lineItems }, ref) => (
 *                 <button
 *                   ref={ref}
 *                   onClick={onClick}
 *                   disabled={disabled}
 *                   className="buy-now-btn"
 *                 >
 *                   {isLoading ? (
 *                     <span>Processing {lineItems.length} item(s)...</span>
 *                   ) : (
 *                     <span>Buy Now - {lineItems.length} item(s)</span>
 *                   )}
 *                 </button>
 *               )}
 *             </CmsCollection.Action.BuyNow>
 *           )}
 *         </div>
 *       )}
 *     </CmsCollection.Root>
 *   );
 * }
 * ```
 */
export declare const ActionBuyNow: React.ForwardRefExoticComponent<ActionBuyNowProps & React.RefAttributes<HTMLButtonElement>>;
/**
 * Namespace containing all CMS collection action components.
 */
export declare const Action: {
    /** Add to Cart button for adding collection items to cart */
    readonly AddToCart: React.ForwardRefExoticComponent<ActionAddToCartProps & React.RefAttributes<HTMLButtonElement>>;
    /** Buy Now button for immediate purchase of collection items */
    readonly BuyNow: React.ForwardRefExoticComponent<ActionBuyNowProps & React.RefAttributes<HTMLButtonElement>>;
};
export type { FilterOption };