/**
 * Image Display - Handle image preview and display
 */

import { setCurrentImage } from '../state.js';

/**
 * Display image in main preview
 */
export async function displayMainImage(imageData) {
    const preview = document.getElementById('mainImagePreview');
    const img = document.getElementById('mainImage');
    const placeholder = preview.querySelector('.placeholder');
    
    if (!img || !placeholder) return;
    
    img.src = imageData;
    img.style.display = 'block';
    placeholder.style.display = 'none';
    
    setCurrentImage(imageData);
    
    // Reset zoom level and transform
    import('../state.js').then(module => {
        module.setZoomLevel(1);
    });
    img.style.transform = 'scale(1)';
    
    // Update zoom display
    const zoomDisplay = document.getElementById('zoomLevel');
    if (zoomDisplay) {
        zoomDisplay.textContent = 'Zoom: 100%';
    }
    
    // Enable zoom controls
    const zoomIn = document.getElementById('zoomIn');
    const zoomOut = document.getElementById('zoomOut');
    const zoomReset = document.getElementById('zoomReset');
    
    if (zoomIn) zoomIn.disabled = false;
    if (zoomOut) zoomOut.disabled = false;
    if (zoomReset) zoomReset.disabled = false;
}

/**
 * Display image in quick preview
 */
export function displayQuickImage(imageData) {
    const preview = document.getElementById('quickImagePreview');
    const img = document.getElementById('quickImage');
    const placeholder = preview.querySelector('.placeholder');
    
    if (!img || !placeholder) return;
    
    img.src = imageData;
    img.style.display = 'block';
    placeholder.style.display = 'none';
}

/**
 * Display cropped embryo
 */
export function displayCroppedEmbryo(index, detection, totalCount) {
    const img = document.getElementById('croppedImage');
    const counter = document.getElementById('embryoCounter');
    
    if (img) {
        img.src = detection.imageData;
        img.style.display = 'block';
    }
    
    if (counter) {
        counter.textContent = `Embryo ${index + 1} of ${totalCount}`;
    }
}