import React from 'react';
import { Button } from 'primereact/button';

interface ActionButtonProps {
    icon: string;
    tooltip: string;
    onClick: () => void;
    color?: 'default' | 'green' | 'blue' | 'orange' | 'red' | 'purple' | 'teal';
    disabled?: boolean;
    size?: 'small' | 'normal' | 'large';
}

/**
 * Composant de bouton d'action standardisé pour toute l'application
 * Utilise le style p-button-text avec des couleurs personnalisées
 */
export const ActionButton: React.FC<ActionButtonProps> = ({
    icon,
    tooltip,
    onClick,
    color = 'default',
    disabled = false,
    size = 'small'
}) => {
    // Classes de couleur pour les icônes
    const colorClasses = {
        default: '',
        green: 'text-green-500',
        blue: 'text-blue-500',
        orange: 'text-orange-500',
        red: 'text-red-500',
        purple: 'text-purple-500',
        teal: 'text-teal-500'
    };

    // Classes de taille
    const sizeClasses = {
        small: 'p-button-sm',
        normal: '',
        large: 'p-button-lg'
    };

    const buttonClasses = [
        'p-button-rounded',
        'p-button-text',
        sizeClasses[size],
        colorClasses[color]
    ].filter(Boolean).join(' ');

    return (
        <Button 
            icon={icon}
            className={buttonClasses}
            tooltip={tooltip}
            tooltipOptions={{ position: 'top' }}
            onClick={onClick}
            disabled={disabled}
        />
    );
};

// Boutons d'actions prédéfinis pour les cas d'usage courants
export const ViewButton: React.FC<Omit<ActionButtonProps, 'icon' | 'color'>> = (props) => (
    <ActionButton icon="pi pi-eye" color="default" {...props} />
);

export const EditButton: React.FC<Omit<ActionButtonProps, 'icon' | 'color'>> = (props) => (
    <ActionButton icon="pi pi-pencil" color="orange" {...props} />
);

export const DeleteButton: React.FC<Omit<ActionButtonProps, 'icon' | 'color'>> = (props) => (
    <ActionButton icon="pi pi-trash" color="red" {...props} />
);

export const StartButton: React.FC<Omit<ActionButtonProps, 'icon' | 'color'>> = (props) => (
    <ActionButton icon="pi pi-play" color="green" {...props} />
);

export const CompleteButton: React.FC<Omit<ActionButtonProps, 'icon' | 'color'>> = (props) => (
    <ActionButton icon="pi pi-check" color="green" {...props} />
);

export const ProgressButton: React.FC<Omit<ActionButtonProps, 'icon' | 'color'>> = (props) => (
    <ActionButton icon="pi pi-percentage" color="blue" {...props} />
);

export const PauseButton: React.FC<Omit<ActionButtonProps, 'icon' | 'color'>> = (props) => (
    <ActionButton icon="pi pi-pause" color="orange" {...props} />
);

export const ResumeButton: React.FC<Omit<ActionButtonProps, 'icon' | 'color'>> = (props) => (
    <ActionButton icon="pi pi-play" color="teal" {...props} />
);

export const DownloadButton: React.FC<Omit<ActionButtonProps, 'icon' | 'color'>> = (props) => (
    <ActionButton icon="pi pi-download" color="blue" {...props} />
);

export const PrintButton: React.FC<Omit<ActionButtonProps, 'icon' | 'color'>> = (props) => (
    <ActionButton icon="pi pi-print" color="purple" {...props} />
);

export const BudgetPlanButton: React.FC<Omit<ActionButtonProps, 'icon' | 'color'>> = (props) => (
    <ActionButton icon="pi pi-calculator" color="purple" {...props} />
);

export const BudgetTrackButton: React.FC<Omit<ActionButtonProps, 'icon' | 'color'>> = (props) => (
    <ActionButton icon="pi pi-chart-line" color="teal" {...props} />
);

/**
 * Container pour grouper les boutons d'actions
 */
interface ActionButtonGroupProps {
    children: React.ReactNode;
    align?: 'left' | 'center' | 'right';
    gap?: '1' | '2' | '3';
}

export const ActionButtonGroup: React.FC<ActionButtonGroupProps> = ({
    children,
    align = 'center',
    gap = '1'
}) => {
    const alignClasses = {
        left: 'justify-content-start',
        center: 'justify-content-center',
        right: 'justify-content-end'
    };

    return (
        <div className={`flex ${alignClasses[align]} gap-${gap}`}>
            {children}
        </div>
    );
};