import type { FunctionComponent, Ref } from 'react';

import type { Styles } from '@cleartrip/ct-design-types';

type ScrollContainerEvent = {
  nativeEvent: {
    contentOffset: { x: number; y: number };
    layoutMeasurement: { height: number; width: number };
    contentSize: { height: number; width: number };
  };
};

/**
 * Item renderer prop bag passed to the caller's `RenderItem` component.
 */
export interface IListItemRendererProps<T, U> {
  item: T;
  index: number;
  itemData: U;
  isVisible: boolean;
}

export interface IVariableSizedListProps<T, U extends { data: T[] }> {
  data: T[];

  /**
   * Callback to be invoked when more rows must be loaded.
   * Should return a Promise that resolves once all data has finished loading.
   */
  loadMoreItems: () => Promise<void> | void;

  /** Key extractor used to uniquely identify a row. */
  itemKey: (item: T, index: number) => string;

  /**
   * Number of items (rows or columns) to render outside of the visible area.
   * Defaults to one item. Overscanning too much can negatively impact performance.
   */
  windowSize?: number;

  /**
   * Minimum number of rows to be loaded at a time; defaults to 10.
   * Used to batch requests to reduce HTTP traffic.
   */
  minimumBatchSize?: number | undefined;

  /**
   * Threshold at which to pre-fetch data; defaults to 15. Data will start
   * loading when the user scrolls within this many rows of the end.
   */
  threshold?: number | undefined;

  /**
   * Height of the list. For vertical lists this must be a number — it
   * drives how many rows will be rendered at once. For horizontal lists
   * this can be a number or a string (e.g. "50%").
   */
  height?: number | string;

  /** Total count of items in the data source (including not-yet-loaded ones). */
  itemCount?: number;

  /**
   * Width of the list. For horizontal lists this must be a number. For
   * vertical lists it can be a number or string (e.g. "50%").
   */
  width?: number | string;

  /**
   * Size of a single item in the windowed direction.
   * For vertical lists this is the row height; for horizontal lists,
   * the column width.
   */
  itemSize?: (index: number) => number;

  /**
   * Contextual data passed to the row renderer via the `itemData` prop.
   * Light-weight alternative to React's built-in context API; useful for
   * class-component row renderers.
   */
  itemData: U;

  /** Inline style applied to the scroll container (web) / content container (native). */
  style?: Styles;

  /**
   * Number of items to render outside the visible area.
   * Note: overscanning too much can negatively impact performance.
   */
  overScanCount: number;

  /** Forwarded ref for imperative handles (`scrollToEnd`, etc.). */
  ref?: Ref<ListRef>;

  /** Row component rendered per data item. */
  RenderItem: FunctionComponent<IListItemRendererProps<T, U>>;

  /**
   * Tag name passed to `document.createElement` to create the outer container
   * element (web only; in most cases the default "div" should be used).
   * On native, this is used as the `ListFooterComponent`.
   */
  outerElementType?: FunctionComponent<unknown>;

  /** Whether the list is virtualised. Reserved for future non-virtualised use. */
  isVirtualized?: boolean;

  /** Whether the list row is being recycled. */
  isRecycled?: boolean;

  onScroll?: (props: ListScrollEvent) => void;
  setCardHeight?: (index: number, size: number) => void;
  handleItemsRendered?: (props: unknown) => void;
  onItemsRendered?: (props: unknown) => void;
  ItemSeparatorComponent?: FunctionComponent<unknown>;
  /**
   * @native FlatList / ScrollView: taps on controls inside the list while the keyboard is open.
   * Defaults to `'handled'`. Ignored on web.
   */
  keyboardShouldPersistTaps?: 'handled' | 'always' | 'never';
}
export type ListScrollEvent = ScrollContainerEvent;
export type ListRef = {
  scrollToEnd: () => void;
};