import React from 'react';
import { type StyleProp, type ViewStyle } from 'react-native';
import type { ThemeVars } from '@coinbase/cds-common/core/theme';
import type {
  ChartData,
  ChartFormatAmount,
  ChartFormatDate,
  ChartScrubParams,
  ChartTimeseries,
} from '@coinbase/cds-common/types/Chart';
import type { Placement } from '@coinbase/cds-common/types/Placement';
export * from '@coinbase/cds-common/types/Chart';
export type SparklineInteractiveBaseProps<Period extends string> = {
  /**
   * Type of fill to use for the area
   * @default 'gradient'
   */
  fillType?: 'dotted' | 'gradient';
  /**
   * Chart data bucketed by Period. Period is a string key
   */
  data?: Record<Period, ChartData>;
  /**
   * A list of periods that the chart will use. label is what is shown in the bottom of the chart and the value is the key.
   */
  periods: {
    label: string;
    value: Period;
  }[];
  /**
   * default period value that the chart will use
   */
  defaultPeriod: Period;
  /**
   * Callback when the user selects a new period.
   */
  onPeriodChanged?: (period: Period) => void;
  /**
   * Callback when the user starts scrubbing
   */
  onScrubStart?: () => void;
  /**
   * Callback when a user finishes scrubbing
   */
  onScrubEnd?: () => void;
  /**
   * Callback used when the user is scrubbing. This will be called for every data point change.
   */
  onScrub?: (params: ChartScrubParams<Period>) => void;
  /**
   * Disables the scrub user interaction from the chart
   *
   * @default false
   */
  disableScrubbing?: boolean;
  /**
   * function used to format the date that is shown in the bottom of the chart as the user scrubs
   */
  formatDate: ChartFormatDate<Period>;
  /**
   * Color of the line*
   */
  strokeColor: string;
  /**
   * Fallback shown in the chart when data is not available. This is usually a loading state.
   */
  fallback?: React.ReactNode;
  /**
   * If you use the default fallback then this specifies if the fallback line is decreasing or increasing
   */
  fallbackType?: 'positive' | 'negative';
  /**
   * Show the chart in compact height
   *
   * @default false
   */
  compact?: boolean;
  /**
   * Hides the period selector at the bottom of the chart
   *
   * @default false
   */
  hidePeriodSelector?: boolean;
  /**
   * Adds an area fill to the Sparkline
   *
   * @default true
   */
  fill?: boolean;
  /**
     Formats the date above the chart as you scrub. Omit this if you don't want to show the date as the user scrubs
     */
  formatHoverDate?: (date: Date, period: Period) => string;
  /**
     Formats the price above the chart as you scrub. Omit this if you don't want to show the price as the user scrubs
     */
  formatHoverPrice?: (price: number) => string;
  /**
   * Adds a header node above the chart. It will be placed next to the period selector on web.
   */
  headerNode?: React.ReactNode;
  /**
   *  Optional data to show on hover/scrub instead of the original sparkline. This allows multiple timeseries lines.
   *
   *  Period => timeseries list
   */
  hoverData?: Record<Period, ChartTimeseries[]>;
  /**
   * Optional gutter to add to the Period selector. This is useful if you choose to use the full screen width for the chart
   */
  timePeriodGutter?: ThemeVars.Space;
  /**
   * Optional placement prop that position the period selector component above or below the chart
   */
  periodSelectorPlacement?: Extract<Placement, 'above' | 'below'>;
  /** Scales the sparkline to show more or less variance. Use a number less than 1 for less variance and a number greater than 1 for more variance. If you use a number greater than 1 it may clip the boundaries of the sparkline. */
  yAxisScalingFactor?: number;
};
export type SparklineInteractiveDefaultFallback = Pick<
  SparklineInteractiveBaseProps<string>,
  'fallbackType' | 'compact'
>;
export type SparklineInteractiveHoverDateRefProps<Period extends string> = {
  update: (params: ChartScrubParams<Period>) => void;
};
export type SparklineInteractiveProps<Period extends string> =
  SparklineInteractiveBaseProps<Period> & {
    /**
     * Hides the min and max label
     *
     * @default false
     */
    hideMinMaxLabel?: boolean;
    /**
     * function used to format the amount of money used in the minMaxLabel
     */
    formatMinMaxLabel?: ChartFormatAmount;
    /**
     * The amount of padding to apply to the left and right of the chart. The chart width is calculated by (screen width - 2* gutter).
     *
     * @default 3
     */
    gutter?: ThemeVars.Space;
    /**
     * The chart applies horizontal padding by default which is specified by the gutter.
     * If the chart is placed in a container with padding then you can disable horizontal padding and set the gutter
     * to match the container padding.
     *
     */
    disableHorizontalPadding?: boolean;
    /**
     * Allows continuous gestures on the Sparkline chart to continue outside the bounds of the chart element.
     */
    allowOverflowGestures?: boolean;
    /**
     * Custom style for the root element.
     */
    style?: StyleProp<ViewStyle>;
    /**
     * Custom styles for the component.
     */
    styles?: {
      /**
       * Custom style for the header node.
       */
      header?: StyleProp<ViewStyle>;
      /**
       * Custom style for the root element.
       */
      root?: StyleProp<ViewStyle>;
    };
    /** Test ID for the header */
    headerTestID?: string;
  };
declare function SparklineInteractiveWithGeneric<Period extends string>({
  compact,
  gutter,
  ...props
}: SparklineInteractiveProps<Period>): import('react/jsx-runtime').JSX.Element;
/**
 * @deprecated Use LineChart instead. This will be removed in a future major release.
 * @deprecationExpectedRemoval v4
 */
export declare const SparklineInteractive: typeof SparklineInteractiveWithGeneric;
//# sourceMappingURL=SparklineInteractive.d.ts.map