import React from 'react'

import Button from '../Button/Button'
import Icon from '../Icons/Icon'
import { type IconColorList, type IconStringList } from '../Icons/Icon.models'
import { useMediaQuery } from '../../hooks/responsiveHooks'
import { type ToastTypes } from './Toast'
import styles from './_toast-content.module.scss'
import { type ButtonProps } from '../Button/Button.models'

export type ToastContentProps = {
  /** The content displayed inside of the component */
  text: React.ReactNode
  /** Determines the style of the component */
  type: ToastTypes
  /** Optional array of buttons to be added to the right of the main content. The maximum number of buttons is 2. */
  buttons?: [ButtonProps, ButtonProps?]
  /** Optional custom icon to be displayed on the left of the main content. */
  customIcon?: IconStringList
  /** Optional prop to add a test id to the ToastContent for QA testing */
  qaTestId?: string
}

const ToastContent = ({
  text,
  type,
  buttons,
  customIcon,
  qaTestId = 'toast-content',
}: ToastContentProps): React.JSX.Element => {
  const isMobile = useMediaQuery({ type: 'max', breakpoint: 'sm' })
  interface IconConfig {
    icon: IconStringList
    iconColor: IconColorList
  }

  const iconConfigs: Record<string, IconConfig> = {
    error: {
      icon: 'flag',
      iconColor: 'dark-red',
    },
    info: {
      icon: 'info',
      iconColor: 'dark-blue',
    },
    warning: {
      icon: 'info',
      iconColor: 'dark-yellow',
    },
    success: {
      icon: 'check',
      iconColor: 'dark-green',
    },
  }

  const iconConfig = iconConfigs[type]
  const { icon, iconColor } = iconConfig

  return (
    <div
      className={styles.container}
      data-testid='toast-content-container'
      qa-test-id={qaTestId}
    >
      <div className={styles.textAndIconContainer}>
        <Icon
          icon={customIcon ?? icon}
          color={iconColor}
          iconSize='16px'
          className={styles.iconStyles}
        />
        <span className={styles.text}>{text}</span>
      </div>
      {buttons ? (
        <div
          className={styles.buttonsContainer}
          // The buttons need to align with the text above, not the icon. This 23px represent the space on the left in order to align the buttons with the text.
          style={{ marginLeft: isMobile ? '23px' : 0 }}
        >
          {buttons.map((button, index) =>
            button ? (
              <Button
                {...button}
                styleType='text-red'
                key={index === 0 ? 'first-button' : 'second-button'}
                className={styles[type]}
              />
            ) : null,
          )}
        </div>
      ) : null}
    </div>
  )
}

export default ToastContent