import React from 'react'

import FormFooter from '../Form/FormFooter'
import PopoverHeader from '../PopoverHeader/PopoverHeader'
import styles from './_confirmation-popover.module.scss'
import { type ConfirmationItem } from '../Button/ButtonComponents/ConfirmationButton'
import { type IconStringList } from '../Icons/Icon.models'
import { c } from '../../translations/LibraryTranslationService'

export type ConfirmationPopoverContentProps = Pick<
  ConfirmationItem,
  | 'type'
  | 'confirmCallout'
  | 'header'
  | 'body'
  | 'confirmButtonText'
  | 'cancelButtonText'
  | 'cancelCallout'
> & {
  /** Optional prop to add a test id to the ConfirmationPopoverContent for QA testing */
  qaTestId?: string
}

const ConfirmationPopoverContent = ({
  type,
  header,
  body,
  cancelCallout,
  confirmCallout,
  confirmButtonText,
  cancelButtonText,
  qaTestId = 'confirmation-popover-content',
}: ConfirmationPopoverContentProps): React.JSX.Element => {
  let icon: IconStringList = 'check'
  let buttonColor:
    | 'primary'
    | 'primary-red'
    | 'primary-green'
    | 'primary-blue' = 'primary-blue'
  switch (type) {
    case 'red':
      icon = 'flag'
      buttonColor = 'primary-red'
      break
    case 'blue':
      icon = 'info'
      buttonColor = 'primary-blue'
      break
    case 'green':
      icon = 'check'
      buttonColor = 'primary-green'
      break
    case 'black':
      buttonColor = 'primary'
      break
    default:
      break
  }
  return (
    <div className={styles.popoverWrapper} qa-test-id={qaTestId}>
      <PopoverHeader headerText={header} styleType={type} icon={icon} />
      <div className={styles.popoverBody}>{body}</div>
      <div className={styles.popoverFooter}>
        <FormFooter
          {...(cancelCallout
            ? {
                cancelButtonProps: {
                  onClick: cancelCallout,
                  children: cancelButtonText ?? c('cancel'),
                },
              }
            : {})}
          saveButtonProps={{
            onClick: confirmCallout,
            children: confirmButtonText ?? c('confirm'),
            styleType: buttonColor,
            destructive: type === 'red',
          }}
        />
      </div>
    </div>
  )
}

export default ConfirmationPopoverContent