/**
 * Responsive utilities for adaptive layouts across all screen sizes
 *
 * Provides hooks and utilities for:
 * - Responsive breakpoints
 * - Responsive grid columns
 * - Responsive spacing
 * - Responsive font sizes
 * - Touch target sizing
 */
import { useState, useEffect } from 'react';
/**
 * Standard breakpoints (in pixels)
 */
export const BREAKPOINTS = {
    xs: 0, // Extra small devices (portrait phones, < 576px)
    sm: 576, // Small devices (landscape phones, ≥ 576px)
    md: 768, // Medium devices (tablets, ≥ 768px)
    lg: 992, // Large devices (desktops, ≥ 992px)
    xl: 1200, // Extra large devices (large desktops, ≥ 1200px)
    xxl: 1400, // Extra extra large devices (larger desktops, ≥ 1400px)
};
/**
 * Get current breakpoint based on window width
 */
export function getCurrentBreakpoint(width) {
    if (width >= BREAKPOINTS.xxl)
        return 'xxl';
    if (width >= BREAKPOINTS.xl)
        return 'xl';
    if (width >= BREAKPOINTS.lg)
        return 'lg';
    if (width >= BREAKPOINTS.md)
        return 'md';
    if (width >= BREAKPOINTS.sm)
        return 'sm';
    return 'xs';
}
/**
 * Hook to get current breakpoint
 */
export function useBreakpoint() {
    // Always start with 'lg' to avoid hydration mismatch between server and client
    const [breakpoint, setBreakpoint] = useState('lg');
    useEffect(() => {
        const handleResize = () => {
            setBreakpoint(getCurrentBreakpoint(window.innerWidth));
        };
        handleResize();
        window.addEventListener('resize', handleResize);
        return () => window.removeEventListener('resize', handleResize);
    }, []);
    return breakpoint;
}
/**
 * Hook to check if current viewport matches breakpoint
 */
export function useMediaQuery(query) {
    // Always start with false to avoid hydration mismatch between server and client
    const [matches, setMatches] = useState(false);
    useEffect(() => {
        const mediaQuery = window.matchMedia(query);
        const handleChange = () => setMatches(mediaQuery.matches);
        handleChange();
        mediaQuery.addEventListener('change', handleChange);
        return () => mediaQuery.removeEventListener('change', handleChange);
    }, [query]);
    return matches;
}
/**
 * Check if mobile viewport (< 768px)
 */
export function useIsMobile() {
    return useMediaQuery(`(max-width: ${BREAKPOINTS.md - 1}px)`);
}
/**
 * Check if tablet viewport (768px - 991px)
 */
export function useIsTablet() {
    return useMediaQuery(`(min-width: ${BREAKPOINTS.md}px) and (max-width: ${BREAKPOINTS.lg - 1}px)`);
}
/**
 * Check if desktop viewport (>= 992px)
 */
export function useIsDesktop() {
    return useMediaQuery(`(min-width: ${BREAKPOINTS.lg}px)`);
}
/**
 * Get responsive grid columns based on breakpoint
 */
export function getResponsiveColumns(breakpoint, defaultColumns = 4) {
    switch (breakpoint) {
        case 'xs':
            return Math.min(defaultColumns, 1); // 1 column on extra small
        case 'sm':
            return Math.min(defaultColumns, 2); // 2 columns on small
        case 'md':
            return Math.min(defaultColumns, 3); // 3 columns on medium
        case 'lg':
            return Math.min(defaultColumns, 4); // 4 columns on large
        case 'xl':
            return Math.min(defaultColumns, 5); // 5 columns on extra large
        case 'xxl':
            return defaultColumns; // Full columns on extra extra large
        default:
            return defaultColumns;
    }
}
/**
 * Hook to get responsive grid columns
 */
export function useResponsiveColumns(defaultColumns = 4) {
    const breakpoint = useBreakpoint();
    return getResponsiveColumns(breakpoint, defaultColumns);
}
/**
 * Get responsive spacing value
 */
