import React from 'react'
import type { ToastOptions } from 'react-toastify'
import { toast as toastify } from 'react-toastify'

import ToastContent from './ToastContent'
import { type ToastContentProps } from './ToastContent'

export type ToastTypes = 'success' | 'error' | 'warning' | 'info'

export type ToastProps = {
  /** Type of toast notification.
   * 'success' | 'error' | 'warning' | 'info'
   */
  type: ToastTypes
  /** Content to show as message. */
  message: React.ReactNode
  /** Configuration custom toast options. */
  config?: ToastOptions
  /** Optional array of buttons to be added to the right of the message. The maximum number of buttons is 2. */
  buttons?: ToastContentProps['buttons']
  /** Optional prop to add a test id to the Toast for QA testing */
  qaTestId?: string
}

export const toast = ({
  type,
  message,
  buttons,
  config,
  qaTestId = 'toast',
}: ToastProps): ReturnType<(typeof toastify)[ToastTypes]> => {
  return toastify[type](
    <ToastContent
      type={type}
      text={message}
      buttons={buttons}
      qaTestId={qaTestId}
    />,
    {
      ...(type === 'error' ? { autoClose: false } : {}),
      ...config,
    },
  )
}

export const dismissToast = (
  toastId?: string | number,
): ReturnType<(typeof toastify)['dismiss']> => toastify.dismiss(toastId)