"use client";

import { useState } from "react";
import { useFormato } from "@/components/FormatoContext";
import { ZoomableImage, type GalleryView } from "@/components/ZoomableImage";

type Props = {
  views: GalleryView[]; // fotos fixas da obra (obra, emoldurada...)
  alt: string;
  fixedRatio?: boolean;
  simBase?: string | null; // prefixo dos arquivos de simulação por tamanho (impressões)
  sizes: { id: string; label: string }[];
};

// Nas impressões a galeria tem: 1) a obra limpa; 2) UMA simulação do quadro na parede, que muda com o formato escolhido
// (50 × 70 = a foto real, referência; 30 × 40 e 20 × 30 = o mesmo quadro, na mesma parede, em escala menor);
// 3) a composição do formato escolhido (obra + outras da série, no mesmo tamanho); 4) todos os formatos juntos.
// Ao trocar de formato, a galeria abre na simulação correspondente.
export function GaleriaObra({ views, alt, fixedRatio, simBase, sizes }: Props) {
  const { sizeId } = useFormato(sizes[0].id);
  // "mudou" fica verdadeiro depois da primeira troca de formato (padrão do React para estado derivado de outro estado)
  const [anterior, setAnterior] = useState(sizeId);
  const [mudou, setMudou] = useState(false);
  if (anterior !== sizeId) {
    setAnterior(sizeId);
    setMudou(true);
  }
  if (!simBase) return <ZoomableImage views={views} alt={alt} fixedRatio={fixedRatio} />;
  const [obra] = views;
  const t = sizes.find((s) => s.id === sizeId) ?? sizes[0];
  const legenda = `Simulação ${t.label} · moldura não inclusa`;
  const all: GalleryView[] = [
    obra,
    { key: `um-${t.id}`, label: `Simulação ${t.label}`, src: `${simBase}-um-${t.id}.jpg`, caption: legenda },
    { key: `sala-${t.id}`, label: `Simulação ${t.label} em composição`, src: `${simBase}-sala-${t.id}.jpg`, caption: legenda },
    { key: "todos", label: "Simulação todos os formatos", src: `${simBase}-todos.jpg`, caption: "Simulação · valor de cada obra · moldura não inclusa" },
  ];
  return <ZoomableImage key={t.id} views={all} alt={alt} fixedRatio={fixedRatio} initialIndex={mudou ? 1 : 0} />;
}