import React from 'react';
import { DispatchType, FulfillmentTypeEnum } from '../types/fulfillments-types.js';
import { AsChildChildren } from '@wix/headless-utils/react';
interface TimeSlotContextValue {
    timeSlots: Array<{
        id: string;
        label: string;
        startTime: Date;
        endTime: Date;
        dispatchType: DispatchType;
        isAsap: boolean;
    }>;
    selectedTimeSlotId: string | null;
    onTimeSlotChange: (timeSlotId: string) => void;
    hasTimeSlots: boolean;
}
export interface RootProps extends Omit<React.ComponentPropsWithoutRef<'div'>, 'children'> {
    /** Child components that will have access to fulfillment details context */
    children: React.ReactNode;
}
/**
 * Root headless component for Fulfillment Details
 * Provides context for fulfillment detail components
 *
 * @example
 * ```tsx
 * <FulfillmentDetails.Root>
 *   <FulfillmentDetails.AddressName />
 *   <FulfillmentDetails.FulfillmentType />
 *   <FulfillmentDetails.FulfillmentDate />
 *   <FulfillmentDetails.AvailableTimeSlots>
 *     <FulfillmentDetails.TimeSlotOptionRepeater />
 *   </FulfillmentDetails.AvailableTimeSlots>
 * </FulfillmentDetails.Root>
 * ```
 */
export declare const Root: React.ForwardRefExoticComponent<RootProps & React.RefAttributes<HTMLDivElement>>;
interface AddressNameProps extends Omit<React.ComponentPropsWithoutRef<'div'>, 'children'> {
    /** Whether to render as a child component */
    asChild?: boolean;
    /** Children render prop that receives the address data */
    children?: AsChildChildren<{
        addressName: string | null;
        fullAddress: string | null;
        hasAddress: boolean;
        dispatchType: DispatchType | null;
    }> | React.ReactNode;
}
/**
 * Headless component for displaying the fulfillment address name
 * Shows pickup location name or delivery address
 *
 * @example
 * ```tsx
 * <FulfillmentDetails.AddressName>
 *   {({ addressName, dispatchType }) => (
 *     <div>
 *       {dispatchType === 'PICKUP' ? 'Pickup at: ' : 'Deliver to: '}
 *       {addressName}
 *     </div>
 *   )}
 * </FulfillmentDetails.AddressName>
 * ```
 */
export declare const AddressName: React.ForwardRefExoticComponent<AddressNameProps & React.RefAttributes<HTMLDivElement>>;
interface FulfillmentDateProps extends Omit<React.ComponentPropsWithoutRef<'input'>, 'children' | 'type' | 'value' | 'onChange' | 'min' | 'max'> {
    /** Whether to render as a child component */
    asChild?: boolean;
    /** Optional label text or element for the date picker */
    label?: React.ReactNode;
    /** Optional class name for the label element */
    labelClassName?: string;
    /** Optional class name for the wrapper div (only rendered when label is provided) */
    wrapperClassName?: string;
    /** Optional children render prop that receives the date picker props */
    children?: AsChildChildren<{
        selectedDate: Date | null;
        onDateChange: (date: Date) => void;
        availableDates: Array<{
            date: Date;
            hasAvailableSlots: boolean;
        }>;
        isValidDate: (date: Date) => boolean;
    }> | React.ReactNode;
}
/**
 * Headless component for fulfillment date selection
 * Provides date picker functionality with default input type="date" rendering
 *
 * @example
 * ```tsx
 * // Default usage - renders input type="date"
 * <FulfillmentDetails.FulfillmentDate />
 *
 * // With custom class name
 * <FulfillmentDetails.FulfillmentDate className="my-date-input" />
 *
 * // With label
 * <FulfillmentDetails.FulfillmentDate
 *   label="Date"
 *   labelClassName="block mb-1 text-sm"
 *   wrapperClassName="flex-1"
 *   className="my-date-input"
 * />
 *
 * // Using asChild pattern
 * <FulfillmentDetails.FulfillmentDate asChild>
 *   {({ selectedDate, onDateChange, minDate, maxDate }) => (
 *     <input
 *       type="date"
 *       value={selectedDate ? toISODateString(selectedDate) : ''}
 *       onChange={(e) => onDateChange(new Date(e.target.value))}
 *       min={toISODateString(minDate)}
 *       max={toISODateString(maxDate)}
 *     />
 *   )}
 * </FulfillmentDetails.FulfillmentDate>
 * ```
 */
