import React from 'react';
import { useClicknHold } from './index';

// Базові стилі для всіх кнопок
const baseStyles: React.CSSProperties = {
  position: 'relative',
  padding: '10px 20px',
  border: 'none',
  borderRadius: '4px',
  cursor: 'pointer',
  overflow: 'hidden',
  fontFamily: 'sans-serif',
};

// Компонент прогрес-бару
const ProgressBar: React.FC<{ progress: number; color: string }> = ({ progress, color }) => (
  <div
    style={{
      position: 'absolute',
      bottom: 0,
      left: 0,
      height: '3px',
      width: `${progress * 100}%`,
      backgroundColor: color,
      transition: 'width 0.1s linear',
    }}
  />
);

// Базова кнопка
export const HoldButton: React.FC<{
  children?: React.ReactNode;
  duration?: number;
  onComplete?: () => void;
  className?: string;
  style?: React.CSSProperties;
}> = ({ children = 'Hold', duration = 2000, onComplete, className, style }) => {
  const [progress, setProgress] = React.useState(0);
  const { isHolding, handlers } = useClicknHold({
    duration,
    onProgress: setProgress,
    onComplete,
  });

  return (
    <button
      {...handlers}
      className={className}
      style={{
        ...baseStyles,
        backgroundColor: '#4CAF50',
        color: 'white',
        ...style,
      }}
    >
      {children}
      <ProgressBar progress={progress} color="rgba(255,255,255,0.5)" />
    </button>
  );
};

// Кнопка видалення
export const DeleteHold: React.FC<{
  onDelete?: () => void;
  className?: string;
  style?: React.CSSProperties;
}> = ({ onDelete, className, style }) => {
  const [progress, setProgress] = React.useState(0);
  
  const { isHolding, handlers } = useClicknHold({
    duration: 2000,
    onProgress: setProgress,
    onComplete: onDelete,
  });

  return (
    <button
      {...handlers}
      className={className}
      style={{
        ...baseStyles,
        backgroundColor: '#f44336',
        color: 'white',
        ...style,
      }}
    >
      {isHolding ? `Deleting... ${Math.round(progress * 100)}%` : 'Hold to Delete'}
      <ProgressBar progress={progress} color="rgba(255,255,255,0.5)" />
    </button>
  );
};

// Кнопка підтвердження
export const ConfirmHold: React.FC<{
  onConfirm?: () => void;
  className?: string;
  style?: React.CSSProperties;
}> = ({ onConfirm, className, style }) => {
  const [progress, setProgress] = React.useState(0);
  
  const { isHolding, handlers } = useClicknHold({
    duration: 1500,
    onProgress: setProgress,
    onComplete: onConfirm,
  });

  return (
    <button
      {...handlers}
      className={className}
      style={{
        ...baseStyles,
        backgroundColor: '#2196F3',
        color: 'white',
        ...style,
      }}
    >
      {isHolding ? `Confirming... ${Math.round(progress * 100)}%` : 'Hold to Confirm'}
      <ProgressBar progress={progress} color="rgba(255,255,255,0.5)" />
    </button>
  );
};

// Кнопка завантаження
export const LoadHold: React.FC<{
  onLoad?: () => void;
  className?: string;
  style?: React.CSSProperties;
}> = ({ onLoad, className, style }) => {
  const [progress, setProgress] = React.useState(0);
  
  const { isHolding, handlers } = useClicknHold({
    duration: 2500,
    onProgress: setProgress,
    onComplete: onLoad,
  });

  return (
    <button
      {...handlers}
      className={className}
      style={{
        ...baseStyles,
        backgroundColor: '#9C27B0',
        color: 'white',
        ...style,
      }}
    >
      {isHolding ? `Loading... ${Math.round(progress * 100)}%` : 'Hold to Load'}
      <ProgressBar progress={progress} color="rgba(255,255,255,0.5)" />
    </button>
  );
};