/**
 * Gallery Widget (Live)
 * 
 * Image gallery with lightbox viewer.
 * Uses the shared Gallery component for parity with preview.
 * 
 * @since 1.0.0
 * @updated 1.6.0 - Migrated to shared component
 */

import { Gallery } from '@shared/components/widgets/Gallery';
import type { GlobalValues, FieldValue } from '@/utils/resolveAppearance';

interface GalleryImage {
    id?: number;
    url: string;
    title?: string;
    description?: string;
}

interface GalleryWidgetConfig {
    name?: string;
    description?: string;
    images: GalleryImage[];
    is_rtl?: boolean;
}

interface GalleryWidgetSettings {
    header?: {
        titleColor?: FieldValue;
        titleTypography?: Record<string, FieldValue | undefined>;
        titleIcon?: string;
        titleIconPosition?: 'before' | 'after';
        titleIconColor?: FieldValue;
        titleIconSize?: FieldValue;
        titleGap?: FieldValue;
        descriptionColor?: FieldValue;
        descriptionTypography?: Record<string, FieldValue | undefined>;
    };
    container?: {
        background?: FieldValue;
        borderRadius?: FieldValue;
        padding?: FieldValue;
        shadow?: FieldValue;
        borderStyle?: 'none' | 'solid' | 'dashed' | 'dotted';
        borderWidth?: { top: string; right: string; bottom: string; left: string };
        borderColor?: FieldValue;
    };
    grid?: {
        columns?: string;
        gap?: FieldValue;
    };
    image?: {
        borderRadius?: FieldValue;
        hoverScale?: string;
        shadow?: FieldValue;
        height?: FieldValue;
    };
    caption?: {
        background?: FieldValue;
        color?: FieldValue;
        font?: FieldValue;
        padding?: FieldValue;
        typography?: Record<string, FieldValue | undefined>;
        hoverOpacity?: FieldValue;
        hoverOffset?: FieldValue;
    };
    lightbox?: {
        overlayBackground?: FieldValue | string;
        overlayOpacity?: number;
        closeButtonColor?: FieldValue;
        navigationColor?: FieldValue;
        captionTitleColor?: FieldValue;
        captionDescriptionColor?: FieldValue;
        captionTitleTypography?: Record<string, FieldValue | undefined>;
        captionDescriptionTypography?: Record<string, FieldValue | undefined>;
        captionTypography?: Record<string, FieldValue | undefined>;
    };
}

interface GalleryWidgetProps {
    config: GalleryWidgetConfig;
    widgetSettings?: GalleryWidgetSettings;
    globalValues?: GlobalValues;
    language?: string;
}

export function GalleryWidget({ config, widgetSettings, globalValues = {}, language }: GalleryWidgetProps) {
    const { 
        name,
        description,
        images = [], 
        is_rtl = true 
    } = config;

    return (
        <Gallery
            globalValues={globalValues}
            widgetSettings={widgetSettings as any}
            context="live"
            isRTL={is_rtl}
            language={language}
            name={name}
            description={description}
            images={images}
        />
    );
}

export default GalleryWidget;
