import React, { isValidElement, ReactElement } from 'react'
import { ViewStyle } from 'react-native'
import BannerPrimitive, {
  type BannerStatusIconProps,
  type BannerRootProps,
} from '../primitive/banner_primitive'

type descriptionUnion = string | ReactElement | undefined

export interface BannerProps {
  /**
   * Changes the status color for the background, text, and icon.
   * Sets a preset status icon.
   */
  appearance?: BannerRootProps['appearance']
  /**
   * Renders the banner's main text.
   * If some of the text is interactive it can also take `BannerPrimitive.Link` wrapped in `BannerPrimitive.Text`.
   */
  description?: descriptionUnion
  /**
   * Renders the banner's heading text.
   */
  heading?: string
  /**
   * Overrides the preset status icon.
   */
  iconName?: BannerStatusIconProps['iconName']
  /**
   * Hides the status icon. By default, the status icon is shown.
   */
  showIcon?: boolean
  /**
   * Adds a style to the banner.
   */
  style?: ViewStyle
}

export function Banner({
  appearance,
  description,
  heading,
  iconName,
  showIcon = true,
  style,
}: BannerProps) {
  if (!description && !heading) return null

  return (
    <BannerPrimitive.Root appearance={appearance}>
      <BannerPrimitive.StaticLayout style={style}>
        {showIcon && <BannerPrimitive.StatusIcon iconName={iconName} />}
        <BannerPrimitive.Content>
          {Boolean(heading) && <BannerPrimitive.Heading>{heading}</BannerPrimitive.Heading>}
          <ConditionalDescription description={description} />
        </BannerPrimitive.Content>
      </BannerPrimitive.StaticLayout>
    </BannerPrimitive.Root>
  )
}

export function ConditionalDescription({ description }: { description: descriptionUnion }) {
  switch (true) {
    case description === undefined:
      return null
    case isValidElement(description):
      return description
    default:
      return <BannerPrimitive.Text>{description}</BannerPrimitive.Text>
  }
}