export function getResponsiveSpacing(breakpoint, spacing) {
    return spacing[breakpoint] ?? spacing.md ?? spacing.sm ?? spacing.xs ?? 12;
}
/**
 * Get responsive font size
 */
export function getResponsiveFontSize(breakpoint, sizes) {
    return sizes[breakpoint] ?? sizes.md ?? sizes.sm ?? sizes.xs ?? '1rem';
}
/**
 * Minimum touch target size (WCAG AAA)
 */
export const MIN_TOUCH_TARGET = 44; // 44x44px minimum for touch
/**
 * Get touch target size based on device type
 */
export function getTouchTargetSize(isMobile, baseSize = 32) {
    return isMobile ? Math.max(MIN_TOUCH_TARGET, baseSize) : baseSize;
}
/**
 * Hook to get responsive touch target size
 */
export function useTouchTargetSize(baseSize = 32) {
    const isMobile = useIsMobile();
    return getTouchTargetSize(isMobile, baseSize);
}
/**
 * Responsive value helper - returns different values based on breakpoint
 */
export function useResponsiveValue(values) {
    const breakpoint = useBreakpoint();
    return values[breakpoint] ?? values.default;
}
/**
 * Get responsive gap/padding for grids
 */
export function getResponsiveGap(breakpoint, baseGap = 12) {
    switch (breakpoint) {
        case 'xs':
            return Math.max(4, baseGap * 0.5); // 50% on extra small
        case 'sm':
            return Math.max(6, baseGap * 0.75); // 75% on small
        case 'md':
        case 'lg':
            return baseGap; // 100% on medium/large
        case 'xl':
        case 'xxl':
            return baseGap * 1.25; // 125% on extra large
        default:
            return baseGap;
    }
}
/**
 * Hook to get responsive gap
 */
export function useResponsiveGap(baseGap = 12) {
    const breakpoint = useBreakpoint();
    return getResponsiveGap(breakpoint, baseGap);
}
/**
 * Get responsive padding for containers
 */
export function getResponsivePadding(breakpoint, basePadding = 12) {
    switch (breakpoint) {
        case 'xs':
            return Math.max(8, basePadding * 0.67); // ~67% on extra small
        case 'sm':
            return Math.max(10, basePadding * 0.83); // ~83% on small
        case 'md':
        case 'lg':
            return basePadding; // 100% on medium/large
        case 'xl':
        case 'xxl':
            return basePadding * 1.33; // ~133% on extra large
        default:
            return basePadding;
    }
}
/**
 * Hook to get responsive padding
 */
export function useResponsivePadding(basePadding = 12) {
    const breakpoint = useBreakpoint();
    return getResponsivePadding(breakpoint, basePadding);
}
/**
 * CSS media query strings for use in style objects
 */
export const MEDIA_QUERIES = {
    xs: `(max-width: ${BREAKPOINTS.sm - 1}px)`,
    sm: `(min-width: ${BREAKPOINTS.sm}px)`,
    md: `(min-width: ${BREAKPOINTS.md}px)`,
    lg: `(min-width: ${BREAKPOINTS.lg}px)`,
    xl: `(min-width: ${BREAKPOINTS.xl}px)`,
    xxl: `(min-width: ${BREAKPOINTS.xxl}px)`,
    mobile: `(max-width: ${BREAKPOINTS.md - 1}px)`,
    tablet: `(min-width: ${BREAKPOINTS.md}px) and (max-width: ${BREAKPOINTS.lg - 1}px)`,
    desktop: `(min-width: ${BREAKPOINTS.lg}px)`,
};
/**
 * Helper to generate responsive CSS with media queries
 */
export function responsiveStyle(base, mobile, tablet, desktop) {
    // This returns base styles only - media queries should be handled via CSS-in-JS or CSS files
    // For inline styles, use the hooks instead
    return base;
}