export declare const FulfillmentDate: React.ForwardRefExoticComponent<FulfillmentDateProps & React.RefAttributes<HTMLInputElement>>;
interface AvailableTimeSlotsProps extends Omit<React.ComponentPropsWithoutRef<'div'>, 'children'> {
    /** Child components that will have access to time slot context */
    children: React.ReactNode;
}
/**
 * Container component for available time slots
 * Provides context for time slot selection
 * Does not render if no time slots are available
 *
 * @example
 * ```tsx
 * <FulfillmentDetails.AvailableTimeSlots>
 *   <FulfillmentDetails.TimeSlotOptions emptyState={<div>No slots</div>}>
 *     <FulfillmentDetails.TimeSlotOptionRepeater>
 *       {({ label, isSelected }) => (
 *         <div data-selected={isSelected}>{label}</div>
 *       )}
 *     </FulfillmentDetails.TimeSlotOptionRepeater>
 *   </FulfillmentDetails.TimeSlotOptions>
 * </FulfillmentDetails.AvailableTimeSlots>
 * ```
 */
export declare const AvailableTimeSlots: React.ForwardRefExoticComponent<AvailableTimeSlotsProps & React.RefAttributes<HTMLDivElement>>;
type TimeSlotRenderProps = {
    timeSlots: TimeSlotContextValue['timeSlots'];
    selectedTimeSlotId: string | null;
    onTimeSlotChange: (timeSlotId: string) => void;
    hasTimeSlots: boolean;
};
interface TimeSlotOptionsProps extends Omit<React.ComponentPropsWithoutRef<'div'>, 'children'> {
    /** Whether to render as a child component */
    asChild?: boolean;
    /** Child components or render prop that receives time slot data */
    children?: ((props: TimeSlotRenderProps) => React.ReactNode) | React.ReactNode;
    /** Optional content to display when no time slots are available */
    emptyState?: React.ReactNode;
}
/**
 * Container for time slot options list with empty state support
 * Supports both regular children and asChild pattern for custom rendering (e.g., select dropdowns)
 *
 * @example
 * ```tsx
 * // Regular usage with repeater
 * <FulfillmentDetails.TimeSlotOptions emptyState={<div>No time slots</div>}>
 *   <FulfillmentDetails.TimeSlotOptionRepeater>
 *     {({ label }) => <div>{label}</div>}
 *   </FulfillmentDetails.TimeSlotOptionRepeater>
 * </FulfillmentDetails.TimeSlotOptions>
 *
 * // With asChild for select dropdown
 * <FulfillmentDetails.TimeSlotOptions asChild>
 *   {({ timeSlots, selectedTimeSlotId, onTimeSlotChange }) => (
 *     <select value={selectedTimeSlotId || ''} onChange={(e) => onTimeSlotChange(e.target.value)}>
 *       {timeSlots.map(slot => <option key={slot.id} value={slot.id}>{slot.label}</option>)}
 *     </select>
 *   )}
 * </FulfillmentDetails.TimeSlotOptions>
 * ```
 */
export declare const TimeSlotOptions: React.ForwardRefExoticComponent<TimeSlotOptionsProps & React.RefAttributes<HTMLDivElement>>;
interface TimeSlotOptionRepeaterProps {
    /** Render prop that receives each time slot option data */
    children: (props: {
        id: string;
        label: string;
        startTime: Date;
        endTime: Date;
        isSelected: boolean;
        isAsap: boolean;
        onSelect: () => void;
    }) => React.ReactNode;
}
/**
 * Repeater component that renders children for each available time slot
 *
 * @example
 * ```tsx
 * <FulfillmentDetails.TimeSlotOptionRepeater>
 *   {({ label, isSelected, onSelect, isAsap }) => (
 *     <button onClick={onSelect} data-selected={isSelected}>
 *       {isAsap && '⚡ '}
 *       {label}
 *     </button>
 *   )}
 * </FulfillmentDetails.TimeSlotOptionRepeater>
 * ```
 */
