import React, { useState } from 'react';
import { IoIosCloseCircle } from 'react-icons/io';
import { useLanguage } from '../../../../providers/language/LanguageContext';
import styles from '../ActionButton.module.css';

export interface RemoveActionButtonProps<T = any> {
  row: T;
  onRemove: (row: T) => Promise<void> | void;
  disabled?: boolean | { disabled: boolean; message?: string };
  loading?: boolean;
  className?: string;
  title?: string;
  idField?: string; // Field name for the unique identifier
  loadingStateName?: string; // Name of the loading state in hookData
  hookData?: any; // Optional hook data for loading state
}

export function RemoveActionButton<T = any>({
  row,
  onRemove,
  disabled = false,
  loading = false,
  className = '',
  title,
  idField = 'id',
  loadingStateName = 'removingItems',
  hookData
}: RemoveActionButtonProps<T>) {
  const { t } = useLanguage();
  const [internalLoading, setInternalLoading] = useState(false);
  
  // Extract disabled state and tooltip message
  const isDisabled = typeof disabled === 'boolean' ? disabled : disabled?.disabled || false;
  const disabledMessage = typeof disabled === 'object' ? disabled?.message : undefined;

  const handleClick = async (e: React.MouseEvent) => {
    e.stopPropagation();
    if (!isDisabled && !loading && !internalLoading) {
      setInternalLoading(true);
      try {
        await onRemove(row);
      } finally {
        setInternalLoading(false);
      }
    }
  };

  const buttonTitle = title || t('files.action.remove', 'Remove from workflow');
  
  // Use hookData removing state if available, otherwise use passed loading
  const loadingState = hookData?.[loadingStateName];
  const itemId = (row as any)[idField];
  const actualIsRemoving = loadingState?.has?.(itemId) || false;
  const isLoading = loading || actualIsRemoving || internalLoading;

  // Determine the final button title (tooltip)
  const finalTitle = isDisabled && disabledMessage ? disabledMessage : buttonTitle;

  return (
    <button
      onClick={handleClick}
      className={`${styles.actionButton} ${styles.remove} ${isLoading ? styles.loading : ''} ${isDisabled ? styles.disabled : ''} ${className}`}
      title={finalTitle}
      disabled={isDisabled || isLoading}
    >
      <span className={styles.actionIcon}>
        {isLoading ? '⏳' : <IoIosCloseCircle />}
      </span>
    </button>
  );
}

export default RemoveActionButton;