import { jsx } from 'react/jsx-runtime';
import React__default, { useRef } from 'react';
import { motion } from 'motion/react';
import { cn } from '../../../utils/cn.js';
import { heatmapTheme } from './Heatmap.theme.js';

/**
 * Individual heatmap cell component with hover animations and color intensity
 */
const HeatmapCellInner = ({ data, intensity, minOpacity = 0.1, color = 'var(--color-primary)', // Default to primary color (correct CSS variable)
className, onClick, onHover, onMouseMove, onLeave, children, }) => {
    // Calculate cell color and opacity based on intensity
    const getColorStyle = (intensity) => {
        // Only return empty object for null values (will use CSS class)
        if (data.value === null) {
            return {};
        }
        // Calculate base opacity from intensity
        let baseOpacity;
        // For 0 values, use minOpacity
        if (data.value === 0) {
            baseOpacity = minOpacity;
        }
        else {
            // Map intensity (0-1) to opacity levels (minOpacity-1.0) in 10% increments
            const opacityStep = Math.ceil(intensity * 10) / 10; // Round up to nearest 10%
            baseOpacity = Math.max(minOpacity, Math.min(1.0, opacityStep));
        }
        // Use the passed color prop with calculated opacity
        return {
            backgroundColor: color,
            opacity: baseOpacity
        };
    };
    const getColorClass = (intensity) => {
        // Only use gray colors for null values (missing data)
        if (data.value === null) {
            return 'bg-transparent border border-gray-200/80';
        }
        // For non-null values, we'll use inline styles
        return '';
    };
    const handleClick = () => {
        if (onClick) {
            onClick(data);
        }
    };
    const handleMouseEnter = (event) => {
        if (onHover) {
            onHover(data, event);
        }
    };
    const handleMouseMove = (event) => {
        if (onMouseMove) {
            onMouseMove(data, event);
        }
    };
    const handleMouseLeave = () => {
        if (onLeave) {
            onLeave();
        }
    };
    const handleAnimationEnd = () => {
        // Remove animation class after flicker completes to prevent interference with opacity
        if (containerRef.current) {
            containerRef.current.classList.remove('animate-[flicker_0.6s_ease-out_forwards]');
        }
    };
    const containerRef = useRef(null);
    const flickerDelayRef = useRef(`${Math.random() * 0.3}s`);
    return (jsx(motion.div, { ref: containerRef, className: cn(heatmapTheme.cellBaseStyle, getColorClass(), onClick && 'cursor-pointer', className), style: {
            ...getColorStyle(intensity),
            // CSS custom properties for the animation
            '--flicker-delay': flickerDelayRef.current,
            animationDelay: `var(--flicker-delay)`,
        }, onAnimationEnd: handleAnimationEnd, onClick: handleClick, onMouseEnter: handleMouseEnter, onMouseMove: handleMouseMove, onMouseLeave: handleMouseLeave, 
        // Framer Motion animations (just for hover/tap, not initial load)
        whileHover: {
            scale: 1.025,
            transition: { duration: 0.15, ease: 'easeOut' }
        }, whileTap: {
            scale: 0.95,
            transition: { duration: 0.1, ease: 'easeOut' }
        }, 
        // Accessibility
        role: "gridcell", tabIndex: onClick ? 0 : -1, "aria-label": `Value: ${data.value}, X: ${data.x}, Y: ${data.y}`, onKeyDown: (e) => {
            if ((e.key === 'Enter' || e.key === ' ') && onClick) {
                e.preventDefault();
                onClick(data);
            }
        }, children: children && (jsx("div", { className: "absolute inset-0 flex items-center justify-center text-sm font-medium text-gray-700 dark:text-gray-300", children: children })) }));
};
const HeatmapCell = React__default.memo(HeatmapCellInner);

export { HeatmapCell };
