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

import { TFileAndTransfer, TFileId } from '../types'

export const useImagePreview = (previewableImages: TFileAndTransfer[]) => {
  const [isOpen, setIsOpen] = useState(false)
  const [currentIndex, setCurrentIndex] = useState(0)
  const modalRef = useRef<HTMLDialogElement>(null)

  const open = useCallback(
    (fileId: TFileId) => {
      const index = previewableImages.findIndex((item) => item.fileId === fileId)
      if (index >= 0) {
        setCurrentIndex(index)
        setIsOpen(true)
        modalRef.current?.showModal()
      }
    },
    [previewableImages],
  )

  const close = useCallback(() => {
    setIsOpen(false)
    modalRef.current?.close()
  }, [])

  const navigate = useCallback(
    (direction: 'prev' | 'next') => {
      if (previewableImages.length === 0) return

      setCurrentIndex((prev) => {
        if (direction === 'prev') {
          return prev <= 0 ? previewableImages.length - 1 : prev - 1
        }
        return prev >= previewableImages.length - 1 ? 0 : prev + 1
      })
    },
    [previewableImages.length],
  )

  return { isOpen, currentIndex, modalRef, open, close, navigate }
}