import React, { type Ref } from 'react'

import { cn } from '../../services/cn'
import Button from '../Button/Button'
import { type ButtonProps } from '../Button/Button.models'
import Icon from '../Icons/Icon'

export type BannerProps = {
  /** Primary text to display */
  primaryText: string
  /** Secondary text to display */
  secondaryText: string
  /** Type of Banner */
  type: 'informational' | 'issue'
  /** Class to be applied to the component */
  className?: string
  /** Optional Button to be used in the Banner. It appears on the right side of the Banner. */
  buttonProps?: ButtonProps
  /** Optionally hide the info Icon */
  hideInfoIcon?: boolean
  /** Optionally show a close button. This function is called when the close button is clicked. */
  closeButtonCallout?: () => void
  /** Optional prop to add a test id to the Banner for QA testing */
  qaTestId?: string
}

const bannerVariants = {
  informational: 'bg-dark-blue',
  issue: 'bg-dark-red',
} as const

const Banner = ({
  primaryText,
  secondaryText,
  className = '',
  type = 'informational',
  hideInfoIcon,
  closeButtonCallout,
  buttonProps,
  ref,
  qaTestId = 'banner',
}: BannerProps & {
  ref?: Ref<HTMLDivElement | null>
}): React.JSX.Element => {
  return (
    // Banner container with full viewport width minus padding
    <div
      id='banner'
      className={cn(
        // 32px is the left and right padding
        'relative w-[calc(100vw-32px)] p-4 md:col-start-1 md:col-end-3',
        bannerVariants[type],
        className,
      )}
      ref={ref as Ref<HTMLDivElement>}
      qa-test-id={qaTestId}
      data-testid='banner'
    >
      <div className='flex items-start gap-4'>
        {!hideInfoIcon ? (
          <Icon icon='info' iconSize='16px' color='white' />
        ) : null}
        <div className='flex flex-col items-start gap-4 text-white sm:w-full sm:flex-row sm:items-center sm:justify-between'>
          <div>
            <div className='text-sm font-semibold'>{primaryText}</div>
            <div
              className='mt-0.5 text-xs'
              dangerouslySetInnerHTML={{ __html: secondaryText }}
            />
          </div>
          {buttonProps || closeButtonCallout ? (
            <div className='flex items-center gap-4'>
              {buttonProps ? (
                <Button
                  {...buttonProps}
                  styleType='text-blue'
                  className='!text-white xs:self-start sm:self-auto [&::after]:!bg-white'
                />
              ) : null}
              {closeButtonCallout ? (
                <Button
                  as='unstyled'
                  onClick={closeButtonCallout}
                  className={cn(
                    'sm:relative sm:top-auto sm:right-auto', // Relative positioning on small screens and above with no top/right
                    'xs:absolute xs:top-4 xs:right-4', // Absolute positioning on extra small screens
                  )}
                >
                  <Icon
                    icon='x'
                    qaTestId={`${qaTestId}-x-icon`}
                    iconSize='12px'
                    color='white'
                  />
                </Button>
              ) : null}
            </div>
          ) : null}
        </div>
      </div>
    </div>
  )
}

Banner.displayName = 'Banner'
export default Banner