import React from 'react'

import styles from './_floating-action-bar.module.scss'
import Button from '../Button/Button'
import DropdownMenu from '../DropdownMenu/DropdownMenu'
import Icon from '../Icons/Icon'
import { type IconStringList } from '../Icons/Icon.models'
import { useIsMobileView } from '../../hooks/useIsMobileView/useIsMobileView'
import { type DropdownAction } from '../DropdownMenu/DropdownMenu'
import { c } from '../../translations/LibraryTranslationService'
import { useToggle } from '../../hooks/useToggle/useToggle'

/**
 * Props for the FloatingActionBar component
 */
export interface FloatingActionBarProps {
  /** Array of selected items/boxes */
  selectedItemCount: number
  /** Total number of items in the dataset */
  totalItemCount: number
  /** Optional array of action buttons to display in the bar. */
  actions: DropdownAction[]
  /** Optional callback function to execute when the close button is clicked */
  onClose?: () => void
  /** Optional prop to add a test id to the FloatingActionBar for QA testing */
  qaTestId?: string
}

const FloatingActionBar = ({
  selectedItemCount,
  totalItemCount,
  actions,
  onClose,
  qaTestId = 'floating-action-bar',
}: FloatingActionBarProps) => {
  const isTailwindEnabled = useToggle('button_tailwind')
  const isMobile = useIsMobileView()
  const visibleActions = isMobile ? actions.slice(0, 1) : actions.slice(0, 4)
  const hiddenActions = isMobile
    ? actions.slice(1)
    : actions.length > 4
      ? actions.slice(4)
      : []

  return (
    <div
      className={`${styles.floatingBar} ${isMobile ? styles.mobile : ''}`}
      qa-test-id={qaTestId}
    >
      <div className={styles.floatingBarContent}>
        <span className={styles.closeButton} onClick={onClose}>
          <Icon
            icon='x'
            color='white'
            iconSize={isMobile ? '12px' : '16px'}
            qaTestId={`${qaTestId}-x-icon`}
          />
        </span>
        <span className={styles.fwBold}>
          {c('selectedCount', {
            selectedItemCount,
            totalItemCount,
          })}
        </span>
      </div>
      <div className={styles.floatingBarContent}>
        <div className={styles.actionButtons}>
          <div className={styles.actionButtonsGroup}>
            {visibleActions.map((action, index) =>
              action.confirmation ? (
                <Button
                  key={index}
                  as='confirmation'
                  disabled={action.disabled?.value}
                  className={`${styles.actionButton} ${styles.confirmationButton} ${isTailwindEnabled ? 'bg-transparent' : ''}`}
                  confirmation={{
                    ...action.confirmation,
                  }}
                  popoverProps={{ position: 'top' }}
                  tooltip={action.disabled?.tooltip}
                >
                  {action.icon ? (
                    <Icon
                      icon={action.icon as IconStringList}
                      color={action.disabled?.value ? 'gray' : 'white'}
                      iconSize={isMobile ? '12px' : '20px'}
                    />
                  ) : null}
                  {action.text}
                </Button>
              ) : (
                <Button
                  key={index}
                  as='unstyled'
                  onClick={action.callout}
                  disabled={action.disabled?.value}
                  className={`${styles.actionButton} ${isTailwindEnabled ? 'bg-transparent' : ''}`}
                  tooltip={action.disabled?.tooltip}
                >
                  {action.icon ? (
                    <Icon
                      icon={action.icon as IconStringList}
                      color={action.disabled?.value ? 'gray' : 'white'}
                      iconSize={isMobile ? '12px' : '20px'}
                    />
                  ) : null}
                  {action.text}
                </Button>
              ),
            )}
          </div>
          {hiddenActions.length > 0 ? (
            <div className={styles.hiddenActionsContainer}>
              <span className={styles.divider} />
              <DropdownMenu
                actions={hiddenActions as DropdownAction[]}
                trigger={
                  <Button as='unstyled'>
                    <Icon
                      icon='dotsVertical'
                      iconSize={isMobile ? '16px' : '20px'}
                      color='white'
                      className={styles.verticalActionButton}
                    />
                  </Button>
                }
                popoverProps={{ position: 'auto-end' }}
              />
            </div>
          ) : null}
        </div>
      </div>
    </div>
  )
}

export default FloatingActionBar