import React from 'react'

import Button from '../Button/Button'
import { type TooltipProps } from '../Tooltip/Tooltip'
import styles from './_form-footer.module.scss'
import { type ConfirmationItem } from '../Button/ButtonComponents/ConfirmationButton'
import { type ButtonProps } from '../Button/Button.models'
import { c } from '../../translations/LibraryTranslationService'

type FormButtonProps = {
  /** Required callout for each button */
  onClick: React.MouseEventHandler<HTMLButtonElement>
  /** Optionally disable a button */
  disabled?: ButtonProps['disabled']
  /** Optionally pass in children for a button */
  children?: React.ReactNode
  /** Optionally style the button */
  styleType?: ButtonProps['styleType']
  /** Optionally style the Button as destructive */
  destructive?: ButtonProps['destructive']
  /** Optionally pass in a tooltip content for the button */
  tooltip?: Omit<TooltipProps, 'children'>
  /** Optional prop to add a test id to the FormFooter buttons for QA testing */
  qaTestId?: string
}

// don't need an onclick for the save button if we are using popover with confirmation
type ButtonWithConfirmationProps = Omit<FormButtonProps, 'onClick'> & {
  confirmation: ConfirmationItem
}

type ButtonWithoutConfirmationProps = FormButtonProps & {
  confirmation?: never
}

type CancelButtonProps = FormButtonProps & {
  /** Optional prop to add a data-dd-action-name to the FormFooter buttons for DD testing */
  dataDDActionName?: string
}

type DetermineConfirmationButtonProps =
  | ButtonWithoutConfirmationProps
  | ButtonWithConfirmationProps

export type FormFooterProps = {
  /** Cancel button props */
  cancelButtonProps?: CancelButtonProps
  /** Save button props */
  saveButtonProps: DetermineConfirmationButtonProps
  /** Reset button props */
  resetButtonProps?: DetermineConfirmationButtonProps
  /** Optional prop to add a test id to the FormFooter for QA testing */
  qaTestId?: string
}

const FormFooter = ({
  cancelButtonProps,
  saveButtonProps,
  resetButtonProps,
  qaTestId = 'form-footer',
}: FormFooterProps): React.JSX.Element => {
  return (
    <div className={styles.container} qa-test-id={qaTestId}>
      {resetButtonProps ? (
        resetButtonProps?.confirmation ? (
          <Button
            styleType={resetButtonProps?.styleType ?? 'text-blue'}
            destructive={resetButtonProps?.destructive}
            as='confirmation'
            confirmation={resetButtonProps.confirmation}
            disabled={resetButtonProps.disabled}
            qaTestId={resetButtonProps?.qaTestId}
          >
            {resetButtonProps.children ?? c('reset')}
          </Button>
        ) : (
          <Button
            styleType={resetButtonProps?.styleType ?? 'text-blue'}
            destructive={resetButtonProps?.destructive}
            {...resetButtonProps}
            disabled={resetButtonProps.disabled}
            qaTestId={resetButtonProps?.qaTestId}
          >
            {resetButtonProps.children ?? c('reset')}
          </Button>
        )
      ) : (
        <div />
      )}
      <div className={styles.rightButtons}>
        {cancelButtonProps ? (
          <Button
            {...cancelButtonProps}
            {...(cancelButtonProps.dataDDActionName
              ? { 'data-dd-action-name': cancelButtonProps.dataDDActionName }
              : {})}
          >
            {cancelButtonProps.children ?? c('cancel')}
          </Button>
        ) : (
          <div />
        )}
        {saveButtonProps?.confirmation ? (
          <Button
            as='confirmation'
            confirmation={saveButtonProps.confirmation}
            styleType={saveButtonProps?.styleType ?? 'primary-blue'}
            destructive={saveButtonProps?.destructive}
            disabled={saveButtonProps.disabled}
            tooltip={
              saveButtonProps.tooltip && saveButtonProps.disabled
                ? saveButtonProps.tooltip
                : {}
            }
            qaTestId={saveButtonProps?.qaTestId}
          >
            {saveButtonProps.children ?? c('save')}
          </Button>
        ) : (
          <Button
            {...saveButtonProps}
            styleType={saveButtonProps?.styleType ?? 'primary-blue'}
            destructive={saveButtonProps?.destructive}
            disabled={saveButtonProps.disabled}
            tooltip={
              saveButtonProps.tooltip && saveButtonProps.disabled
                ? saveButtonProps.tooltip
                : {}
            }
            qaTestId={saveButtonProps?.qaTestId}
          >
            {saveButtonProps.children ?? c('save')}
          </Button>
        )}
      </div>
    </div>
  )
}

export default FormFooter