export declare const TimeSlotOptionRepeater: React.FC<TimeSlotOptionRepeaterProps>;
interface FulfillmentTypeProps extends Omit<React.ComponentPropsWithoutRef<'div'>, 'children'> {
    /** Whether to render as a child component */
    asChild?: boolean;
    /** Label text for the schedule for later (preorder) option */
    scheduleLabel?: string;
    /** Aria label for the radio group */
    groupAriaLabel?: string;
    /** Template text for ASAP time display (e.g., "Ready in {0} min"). Use {0} for asapTime placeholder */
    asapTimeText?: string;
    /** Optional class name for the radio input elements */
    inputClassName?: string;
    /** Children render prop that receives the fulfillment type selection props */
    children?: AsChildChildren<{
        selectedType: FulfillmentTypeEnum;
        onTypeChange: (type: FulfillmentTypeEnum) => void;
        hasAsapOption: boolean;
        hasPreorderOption: boolean;
        asapTime: number | undefined;
        asapTimeRange: {
            minDuration?: number;
            maxDuration?: number;
        } | undefined;
    }> | React.ReactNode;
}
/**
 * Headless component for fulfillment type selection (ASAP or Schedule for later)
 * Provides radio button functionality with default rendering
 *
 * @example
 * ```tsx
 * // Default usage - renders radio buttons
 * <FulfillmentDetails.FulfillmentType />
 *
 * // With custom labels
 * <FulfillmentDetails.FulfillmentType
 *   scheduleLabel="Later"
 *   groupAriaLabel="When do you want your order?"
 * />
 *
 * // Using asChild pattern
 * <FulfillmentDetails.FulfillmentType asChild>
 *   {({ selectedType, onTypeChange, hasAsapOption, hasPreorderOption }) => (
 *     <div>
 *       {hasAsapOption && (
 *         <button
 *           onClick={() => onTypeChange(FulfillmentTypeEnum.ASAP)}
 *           data-selected={selectedType === FulfillmentTypeEnum.ASAP}
 *         >
 *           ASAP
 *         </button>
 *       )}
 *       {hasPreorderOption && (
 *         <button
 *           onClick={() => onTypeChange(FulfillmentTypeEnum.PREORDER)}
 *           data-selected={selectedType === FulfillmentTypeEnum.PREORDER}
 *         >
 *           Schedule for later
 *         </button>
 *       )}
 *     </div>
 *   )}
 * </FulfillmentDetails.FulfillmentType>
 * ```
 */
export declare const FulfillmentType: React.ForwardRefExoticComponent<FulfillmentTypeProps & React.RefAttributes<HTMLDivElement>>;
/**
 * Address fields that can be updated
 */
