import type { ReactNode } from 'react'
import type { WidgetState } from '../stores/types'

/**
 * Props for the WidgetNoData wrapper component
 *
 * @example Basic usage
 * ```tsx
 * <WidgetNoData id="my-widget">
 *   <WidgetContent id="my-widget" />
 * </WidgetNoData>
 * ```
 *
 * @example With custom messages
 * ```tsx
 * <WidgetNoData
 *   id="my-widget"
 *   title="No results found"
 *   description="Try adjusting your filters"
 * >
 *   <WidgetContent id="my-widget" />
 * </WidgetNoData>
 * ```
 *
 * @example With custom isEmpty logic
 * ```tsx
 * <WidgetNoData
 *   id="my-widget"
 *   isEmpty={(data) => {
 *     const d = data as CustomData
 *     return !d?.items?.length
 *   }}
 * >
 *   <WidgetContent id="my-widget" />
 * </WidgetNoData>
 * ```
 */
export interface WidgetNoDataProps {
  /**
   * Widget ID to fetch state from store
   */
  id: WidgetState['id']

  /**
   * Children to render when data is available
   */
  children: ReactNode

  /**
   * Optional custom title for empty state
   * @default "No data available"
   */
  title?: string

  /**
   * Optional custom description for empty state
   * @default "There are no results for the combination of filters applied to your data. Try tweaking your filters, or zoom and pan the map to adjust filters"
   */
  description?: string

  /**
   * Optional custom function to determine if source data is empty.
   * Receives `sourceData` (pre-pipeline data from the API), not `data`
   * (post-pipeline). This allows distinguishing "API returned nothing"
   * from "pipeline tools filtered everything out".
   *
   * If not provided, uses default isEmpty logic that handles:
   * - null/undefined → empty
   * - [] (empty array) → empty
   * - [[]] (nested empty arrays) → empty
   * - {} (empty object) → empty
   * - Primitives → not empty
   * - Arrays/objects with content → not empty
   */
  isEmpty?: (data: unknown) => boolean
}