import { useEffect, useRef } from 'react';

interface SkinViewerProps {
  width?: number;
  height?: number;
  skinUrl?: string;
  capeUrl?: string;
  walkingSpeed?: number;
  autoRotate?: boolean;
}

export default function SkinViewer({
  width = 300,
  height = 400,
  skinUrl,
  capeUrl,
  walkingSpeed = 0.5,
  autoRotate = true,
}: SkinViewerProps) {
  const canvasRef = useRef<HTMLCanvasElement>(null);
  const viewerRef = useRef<any>(null);

  useEffect(() => {
    if (!canvasRef.current) return;

    // Используем динамический импорт для обхода проблемы ESM/CommonJS
    const initSkinViewer = async () => {
      try {
        const skinview3d = await import('skinview3d');

        // Создаем просмотрщик скина по документации
        const viewer = new skinview3d.SkinViewer({
          canvas: canvasRef.current,
          width,
          height,
          skin:
            skinUrl ||
            'https://static.planetminecraft.com/files/resource_media/skin/original-steve-15053860.png',
          model: 'auto-detect',
          cape: capeUrl || undefined,
        });

        // Настраиваем вращение
        viewer.autoRotate = autoRotate;

        // Настраиваем анимацию ходьбы
        viewer.animation = new skinview3d.WalkingAnimation();
        viewer.animation.speed = walkingSpeed;

        // Сохраняем экземпляр для очистки
        viewerRef.current = viewer;
      } catch (error) {
        console.error('Ошибка при инициализации skinview3d:', error);
      }
    };

    initSkinViewer();

    // Очистка при размонтировании
    return () => {
      if (viewerRef.current) {
        viewerRef.current.dispose();
      }
    };
  }, [width, height, skinUrl, capeUrl, walkingSpeed, autoRotate]);

  return (
    <canvas
      ref={canvasRef}
      width={width}
      height={height}
      style={{ display: 'block' }}
    />
  );
}
