import React, { useCallback, useEffect, useMemo, useRef, useState } from 'react'; import ChevronLeftIcon from '@mui/icons-material/ChevronLeft'; import ChevronRightIcon from '@mui/icons-material/ChevronRight'; import CloseIcon from '@mui/icons-material/Close'; import Box from '@mui/material/Box'; import Button from '@mui/material/Button'; import CircularProgress from '@mui/material/CircularProgress'; import Dialog from '@mui/material/Dialog'; import FormControl from '@mui/material/FormControl'; import IconButton from '@mui/material/IconButton'; import InputLabel from '@mui/material/InputLabel'; import MenuItem from '@mui/material/MenuItem'; import Select from '@mui/material/Select'; import Typography from '@mui/material/Typography'; import { useCartContext } from './CartProvider'; import { formatPrice, getAttributeName, getAttributeSwatch, isInStock, stripHtml, } from './useFourthwall'; import type { FourthwallAttributeValue } from './types'; export function ProductModal() { const { selectedProduct, closeProductModal, addToCart, isLoading } = useCartContext(); const [currentImageIndex, setCurrentImageIndex] = useState(0); const [selectedVariantId, setSelectedVariantId] = useState(''); const [isAdding, setIsAdding] = useState(false); // Touch swipe handling const touchStartX = useRef(null); const touchEndX = useRef(null); const isOpen = selectedProduct !== null; // Reset state when product changes useEffect(() => { if (selectedProduct) { setCurrentImageIndex(0); setSelectedVariantId(selectedProduct.variants[0]?.id || ''); } }, [selectedProduct]); // Get unique attribute options (e.g., sizes, colors) // Skip 'description' as it's not a selectable attribute const attributeOptions = useMemo(() => { if (!selectedProduct) return {}; const options: Record = {}; selectedProduct.variants.forEach((variant) => { Object.entries(variant.attributes).forEach(([key, value]) => { // Skip description attribute - it's just a concatenation of other attrs if (key === 'description') return; if (!options[key]) { options[key] = []; } const name = getAttributeName(value); const swatch = getAttributeSwatch(value); // Only add if not already present if (!options[key].some((opt) => opt.name === name)) { options[key].push({ name, swatch }); } }); }); return options; }, [selectedProduct]); // Current selected variant const selectedVariant = useMemo(() => { return selectedProduct?.variants.find((v) => v.id === selectedVariantId); }, [selectedProduct, selectedVariantId]); // Images to show (variant-specific or product-level) const images = useMemo(() => { if (!selectedProduct) return []; // If variant has images, use those; otherwise use product images if (selectedVariant?.images && selectedVariant.images.length > 0) { return selectedVariant.images; } return selectedProduct.images; }, [selectedProduct, selectedVariant]); const handlePrevImage = useCallback(() => { setCurrentImageIndex((prev) => (prev > 0 ? prev - 1 : images.length - 1)); }, [images.length]); const handleNextImage = useCallback(() => { setCurrentImageIndex((prev) => (prev < images.length - 1 ? prev + 1 : 0)); }, [images.length]); // Handle keyboard navigation useEffect(() => { if (!isOpen) return; const handleKeyDown = (e: KeyboardEvent) => { if (e.key === 'ArrowLeft') { handlePrevImage(); } else if (e.key === 'ArrowRight') { handleNextImage(); } else if (e.key === 'Escape') { closeProductModal(); } }; window.addEventListener('keydown', handleKeyDown); return () => window.removeEventListener('keydown', handleKeyDown); }, [isOpen, handlePrevImage, handleNextImage, closeProductModal]); // Touch swipe handlers for image carousel const handleTouchStart = useCallback((e: React.TouchEvent) => { touchStartX.current = e.touches[0].clientX; touchEndX.current = null; }, []); const handleTouchMove = useCallback((e: React.TouchEvent) => { touchEndX.current = e.touches[0].clientX; }, []); const handleTouchEnd = useCallback(() => { if (touchStartX.current === null || touchEndX.current === null) return; const swipeDistance = touchStartX.current - touchEndX.current; const minSwipeDistance = 50; if (Math.abs(swipeDistance) > minSwipeDistance) { if (swipeDistance > 0) { // Swiped left -> next image handleNextImage(); } else { // Swiped right -> previous image handlePrevImage(); } } touchStartX.current = null; touchEndX.current = null; }, [handleNextImage, handlePrevImage]); const handleAddToCart = async () => { if (!selectedVariantId) return; setIsAdding(true); try { await addToCart(selectedVariantId, 1); closeProductModal(); } catch { // Error is handled by the cart context } finally { setIsAdding(false); } }; // Find variant by selected attributes (comparing by name string) const handleAttributeChange = (attributeName: string, newValue: string) => { if (!selectedProduct) return; // Build a map of current attribute names const currentAttrNames: Record = {}; if (selectedVariant) { Object.entries(selectedVariant.attributes).forEach(([key, val]) => { if (key !== 'description') { currentAttrNames[key] = getAttributeName(val); } }); } // Update with the new value currentAttrNames[attributeName] = newValue; // Find a variant that matches all current attribute names const matchingVariant = selectedProduct.variants.find((v) => Object.entries(currentAttrNames).every( ([key, name]) => v.attributes[key] && getAttributeName(v.attributes[key]) === name, ), ); if (matchingVariant) { setSelectedVariantId(matchingVariant.id); } else { // Fallback: find any variant with the selected attribute name const fallbackVariant = selectedProduct.variants.find( (v) => v.attributes[attributeName] && getAttributeName(v.attributes[attributeName]) === newValue, ); if (fallbackVariant) { setSelectedVariantId(fallbackVariant.id); } } }; if (!selectedProduct) return null; const hasMultipleImages = images.length > 1; const hasVariants = selectedProduct.variants.length > 1; return ( ); }