import { Media } from '@/payload-types'
import { GalleryItem } from '@/components/Gallery/Gallery'

type Items = {
  photo: string | Media;
  id?: string | null;
}[];

export const transformGallery = (items: Items) => {
  const galleryItems: GalleryItem[] = []

  items.forEach(item => {
    if (typeof item === "object" && typeof item.photo === "object" && item.id) {
      const thumbnail = item.photo.sizes?.gallery?.url;
      const tWidth = item.photo.sizes?.gallery?.width;
      const tHeight = item.photo.sizes?.gallery?.height;
      const image = item.photo.sizes?.tablet?.url;
      const iWidth = item.photo.sizes?.tablet?.width;
      const iHeight = item.photo.sizes?.tablet?.height;

      if (thumbnail && image && tWidth && tHeight && iWidth && iHeight) {
        galleryItems.push({
          alt: item.photo.alt,
          id: item.id,
          thumbnail: {
            src: thumbnail,
            width: tWidth,
            height: tHeight,
          },
          image: {
            src: image,
            width: iWidth,
            height: iHeight
          }
        })
      }
    }
  })

  return galleryItems
}