@oslokommune/punkt-react/src/components/fileupload/hooks/useImagePreview.ts

React komponentbibliotek til Punkt, et designsystem laget av Oslo Origo

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

import { navigateCyclic } from 'shared-utils/fileupload'

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) => navigateCyclic(prev, direction, previewableImages.length))
    },
    [previewableImages.length],
  )

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