export interface DeliveryAddressFields {
    /** Street address line 1 */
    addressLine?: string;
    /** Street address line 2 (apartment, suite, etc.) */
    addressLine2?: string;
    /** City */
    city?: string;
    /** State/Province/Subdivision */
    subdivision?: string;
    /** Postal/ZIP code */
    postalCode?: string;
    /** Country */
    country?: string;
    /** Formatted full address string */
    formattedAddress?: string;
}
interface DeliveryAddressProps extends Omit<React.ComponentPropsWithoutRef<'div'>, 'children'> {
    /** Whether to render as a child component */
    asChild?: boolean;
    /** Label text for the address input */
    label?: React.ReactNode;
    /** Optional class name for the label element */
    labelClassName?: string;
    /** Optional class name for the wrapper div (only rendered when label is provided) */
    wrapperClassName?: string;
    /** Placeholder text for the address input */
    placeholder?: string;
    /** Optional class name for the input element */
    inputClassName?: string;
    /** Children render prop that receives the address data */
    children?: AsChildChildren<{
        address: DeliveryAddressFields | null;
        hasAddress: boolean;
        isDelivery: boolean;
        dispatchType: DispatchType | null;
        onAddressChange: (address: DeliveryAddressFields) => void;
        onAddressClear: () => void;
    }> | React.ReactNode;
}
/**
 * Headless component for editing the delivery address
 * Only renders when dispatch type is DELIVERY
 *
 * @example
 * ```tsx
 * // Default usage - renders input for address line
 * <FulfillmentDetails.DeliveryAddress
 *   label="Delivery Address"
 *   placeholder="Enter your address"
 * />
 *
 * // Using asChild pattern for custom rendering
 * <FulfillmentDetails.DeliveryAddress asChild>
 *   {({ address, hasAddress, isDelivery, onAddressChange, onAddressClear }) => (
 *     isDelivery && (
 *       <div>
 *         <input
 *           value={address?.addressLine || ''}
 *           onChange={(e) => onAddressChange({ ...address, addressLine: e.target.value })}
 *           placeholder="Street Address"
 *         />
 *         <input
 *           value={address?.city || ''}
 *           onChange={(e) => onAddressChange({ ...address, city: e.target.value })}
 *           placeholder="City"
 *         />
 *         <input
 *           value={address?.postalCode || ''}
 *           onChange={(e) => onAddressChange({ ...address, postalCode: e.target.value })}
 *           placeholder="ZIP Code"
 *         />
 *         {hasAddress && <button onClick={onAddressClear}>Clear</button>}
 *       </div>
 *     )
 *   )}
 * </FulfillmentDetails.DeliveryAddress>
 * ```
 */
export declare const DeliveryAddress: React.ForwardRefExoticComponent<DeliveryAddressProps & React.RefAttributes<HTMLDivElement>>;
export interface AddressPrediction {
    /** The human-readable name of the prediction */
    description?: string;
    /** The id of the prediction that can be used in place API */
    searchId?: string;
    /** Contains the main text of a prediction, usually the name of the place */
    mainText?: string;
    /** Contains the secondary text of a prediction, usually the location of the place */
    secondaryText?: string;
}
interface AddressPickerProps extends Omit<React.ComponentPropsWithoutRef<'div'>, 'children'> {
    /** Whether to render as a child component */
    asChild?: boolean;
    /** Placeholder text for the address input */
    placeholder?: string;
    /** Optional class name for the input element */
    inputClassName?: string;
    /** Optional class name for the predictions container */
    predictionsClassName?: string;
    /** Optional class name for individual prediction items */
    predictionClassName?: string;
    /** Optional class name for the prediction main text */
    predictionMainTextClassName?: string;
    /** Optional class name for the prediction secondary text */
    predictionSecondaryTextClassName?: string;
    /** Optional class name for the prediction description */
    predictionDescriptionClassName?: string;
    /** Optional class name for the error message */
    errorClassName?: string;
    /** Minimum input length before showing predictions (default: 2) */
    minInputLength?: number;
    /** Children render prop that receives the address picker props */
    children?: AsChildChildren<{
        inputValue: string;
        onInputChange: (value: string) => void;
        predictions: AddressPrediction[];
        isLoading: boolean;
        onPredictionSelect: (prediction: AddressPrediction) => Promise<void>;
        isDelivery: boolean;
        dispatchType: DispatchType | null;
        error: string | null;
    }> | React.ReactNode;
}
export declare const AddressPicker: React.ForwardRefExoticComponent<AddressPickerProps & React.RefAttributes<HTMLDivElement>>;
interface SaveButtonProps extends Omit<React.ComponentPropsWithoutRef<'button'>, 'children'> {
    /** Whether to render as a child component */
    asChild?: boolean;
    /** Text to display while saving */
    savingText?: string;
    /** Text to display when save is available */
    saveText?: string;
    /** Children render prop that receives the save state */
    children?: AsChildChildren<{
        onSave: () => void;
        isSaving: boolean;
        canSave: boolean;
        hasChanges: boolean;
        selectedTimeSlot: {
            id: string;
            startTime: Date;
            endTime: Date;
            dispatchType: DispatchType;
        } | null;
        dispatchType: DispatchType | null;
    }> | React.ReactNode;
}
/**
 * Headless component for saving fulfillment details
 * Saves the selected time slot to the FulfillmentsService
 *
 * @example
 * ```tsx
 * // Default usage - renders a save button
 * <FulfillmentDetails.SaveButton saveText="Confirm" savingText="Saving..." />
 *
 * // Using asChild pattern for custom rendering
 * <FulfillmentDetails.SaveButton asChild>
 *   {({ onSave, isSaving, canSave, hasChanges }) => (
 *     <button
 *       onClick={onSave}
 *       disabled={!canSave || isSaving}
 *       className={hasChanges ? 'bg-primary' : 'bg-secondary'}
 *     >
 *       {isSaving ? 'Saving...' : hasChanges ? 'Save Changes' : 'Confirm'}
 *     </button>
 *   )}
 * </FulfillmentDetails.SaveButton>
 * ```
 */
