/**
 * Bouton d'action distinctif avec couleurs et animations personnalisées
 */

import React from 'react';
import { Button } from 'primereact/button';
import { Tooltip } from 'primereact/tooltip';
import { 
  ACTION_BUTTON_THEMES, 
  BUTTON_SIZES, 
  BUTTON_VARIANTS, 
  ActionButtonType 
} from './ActionButtonStyles';
import ChantierMenuActions from './ChantierMenuActions';
import { ChantierActif } from '../../hooks/useDashboard';

interface ActionButtonProps {
  type: ActionButtonType;
  onClick?: () => void;
  disabled?: boolean;
  loading?: boolean;
  size?: 'xs' | 'sm' | 'md' | 'lg';
  showLabel?: boolean;
  className?: string;
  style?: React.CSSProperties;
  tooltipPosition?: 'top' | 'bottom' | 'left' | 'right';
  // Propriétés pour le menu
  chantier?: ChantierActif;
  onMenuAction?: (action: string, chantier: ChantierActif) => void;
}

const ActionButton: React.FC<ActionButtonProps> = ({
  type,
  onClick,
  disabled = false,
  loading = false,
  size = 'md',
  showLabel = false,
  className = '',
  style = {},
  tooltipPosition = 'top',
  chantier,
  onMenuAction
}) => {
  const theme = ACTION_BUTTON_THEMES[type];
  
  // ID unique pour le tooltip
  const buttonId = `action-btn-${type.toLowerCase()}-${Math.random().toString(36).substr(2, 9)}`;

  // Style minimal Atlantis Rounded Text - pas de styles custom
  const getButtonStyles = () => {
    return {
      ...style // Seulement les styles passés en props
    };
  };

  // Classes CSS strictes Atlantis Rounded Text
  const buttonClasses = [
    'p-button-text p-button-rounded p-button-sm', // Strict Atlantis + taille compacte
    disabled ? 'p-disabled' : '',
    className
  ].filter(Boolean).join(' ');

  // Rendu minimal Atlantis
  const buttonContent = (
    <>
      <i className={theme.icon} style={{ color: theme.colors.primary }} />
      {showLabel && <span className="ml-1">{theme.name}</span>}
    </>
  );

  // Si c'est le bouton MENU et qu'on a un chantier, utiliser le composant menu
  if (type === 'MENU' && chantier && onMenuAction) {
    return (
      <ChantierMenuActions 
        chantier={chantier} 
        onAction={onMenuAction} 
      />
    );
  }

  return (
    <>
      <Button
        id={buttonId}
        className={buttonClasses}
        style={getButtonStyles()}
        onClick={onClick}
        disabled={disabled}
        loading={loading}
        aria-label={theme.name}
      >
        {buttonContent}
      </Button>
      
      <Tooltip 
        target={`#${buttonId}`} 
        content={theme.name}
        position={tooltipPosition}
        showDelay={300}
        hideDelay={100}
      />
    </>
  );
};

export default ActionButton;