import React from 'react';
import { type StyleProp, type TextStyle, type ViewStyle } from 'react-native';
import type { SharedAccessibilityProps } from '@coinbase/cds-common/types/SharedAccessibilityProps';
import type { SharedProps } from '@coinbase/cds-common/types/SharedProps';
import { type BoxBaseProps, type BoxProps } from '../layout/Box';
import {
  CarouselAutoplayContext,
  type CarouselAutoplayContextValue,
  CarouselContext,
  type CarouselContextValue,
  useCarouselAutoplayContext,
  useCarouselContext,
} from './CarouselContext';
export type CarouselItemRenderChildren = (args: { isVisible: boolean }) => React.ReactNode;
export type CarouselItemBaseProps = Omit<BoxBaseProps, 'children'> &
  SharedAccessibilityProps & {
    /**
     * Unique identifier for this carousel item.
     */
    id: string;
    /**
     * Component to render as the carousel item content.
     * Can be a React node or a function that receives the visibility state.
     */
    children?: CarouselItemRenderChildren | React.ReactNode;
  };
export type CarouselItemProps = Omit<BoxProps, 'children'> & CarouselItemBaseProps;
export type CarouselItemComponent = React.FC<CarouselItemProps>;
export type CarouselItemElement = React.ReactElement<CarouselItemProps, CarouselItemComponent>;
export { CarouselAutoplayContext, CarouselContext, useCarouselAutoplayContext, useCarouselContext };
export type { CarouselAutoplayContextValue, CarouselContextValue };
export type CarouselNavigationComponentBaseProps = Pick<
  CarouselBaseProps,
  | 'autoplay'
  | 'nextPageAccessibilityLabel'
  | 'previousPageAccessibilityLabel'
  | 'startAutoplayAccessibilityLabel'
  | 'stopAutoplayAccessibilityLabel'
