import React from 'react'

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

type PopoverHeaderBase = {
  /** Determines the color of the background and icon. */
  styleType?: 'lighter-gray' | 'green' | 'red' | 'blue' | 'black'
  /** Optional function to call when using the close button. */
  closeCallout?: () => void
  /** Optional icon to include at the left of the header. */
  icon?: IconStringList
  /** Optionally remove the border radius at the top. Should be used for instances like `SideDrawer` */
  noBorderRadius?: boolean
  /** Optionally add a back button to the header. This is useful for cases like having multiple `SideDrawer` layers. */
  hasBackButton?: boolean
  /** Optional prop to add a test id to the PopoverHeader for QA testing */
  qaTestId?: string
}

type PopoverHeaderWithText = PopoverHeaderBase & {
  /** content for the header. This is required if a `logoUrl` is not present. */
  headerText: React.ReactNode
  logoUrl?: never
}

type PopoverHeaderWithLogo = PopoverHeaderBase & {
  headerText?: never
  /** Logo for the header. This is required if a `headerText` is not present. */
  logoUrl: string
}

export type PopoverHeaderProps = PopoverHeaderWithText | PopoverHeaderWithLogo

const styleTypeVariants = {
  'lighter-gray': 'bg-lighter-gray',
  black: 'bg-lighter-gray',
  red: 'bg-dark-red text-white',
  blue: 'bg-dark-blue text-white',
  green: 'bg-dark-green text-white',
} as const

const iconColors = {
  'lighter-gray': 'purple',
  black: 'purple',
  red: 'white',
  blue: 'white',
  green: 'white',
} as const

const PopoverHeader = ({
  headerText,
  icon,
  styleType = 'lighter-gray',
  closeCallout,
  noBorderRadius,
  logoUrl,
  hasBackButton,
  qaTestId = 'popover-header',
}: PopoverHeaderProps): React.JSX.Element => {
  return (
    <div
      className={cn(
        'flex h-12 items-center justify-between gap-4 border-b border-medium-purple px-4 text-dark-purple',
        noBorderRadius ? 'rounded-none' : 'rounded-t',
        styleTypeVariants[styleType],
      )}
      qa-test-id={qaTestId}
    >
      <div className='flex h-full items-center gap-2'>
        {hasBackButton ? (
          <Button
            as='unstyled'
            onClick={closeCallout}
            className='mr-2 h-full border-r border-medium-purple pr-4'
          >
            <Icon
              icon='arrowLong'
              className='back-button-icon rotate-180'
              color={iconColors[styleType]}
            />
          </Button>
        ) : null}
        {icon ? (
          <Icon
            icon={icon}
            iconSize='16px'
            className='popover-header-icon'
            color={iconColors[styleType]}
          />
        ) : null}
        {logoUrl ? (
          <img src={logoUrl} alt='logo' className='h-6' />
        ) : (
          // Using text-[12px] because we don't want to have a line-height here because it will break the alignment of the icon and the text.
          <span className='text-[12px] font-bold uppercase'>{headerText}</span>
        )}
      </div>
      {closeCallout ? (
        <Button as='unstyled' onClick={closeCallout}>
          <Icon
            icon='x'
            iconSize='16px'
            className='popover-header-icon'
            color={iconColors[styleType]}
            qaTestId={`${qaTestId}-x-icon`}
          />
        </Button>
      ) : null}
    </div>
  )
}

export default PopoverHeader