import { useEffect, RefObject } from 'react'
import QRCode from 'qrcode'

export const useQRCode = (
  canvasRef: RefObject<HTMLCanvasElement>,
  url: string,
  isFetching: boolean,
  isSuccess: boolean
) => {
  useEffect(() => {
    if (!isFetching && isSuccess) {
      const generateQRCode = () => {
        if (!canvasRef.current) return;
        
        // Получаем текущую ширину канваса, гарантируя квадратный QR-код
        const canvas = canvasRef.current;
        const containerWidth = canvas.clientWidth;
        
        // Очищаем canvas перед новой генерацией
        const ctx = canvas.getContext('2d');
        ctx.clearRect(0, 0, canvas.width, canvas.height);
        
        // Устанавливаем одинаковые размеры для ширины и высоты (1:1)
        canvas.width = containerWidth;
        canvas.height = containerWidth;
        
        QRCode.toCanvas(
          canvas,
          url,
          { 
            width: containerWidth,
            margin: 1 // Небольшой отступ для лучшей читаемости
          },
          function (error) {
            if (error) console.error(error)
            console.log('success!')
          },
        )
      }
      
      // Генерируем QR-код
      generateQRCode();
      
      // Перегенерируем при изменении размера окна
      const handleResize = () => {
        generateQRCode();
      };
      
      window.addEventListener('resize', handleResize);
      
      return () => {
        window.removeEventListener('resize', handleResize);
      };
    }
  }, [isFetching, isSuccess, url, canvasRef])
} 