Product Gallery

"use client"

import * as React from "react"

import {
  findVariant,
  getInitialSelection,
  getVariantImage,
  type Product,
} from "../variant-picker/product"
import { VariantPicker } from "../variant-picker/variant-picker"
import { ProductGallery } from "@/components/blocks/product-gallery/product-gallery"

export function ProductPage({ product }: { product: Product }) {
  const [selection, setSelection] = React.useState(() =>
    getInitialSelection(product)
  )
  const [imageId, setImageId] = React.useState(
    () => getVariantImage(product, findVariant(product, selection))?.id
  )

  return (
    <div className="grid gap-10 md:grid-cols-2">
      <ProductGallery
        images={product.images ?? []}
        activeId={imageId}
        onActiveChange={setImageId}
      />
      <VariantPicker
        product={product}
        value={selection}
        onValueChange={(next, variant) => {
          setSelection(next)
          const closest =
            variant ??
            product.variants.find((item) =>
              Object.entries(next).every(
                ([name, value]) => item.selectedOptions[name] === value
              )
            )
          const image = getVariantImage(product, closest)
          if (image) setImageId(image.id)
        }}
      />
    </div>
  )
}

import type { ProductMedia } from "@/components/blocks/product-gallery/gallery"

type ShopifyImage = {
  url: string
  altText: string | null
  width: number | null
  height: number | null
}

type ShopifyMedia =
  | { __typename: "MediaImage"; id: string; image: ShopifyImage | null }
  | {
      __typename: "Video"
      id: string
      alt: string | null
      previewImage: ShopifyImage | null
      sources: { url: string; mimeType: string; height: number }[]
    }
  | { __typename: "ExternalVideo" | "Model3d"; id: string }

function sized(url: string, width: number) {
  const next = new URL(url)
  next.searchParams.set("width", String(width))
  return next.toString()
}

export function fromShopifyMedia(
  nodes: ShopifyMedia[],
  productTitle: string
): ProductMedia[] {
  return nodes.flatMap((node): ProductMedia[] => {
    if (node.__typename === "MediaImage" && node.image) {
      return [
        {
          id: node.id,
          src: sized(node.image.url, 1200),
          zoomSrc: sized(node.image.url, 2400),
          thumbnailSrc: sized(node.image.url, 240),
          alt: node.image.altText ?? productTitle,
          width: node.image.width ?? undefined,
          height: node.image.height ?? undefined,
        },
      ]
    }
    if (node.__typename === "Video" && node.previewImage) {
      const source =
        node.sources
          .filter((item) => item.mimeType === "video/mp4")
          .sort((a, b) => a.height - b.height)
          .find((item) => item.height >= 720) ?? node.sources[0]
      if (!source) return []
      return [
        {
          id: node.id,
          type: "video",
          src: source.url,
          poster: sized(node.previewImage.url, 1200),
          thumbnailSrc: sized(node.previewImage.url, 240),
          alt: node.alt ?? `${productTitle} video`,
        },
      ]
    }
    return []
  })
}

"use client"

import * as React from "react"

import type { ProductMedia } from "@/components/blocks/product-gallery/gallery"
import { ProductGallery, ProductGallerySkeleton } from "@/components/blocks/product-gallery/product-gallery"

export function ProductImages({ handle }: { handle: string }) {
  const [media, setMedia] = React.useState<ProductMedia[] | null>(null)

  React.useEffect(() => {
    let cancelled = false
    fetch(`/api/products/${handle}/media`)
      .then((response) => response.json() as Promise<ProductMedia[]>)
      .then((items) => {
        if (!cancelled) setMedia(items)
      })
      .catch(() => {
        if (!cancelled) setMedia([])
      })
    return () => {
      cancelled = true
    }
  }, [handle])

  if (media === null) return <ProductGallerySkeleton thumbnails="bottom" />

  return (
    <ProductGallery
      images={media}
      aspect={1}
      fit="contain"
      thumbnails="bottom"
    />
  )
}