/* eslint-disable @typescript-eslint/no-explicit-any */
/* eslint-disable react-hooks/refs */
'use client';

import { useCallback, useRef, useState } from 'react';

import Lightbox from 'yet-another-react-lightbox';
import Captions from 'yet-another-react-lightbox/plugins/captions';
import 'yet-another-react-lightbox/plugins/captions.css';
import Counter from 'yet-another-react-lightbox/plugins/counter';
import 'yet-another-react-lightbox/plugins/counter.css';
import Fullscreen from 'yet-another-react-lightbox/plugins/fullscreen';
import Thumbnails from 'yet-another-react-lightbox/plugins/thumbnails';
import 'yet-another-react-lightbox/plugins/thumbnails.css';
import Zoom from 'yet-another-react-lightbox/plugins/zoom';
import 'yet-another-react-lightbox/styles.css';

import YouTubeVideo from '@/components/YoutubeVideo';

import type { AppLightboxSlide } from './lightboxSlides';

interface YarlFullscreenLightboxProps {
  slides: AppLightboxSlide[];
  index: number;
  open: boolean;
  onClose: () => void;
  onView?: (index: number) => void;
}

export default function YarlFullscreenLightbox({
  slides,
  index,
  open,
  onClose,
  onView,
}: YarlFullscreenLightboxProps) {
  const hasMultipleSlides = slides.length > 1;
  const [localIndex, setLocalIndex] = useState(index);
  const prevOpenRef = useRef(open);

  // sync localIndex from prop when the lightbox opens
  if (open && !prevOpenRef.current) {
    setLocalIndex(index);
  }
  prevOpenRef.current = open;

  const handleClose = useCallback(() => {
    onView?.(localIndex);
    onClose();
  }, [localIndex, onClose, onView]);

  if (!open || slides.length === 0) return null;

  return (
    <Lightbox
      open
      close={handleClose}
      index={localIndex}
      slides={slides}
      plugins={[Zoom, Captions, Fullscreen, ...(hasMultipleSlides ? [Counter, Thumbnails] : [])]}
      zoom={{ maxZoomPixelRatio: 3, scrollToZoom: true }}
      carousel={{
        padding: 60,
        finite: true,
        preload: 5,
      }}
      captions={{
        showToggle: true,
        hidden: false,
      }}
      counter={{
        container: {
          style: {
            top: 'unset',
            bottom: 0,
            left: 'unset',
            fontWeight: 700,
            fontSize: '20px',
          },
        },
      }}
      thumbnails={
        hasMultipleSlides
          ? { showToggle: true, hidden: false }
          : { showToggle: false, hidden: true }
      }
      render={{
        buttonPrev: hasMultipleSlides ? undefined : () => null,
        buttonNext: hasMultipleSlides ? undefined : () => null,
        slide: ({ slide }) => {
          const appSlide = slide as AppLightboxSlide;
          if (!appSlide.videoId) return undefined;

          return (
            <div className="flex h-full w-full items-center justify-center p-4">
              <div className="aspect-video w-full max-w-5xl">
                <YouTubeVideo id={appSlide.videoId} title={String(appSlide.title || '')} />
              </div>
            </div>
          );
        },
      }}
      styles={{
        root: { '--yarl__color_backdrop': 'rgba(0, 0, 0, 0.95)' } as any,
      }}
      on={{
        view: ({ index: nextIndex }) => setLocalIndex(nextIndex),
      }}
    />
  );
}