'use client'; import { forwardRef, useEffect, useImperativeHandle, useRef, useState } from 'react'; import { ArrowLeftIcon, ArrowRightIcon, CloseIcon, ImageIcon, PlayIcon } from '@/components/ui/icons'; import { PortfolioCarousel, type PortfolioCarouselHandle } from '@/components/ui/PortfolioCarousel'; import type { PortfolioItem } from '@/data/companyPortfolio'; /** Which shelf of the portfolio is open. `null` is the picker the visitor lands on * first, before they have chosen between flyers and videos. */ type Shelf = 'flyers' | 'videos'; type PortfolioDialogProps = { readonly companyName: string; readonly flyers: readonly PortfolioItem[]; readonly videos: readonly PortfolioItem[]; readonly color: string; readonly open: boolean; readonly onClose: () => void; }; /** Same shape as `CatalogViewerHandle`, so voice "siguiente"/"anterior" keeps working * the way it did when the portfolio was a single straight list of images. */ export type PortfolioDialogHandle = { readonly next: () => void; readonly previous: () => void; }; type ShelfCardProps = { readonly title: string; readonly count: number; readonly unitSingular: string; readonly unitPlural: string; readonly color: string; readonly icon: 'flyers' | 'videos'; readonly onOpen: () => void; }; /** * One of the two cards the portfolio opens on. A disabled card is the honest state for a * company that has not uploaded a video yet: the visitor sees the category exists and is * simply empty, instead of tapping through to a blank gallery. */ function ShelfCard({ title, count, unitSingular, unitPlural, color, icon, onOpen }: ShelfCardProps) { const empty = count === 0; const subtitle = empty ? 'Sin contenido por ahora' : `${count} ${count === 1 ? unitSingular : unitPlural}`; return ( ); } /** * The "Portafolio" HUD button's destination: first a short picker between the company's * flyers and its videos, then the carousel for whichever was chosen. * * Nothing here leaves the page. The reference media this is modelled on — a stand * visitor looking at what a business has produced — only works if the gallery overlays * the wheel and "Regresar" always brings them straight back, so the whole thing is one * full-screen native `` and never a new tab or a download. * * Kept deliberately light and white: the flyers and videos are the loud part, and the * brand's colour is used only as an accent (the hairline, the active dot, the player). */ export const PortfolioDialog = forwardRef(function PortfolioDialog( { companyName, flyers, videos, color, open, onClose }, ref, ) { const dialogRef = useRef(null); const carouselRef = useRef(null); const [shelf, setShelf] = useState(null); // Read inside the `cancel` handler below, which is bound once and must still see the // shelf the visitor is actually on. const shelfRef = useRef(null); useEffect(() => { shelfRef.current = shelf; }, [shelf]); useImperativeHandle(ref, () => ({ next: () => carouselRef.current?.next(), previous: () => carouselRef.current?.previous(), })); useEffect(() => { const dialog = dialogRef.current; if (dialog === null) return; if (open && !dialog.open) dialog.showModal(); if (!open && dialog.open) dialog.close(); }, [open]); useEffect(() => { const dialog = dialogRef.current; if (dialog === null) return; dialog.addEventListener('close', onClose); return () => { dialog.removeEventListener('close', onClose); }; }, [onClose]); // Escape steps back to the picker before it closes the dialog: inside a gallery it is // the most natural "go back", and the picker is the only screen where closing is what // the key is really being asked for. useEffect(() => { const dialog = dialogRef.current; if (dialog === null) return; const onCancel = (event: Event) => { if (shelfRef.current === null) return; event.preventDefault(); setShelf(null); }; dialog.addEventListener('cancel', onCancel); return () => { dialog.removeEventListener('cancel', onCancel); }; }, []); // Every visit starts on the picker, whichever shelf was being browsed last time. useEffect(() => { if (open) setShelf(null); }, [open]); const heading = shelf === 'flyers' ? 'Flyers' : shelf === 'videos' ? 'Videos' : `Portafolio de ${companyName}`; const items = shelf === 'flyers' ? flyers : shelf === 'videos' ? videos : []; return ( {open && (
{shelf !== null && ( )}

{heading}

{shelf === null && (

Elegí una categoría para ver el contenido

)}
{shelf === null ? (
setShelf('flyers')} /> setShelf('videos')} />
) : ( // `key` remounts the carousel per shelf, so switching from flyers to videos // always starts back at the first card instead of at a stale position. )}
)} ); });