import React, { useEffect, useState } from 'react';
import styles from './ImageViewer.module.css';

interface ImageViewerProps {
  imageUrl: string;
  onClose: () => void;
}

const ImageViewer: React.FC<ImageViewerProps> = ({ imageUrl, onClose }) => {
  const [touchStart, setTouchStart] = useState<number | null>(null);
  const [touchEnd, setTouchEnd] = useState<number | null>(null);
  const [translateY, setTranslateY] = useState(0);
  
  // Минимальное расстояние свайпа для закрытия (в пикселях)
  const minSwipeDistance = 50;

  // Закрытие при клике на фон
  const handleBackdropClick = (e: React.MouseEvent<HTMLDivElement>) => {
    if (e.target === e.currentTarget) {
      handleClose();
    }
  };

  // Обработка свайпа вверх для закрытия (для мобильных устройств)
  const handleTouchStart = (e: React.TouchEvent) => {
    setTouchEnd(null);
    setTouchStart(e.targetTouches[0].clientY);
  };

  const handleTouchMove = (e: React.TouchEvent) => {
    setTouchEnd(e.targetTouches[0].clientY);
    
    if (touchStart) {
      // Вычисляем смещение (ограничиваем максимальное значение)
      const currentDiff = touchStart - e.targetTouches[0].clientY;
      // Используем положительное значение для движения вверх
      const newTranslate = Math.max(0, Math.min(currentDiff, 100));
      setTranslateY(newTranslate);
    }
  };

  const handleTouchEnd = () => {
    if (!touchStart || !touchEnd) return;
    
    const distance = touchStart - touchEnd;
    const isUpSwipe = distance > minSwipeDistance;
    
    if (isUpSwipe) {
      handleClose();
    } else {
      // Если свайп не завершен, плавно возвращаем изображение на место
      setTranslateY(0);
    }
    
    // Сбрасываем значения
    setTouchStart(null);
    setTouchEnd(null);
  };

  // Функция для закрытия просмотрщика
  const handleClose = () => {
    onClose();
  };

  // Закрытие при нажатии Escape
  useEffect(() => {
    const handleEscKey = (e: KeyboardEvent) => {
      if (e.key === 'Escape') {
        handleClose();
      }
    };

    // Блокируем прокрутку страницы при открытом модальном окне
    document.body.style.overflow = 'hidden';
    
    window.addEventListener('keydown', handleEscKey);
    
    return () => {
      // Восстанавливаем прокрутку при закрытии
      document.body.style.overflow = '';
      window.removeEventListener('keydown', handleEscKey);
    };
  }, [onClose]);

  return (
    <div 
      className={styles.backdrop} 
      onClick={handleBackdropClick}
      onTouchStart={handleTouchStart}
      onTouchMove={handleTouchMove}
      onTouchEnd={handleTouchEnd}
    >
      <div className={styles.content}>
        <button className={styles.closeButton} onClick={handleClose}>
          &times;
        </button>
        <img 
          src={imageUrl} 
          alt="Полноэкранный просмотр" 
          className={styles.fullImage} 
          style={{ transform: `translateY(-${translateY}px)` }}
        />
      </div>
    </div>
  );
};

export default ImageViewer;