> & {
  /**
   * Callback for when the previous button is pressed.
   */
  onGoPrevious: () => void;
  /**
   * Callback for when the next button is pressed.
   */
  onGoNext: () => void;
  /**
   * Whether the previous button is disabled.
   */
  disableGoPrevious: boolean;
  /**
   * Whether the next button is disabled.
   */
  disableGoNext: boolean;
  /**
   * Whether autoplay is currently stopped.
   */
  isAutoplayStopped?: boolean;
  /**
   * Callback fired when the autoplay button is pressed.
   */
  onToggleAutoplay?: () => void;
};
export type CarouselNavigationComponentProps = CarouselNavigationComponentBaseProps & {
  /**
   * Custom styles for the component.
   */
  style?: StyleProp<ViewStyle>;
};
export type CarouselNavigationComponent = React.FC<CarouselNavigationComponentProps>;
export type CarouselPaginationComponentBaseProps = {
  /**
   * Total number of pages.
   */
  totalPages: number;
  /**
   * Index of the active page.
   */
  activePageIndex: number;
  /**
   * Callback for when a page is clicked.
   */
  onPressPage: (index: number) => void;
  /**
   * Accessibility label for the go to page button. You can optionally pass a function that will receive the pageIndex as an argument, and return an accessibility label string.
   */
  paginationAccessibilityLabel?: string | ((pageIndex: number) => string);
  /**
   * Visual variant for the pagination indicators.
   * When omitted, the default pagination component renders the current dot-style design.
   * @default 'dot'
   * @deprecated Prefer the default dot pagination or provide a custom `PaginationComponent`. This will be removed in a future major release.
   * @deprecationExpectedRemoval v10
   */
  variant?: 'pill' | 'dot';
};
export type CarouselPaginationComponentProps = CarouselPaginationComponentBaseProps & {
  /**
   * Custom styles for the component.
   */
  style?: StyleProp<ViewStyle>;
};
export type CarouselPaginationComponent = React.FC<CarouselPaginationComponentProps>;
export type CarouselImperativeHandle = {
  /**
   * The currently active page index.
   */
  activePageIndex: number;
  /**
   * The total number of pages.
   */
  totalPages: number;
  /**
   * Navigate to a specific page by index.
   */
  goToPage: (pageIndex: number) => void;
};
export type CarouselBaseProps = SharedProps &
  SharedAccessibilityProps &
  BoxBaseProps & {
    /**
     * Children are required to be CarouselItems because we calculate
     * their offset relative to the parent container.
     */
    children?: CarouselItemElement | CarouselItemElement[];
    /**
     * Defines the drag interaction behavior for the carousel.
     * 'none' disables dragging completely.
     * 'free' enables free-form dragging with natural deceleration when released.
     * 'snap' enables dragging with automatic snapping to targets when released,
     * defined by snapMode.
     * @default 'snap'
     */
    drag?: 'none' | 'free' | 'snap';
    /**
     * Specifies the pagination and navigation strategy for the carousel.
     * 'item' treats each item as a separate page for navigation, pagination, and snapping.
     * 'page' groups items into pages based on visible area for navigation, pagination, and snapping.
     * This affects page calculation, navigation button behavior, and snap targets when dragging.
     * @default 'page'
     */
    snapMode?: 'item' | 'page';
    /**
     * Hides the navigation arrows (previous/next buttons).
     */
    hideNavigation?: boolean;
    /**
     * Hides the pagination indicators (dots/bars showing current page).
     */
    hidePagination?: boolean;
    /**
     * @deprecated Use the default dot pagination, or provide a custom `PaginationComponent` if you need custom visuals. This will be removed in a future major release.
     * @deprecationExpectedRemoval v10
     */
    paginationVariant?: CarouselPaginationComponentBaseProps['variant'];
    /**
     * Custom component to render navigation arrows.
     * @default DefaultCarouselNavigation
     */
    NavigationComponent?: CarouselNavigationComponent;
    /**
     * Custom component to render pagination indicators.
     * @default DefaultCarouselPagination
     */
    PaginationComponent?: CarouselPaginationComponent;
    /**
     * Title to display above the carousel.
     * When a string is provided, it will be rendered with default title styling.
     * When a React element is provided, it completely replaces the default title component
     * and styling.
     */
    title?: React.ReactNode;
    /**
     * Accessibility label for the next page button.
     */
    nextPageAccessibilityLabel?: string;
    /**
     * Accessibility label for the previous page button.
     */
    previousPageAccessibilityLabel?: string;
    /**
     * Accessibility label for the go to page button.
     * When a string is provided, it is used as-is for all indicators.
     * When a function is provided, it receives the page index and returns a label.
     * @default (pageIndex) => `Go to page ${pageIndex + 1}`
     */
    paginationAccessibilityLabel?: string | ((pageIndex: number) => string);
    /**
     * Accessibility label for starting autoplay.
     * @default 'Play Carousel'
     */
    startAutoplayAccessibilityLabel?: string;
    /**
     * Accessibility label for stopping autoplay.
     * @default 'Pause Carousel'
     */
    stopAutoplayAccessibilityLabel?: string;
    /**
     * Callback fired when the page changes.
     */
    onChangePage?: (activePageIndex: number) => void;
    /**
     * Callback fired when the user starts dragging the carousel.
     */
    onDragStart?: () => void;
    /**
     * Callback fired when the user ends dragging the carousel.
     */
    onDragEnd?: () => void;
    /**
     * Enables infinite looping. When true, the carousel will seamlessly
     * loop from the last item back to the first.
     * @note Requires at least 2 pages worth of content to function.
     */
    loop?: boolean;
    /**
     * Whether autoplay is enabled for the carousel.
     */
    autoplay?: boolean;
    /**
     * The interval in milliseconds for autoplay.
     * @default 3000 (3 seconds)
     */
    autoplayInterval?: number;
  };
export type CarouselProps = CarouselBaseProps & {
  /**
   * Custom styles for the root element.
   */
  style?: StyleProp<ViewStyle>;
  /**
   * Custom styles for the component.
   */
  styles?: {
    /**
     * Custom styles for the root element.
     */
    root?: StyleProp<ViewStyle>;
    /**
     * Custom styles for the title element.
     */
    title?: StyleProp<TextStyle>;
    /**
     * Custom styles for the navigation element.
     */
    navigation?: StyleProp<ViewStyle>;
    /**
     * Custom styles for the pagination element.
     */
    pagination?: StyleProp<ViewStyle>;
    /**
     * Custom styles for the main carousel element.
     */
    carousel?: StyleProp<ViewStyle>;
    /**
     * Custom styles for the outer carousel container element.
     */
    carouselContainer?: StyleProp<ViewStyle>;
  };
};
export declare const Carousel: React.MemoExoticComponent<
  ({
    ref,
    ..._props
  }: CarouselProps & {
    ref?: React.Ref<CarouselImperativeHandle>;
  }) => import('react/jsx-runtime').JSX.Element
>;
//# sourceMappingURL=Carousel.d.ts.map