import React, { ReactNode } from 'react'
import BannerPrimitive from '../primitive/banner_primitive'
import { BannerProps, ConditionalDescription } from './banner'

// =================================
// ====== Component ================
// =================================

interface BannerCollapsibleProps extends BannerProps {
  /**
   * Hidden by default and shown when the banner is expanded.
   */
  children?: ReactNode
}

export function BannerCollapsible({
  appearance,
  children,
  description,
  heading,
  iconName,
  showIcon = true,
  style,
}: BannerCollapsibleProps) {
  const [expanded, setExpanded] = React.useState(false)

  const toggleCollapsible = () => {
    setExpanded(prev => !prev)
  }

  if (!description && !heading) return null

  return (
    <BannerPrimitive.Root appearance={appearance}>
      <BannerPrimitive.CollapsibleLayout
        onPress={toggleCollapsible}
        expanded={expanded}
        style={style}
      >
        {showIcon && <BannerPrimitive.StatusIcon iconName={iconName} />}
        <BannerPrimitive.Content>
          {Boolean(heading) && <BannerPrimitive.Heading>{heading}</BannerPrimitive.Heading>}
          <ConditionalDescription description={description} />
          {expanded ? children : null}
        </BannerPrimitive.Content>
      </BannerPrimitive.CollapsibleLayout>
    </BannerPrimitive.Root>
  )
}