export declare const SaveButton: React.ForwardRefExoticComponent<SaveButtonProps & React.RefAttributes<HTMLButtonElement>>;
interface DispatchTypeSelectorProps extends Omit<React.ComponentPropsWithoutRef<'div'>, 'children'> {
    /** Child components that will have access to dispatch type context */
    children: React.ReactNode;
}
/**
 * Container component for dispatch type selection (pickup or delivery)
 * Provides context for child components to access dispatch type data
 * Does not render if no dispatch types are available
 *
 * @example
 * ```tsx
 * <FulfillmentDetails.DispatchTypeSelector>
 *   <FulfillmentDetails.DispatchTypeOptions emptyState={<div>No options</div>}>
 *     <FulfillmentDetails.DispatchTypeOptionRepeater>
 *       {({ type, isSelected, selectDispatchType }) => (
 *         <button onClick={() => selectDispatchType(type)}>
 *           {type} {isSelected && '✓'}
 *         </button>
 *       )}
 *     </FulfillmentDetails.DispatchTypeOptionRepeater>
 *   </FulfillmentDetails.DispatchTypeOptions>
 * </FulfillmentDetails.DispatchTypeSelector>
 * ```
 */
export declare const DispatchTypeSelector: React.ForwardRefExoticComponent<DispatchTypeSelectorProps & React.RefAttributes<HTMLDivElement>>;
interface DispatchTypeOptionsProps extends Omit<React.ComponentPropsWithoutRef<'div'>, 'children'> {
    /** Child components to render when dispatch types are available */
    children: React.ReactNode;
    /** Optional content to display when no dispatch types are available */
    emptyState?: React.ReactNode;
}
/**
 * Container for dispatch type options list with empty state support
 *
 * @example
 * ```tsx
 * <FulfillmentDetails.DispatchTypeOptions emptyState={<div>No options available</div>}>
 *   <FulfillmentDetails.DispatchTypeOptionRepeater>
 *     {({ type }) => <div>{type}</div>}
 *   </FulfillmentDetails.DispatchTypeOptionRepeater>
 * </FulfillmentDetails.DispatchTypeOptions>
 * ```
 */
export declare const DispatchTypeOptions: React.ForwardRefExoticComponent<DispatchTypeOptionsProps & React.RefAttributes<HTMLDivElement>>;
interface DispatchTypeOptionRepeaterProps {
    /** Render prop that receives each dispatch type option data */
    children: (props: {
        type: DispatchType;
        isSelected: boolean;
        selectDispatchType: (type: DispatchType) => void;
    }) => React.ReactNode;
}
/**
 * Repeater component that renders children for each available dispatch type
 *
 * @example
 * ```tsx
 * <FulfillmentDetails.DispatchTypeOptionRepeater>
 *   {({ type, isSelected, selectDispatchType }) => (
 *     <button
 *       onClick={() => selectDispatchType(type)}
 *       data-selected={isSelected}
 *     >
 *       {type}
 *     </button>
 *   )}
 * </FulfillmentDetails.DispatchTypeOptionRepeater>
 * ```
 */
export declare const DispatchTypeOptionRepeater: React.FC<DispatchTypeOptionRepeaterProps>;
export {};