/**
 * ImageDisplay – configurable multi-image display (primitive)
 *
 * Variants: single, carousel, hover, thumbStrip, thumbList. Use in ItemCard,
 * ProductCard, ProductGallery. Overridable via className/style.
 */
import React, { useState } from 'react';
import { clsx } from 'clsx';
import { ImageZoom } from './ImageZoom';
import { useIsMobile, useTouchTargetSize, useResponsiveGap } from '../../utils/responsive';
const imgBaseStyle = {
    width: '100%',
    height: 'auto',
    aspectRatio: '1',
    objectFit: 'cover',
    borderRadius: 4,
    backgroundColor: 'var(--seekora-bg-secondary, #f3f4f6)',
    display: 'block',
    overflow: 'hidden',
};
export function ImageDisplay({ images, variant = 'single', alt = '', className, style, carouselAutoplay = false, carouselIntervalMs = 4000, enableZoom = false, zoomMode = 'both', zoomLevel = 2.5, showDots = true, }) {
    const [index, setIndex] = useState(0);
    const [hovering, setHovering] = useState(false);
    const safeImages = Array.isArray(images) ? images.filter(Boolean) : [];
    const current = safeImages[index] ?? safeImages[0];
    // Responsive values
    const isMobile = useIsMobile();
    const arrowSize = useTouchTargetSize(32); // 44px on mobile, 32px on desktop
    const thumbSize = isMobile ? 56 : 48; // Larger thumbnails on mobile
    const responsiveGap = useResponsiveGap(8);
    if (safeImages.length === 0) {
        return React.createElement("div", { className: clsx('seekora-img-display', 'seekora-img-placeholder', className), style: { ...imgBaseStyle, ...style }, "aria-hidden": true });
    }
    if (variant === 'single') {
        if (enableZoom) {
            return (React.createElement(ImageZoom, { src: safeImages[0], alt: alt, mode: zoomMode, zoomLevel: zoomLevel, images: safeImages, currentIndex: 0, className: clsx('seekora-img-display', 'seekora-img-single', className), style: { ...imgBaseStyle, ...style } }));
        }
        return (React.createElement("img", { src: safeImages[0], alt: alt, className: clsx('seekora-img-display', 'seekora-img-single', className), style: { ...imgBaseStyle, ...style }, loading: "lazy" }));
    }
    if (variant === 'hover') {
        const showSecond = safeImages.length > 1 && hovering;
        const src = showSecond ? safeImages[1] : safeImages[0];
        const hoverImgStyle = style?.aspectRatio || style?.objectFit ? { ...imgBaseStyle, ...(style.aspectRatio ? { aspectRatio: style.aspectRatio } : {}), ...(style.objectFit ? { objectFit: style.objectFit } : {}) } : imgBaseStyle;
        if (enableZoom) {
            return (React.createElement("div", { className: clsx('seekora-img-display', 'seekora-img-hover', className), style: { position: 'relative', ...style }, onMouseEnter: () => setHovering(true), onMouseLeave: () => setHovering(false) },
                React.createElement(ImageZoom, { src: src, alt: alt, mode: zoomMode, zoomLevel: zoomLevel, images: safeImages, currentIndex: showSecond ? 1 : 0, className: "seekora-img-hover-img", style: hoverImgStyle })));
        }
        return (React.createElement("div", { className: clsx('seekora-img-display', 'seekora-img-hover', className), style: { position: 'relative', ...style }, onMouseEnter: () => setHovering(true), onMouseLeave: () => setHovering(false) },
            React.createElement("img", { src: src, alt: alt, className: "seekora-img-hover-img", style: hoverImgStyle, loading: "lazy" })));
    }
    if (variant === 'carousel') {
        const go = (delta) => {
            setIndex((i) => {
                const next = i + delta;
                if (next < 0)
                    return safeImages.length - 1;
                if (next >= safeImages.length)
                    return 0;
                return next;
            });
        };
        const carouselImgStyle = style?.aspectRatio || style?.objectFit ? { ...imgBaseStyle, ...(style.aspectRatio ? { aspectRatio: style.aspectRatio } : {}), ...(style.objectFit ? { objectFit: style.objectFit } : {}) } : imgBaseStyle;
        const mainImage = enableZoom ? (React.createElement(ImageZoom, { src: current, alt: alt, mode: zoomMode, zoomLevel: zoomLevel, images: safeImages, currentIndex: index, className: "seekora-img-carousel-main", style: carouselImgStyle })) : (React.createElement("img", { src: current, alt: alt, className: "seekora-img-carousel-main", style: carouselImgStyle, loading: "lazy" }));
        return (React.createElement("div", { className: clsx('seekora-img-display', 'seekora-img-carousel', className), style: { position: 'relative', ...style } },
            mainImage,
            safeImages.length > 1 && (React.createElement(React.Fragment, null,
                React.createElement("button", { type: "button", "aria-label": "Previous", className: "seekora-img-carousel-prev", style: arrowStyle(true, arrowSize), onMouseDown: (e) => { e.stopPropagation(); e.preventDefault(); go(-1); }, onClick: (e) => { e.stopPropagation(); e.preventDefault(); }, onMouseEnter: (e) => { e.currentTarget.style.backgroundColor = 'var(--seekora-carousel-btn-bg-hover, rgba(255,255,255,1))'; }, onMouseLeave: (e) => { e.currentTarget.style.backgroundColor = 'var(--seekora-carousel-btn-bg, rgba(255,255,255,0.9))'; } }, "\u2039"),
                React.createElement("button", { type: "button", "aria-label": "Next", className: "seekora-img-carousel-next", style: arrowStyle(false, arrowSize), onMouseDown: (e) => { e.stopPropagation(); e.preventDefault(); go(1); }, onClick: (e) => { e.stopPropagation(); e.preventDefault(); }, onMouseEnter: (e) => { e.currentTarget.style.backgroundColor = 'var(--seekora-carousel-btn-bg-hover, rgba(255,255,255,1))'; }, onMouseLeave: (e) => { e.currentTarget.style.backgroundColor = 'var(--seekora-carousel-btn-bg, rgba(255,255,255,0.9))'; } }, "\u203A"),
                showDots && (React.createElement("div", { className: "seekora-img-carousel-dots", style: {
                        position: 'absolute',
                        bottom: isMobile ? 12 : 8,
                        left: '50%',
                        transform: 'translateX(-50%)',
                        display: 'flex',
                        gap: isMobile ? 8 : 6,
                        padding: isMobile ? '8px 16px' : '6px 12px',
                        backgroundColor: 'var(--seekora-carousel-dots-bg, rgba(0,0,0,0.5))',
                        borderRadius: 12,
                        zIndex: 10,
                    } }, safeImages.map((_, i) => (React.createElement("button", { key: i, type: "button", "aria-label": `Go to image ${i + 1}`, onMouseDown: (e) => { e.stopPropagation(); e.preventDefault(); }, onClick: (e) => { e.stopPropagation(); e.preventDefault(); setIndex(i); }, style: {
                        width: isMobile ? 10 : 8,
                        height: isMobile ? 10 : 8,
                        minWidth: isMobile ? 44 : 32, // Ensure touch target
                        minHeight: isMobile ? 44 : 32,
                        borderRadius: '50%',
                        border: 'none',
                        padding: 0,
                        backgroundColor: i === index ? 'var(--seekora-carousel-dot-active, #fff)' : 'var(--seekora-carousel-dot, rgba(255,255,255,0.5))',
                        cursor: 'pointer',
                        transition: 'all 150ms ease',
                    } })))))))));
    }
    if (variant === 'thumbStrip' || variant === 'thumbList') {
        const thumbMainStyle = style?.aspectRatio || style?.objectFit ? { ...imgBaseStyle, ...(style.aspectRatio ? { aspectRatio: style.aspectRatio } : {}), ...(style.objectFit ? { objectFit: style.objectFit } : {}) } : imgBaseStyle;
        const mainImage = enableZoom ? (React.createElement(ImageZoom, { src: current, alt: alt, mode: zoomMode, zoomLevel: zoomLevel, images: safeImages, currentIndex: index, className: "seekora-img-thumb-main", style: thumbMainStyle })) : (React.createElement("img", { src: current, alt: alt, className: "seekora-img-thumb-main", style: thumbMainStyle, loading: "lazy" }));
        return (React.createElement("div", { className: clsx('seekora-img-display', 'seekora-img-thumbstrip', className), style: { display: 'flex', flexDirection: 'column', gap: responsiveGap, ...style } },
            mainImage,
            React.createElement("div", { className: "seekora-img-thumbs", style: { display: 'flex', gap: isMobile ? 6 : 4, overflowX: 'auto', paddingBottom: isMobile ? 6 : 4 } }, safeImages.map((src, i) => (React.createElement("button", { type: "button", key: i, className: clsx('seekora-img-thumb', i === index && 'seekora-img-thumb--active'), style: { flexShrink: 0, width: thumbSize, height: thumbSize, minWidth: thumbSize, minHeight: thumbSize, padding: 0, border: i === index ? '2px solid var(--seekora-primary)' : '1px solid transparent', borderRadius: 4, overflow: 'hidden', cursor: 'pointer', background: 'none' }, onMouseDown: (e) => { e.stopPropagation(); e.preventDefault(); setIndex(i); }, onClick: (e) => { e.stopPropagation(); e.preventDefault(); } },
                React.createElement("img", { src: src, alt: "", style: { width: '100%', height: '100%', objectFit: 'cover' } })))))));
    }
    return React.createElement("img", { src: current, alt: alt, className: clsx('seekora-img-display', className), style: { ...imgBaseStyle, ...style }, loading: "lazy" });
}
function arrowStyle(left, size = 32) {
    return {
        position: 'absolute',
        top: '50%',
        [left ? 'left' : 'right']: size >= 44 ? 4 : 8, // Less offset on mobile for larger buttons
        transform: 'translateY(-50%)',
        width: size,
        height: size,
        minWidth: size,
        minHeight: size,
        borderRadius: '50%',
        border: 'none',
        backgroundColor: 'var(--seekora-carousel-btn-bg, rgba(255, 255, 255, 0.9))',
        color: 'var(--seekora-carousel-btn-text, #111)',
        fontSize: size >= 44 ? '1.5rem' : '1.25rem', // Larger font on mobile
        fontWeight: 'bold',
        cursor: 'pointer',
        display: 'flex',
        alignItems: 'center',
        justifyContent: 'center',
        boxShadow: '0 2px 8px rgba(0,0,0,0.15)',
        zIndex: 10,
        transition: 'all 150ms ease',
    };
}
