/**
 * Responsive Utilities and Breakpoints
 *
 * Shared responsive design utilities for all dropdown components
 */
import { useState, useEffect } from 'react';
// ============================================================================
// Breakpoints
// ============================================================================
export const breakpoints = {
    xs: 0,
    sm: 480,
    md: 768,
    lg: 1024,
    xl: 1280,
};
// ============================================================================
// Media Query Helpers
// ============================================================================
export const mediaQueries = {
    xs: `@media (max-width: ${breakpoints.sm - 1}px)`,
    sm: `@media (min-width: ${breakpoints.sm}px) and (max-width: ${breakpoints.md - 1}px)`,
    md: `@media (min-width: ${breakpoints.md}px) and (max-width: ${breakpoints.lg - 1}px)`,
    lg: `@media (min-width: ${breakpoints.lg}px) and (max-width: ${breakpoints.xl - 1}px)`,
    xl: `@media (min-width: ${breakpoints.xl}px)`,
    mobile: `@media (max-width: ${breakpoints.md - 1}px)`,
    tablet: `@media (min-width: ${breakpoints.md}px) and (max-width: ${breakpoints.lg - 1}px)`,
    desktop: `@media (min-width: ${breakpoints.lg}px)`,
    touch: '@media (hover: none) and (pointer: coarse)',
    mouse: '@media (hover: hover) and (pointer: fine)',
};
// ============================================================================
// Touch-Friendly Sizing
// ============================================================================
export const touchTargets = {
    /** Minimum touch target size per WCAG guidelines */
    minimum: 44,
    /** Comfortable touch target size */
    comfortable: 48,
    /** Large touch target for primary actions */
    large: 56,
};
// ============================================================================
// Responsive Spacing
// ============================================================================
export const responsiveSpacing = {
    mobile: {
        xs: '4px',
        sm: '8px',
        md: '12px',
        lg: '16px',
        xl: '20px',
    },
    desktop: {
        xs: '4px',
        sm: '8px',
        md: '16px',
        lg: '24px',
        xl: '32px',
    },
};
// ============================================================================
// Responsive Typography
// ============================================================================
export const responsiveTypography = {
    mobile: {
        xs: '11px',
        sm: '13px',
        md: '15px',
        lg: '17px',
        xl: '20px',
        xxl: '24px',
    },
    desktop: {
        xs: '11px',
        sm: '12px',
        md: '14px',
        lg: '16px',
        xl: '18px',
        xxl: '24px',
    },
};
// ============================================================================
// CSS Generation Helpers
// ============================================================================
/**
 * Generate responsive CSS class string
 */
export const generateResponsiveCSS = (componentName) => `
  /* Base responsive styles for ${componentName} */
  .${componentName} {
    --seekora-touch-target: ${touchTargets.minimum}px;
    --seekora-spacing-mobile: ${responsiveSpacing.mobile.md};
    --seekora-spacing-desktop: ${responsiveSpacing.desktop.md};
  }

  /* Mobile-first base */
  ${mediaQueries.mobile} {
    .${componentName} {
      width: 100% !important;
      max-width: 100vw !important;
      left: 0 !important;
      right: 0 !important;
      border-radius: 0 !important;
      margin-top: 0 !important;
    }
    
    .${componentName} [data-item],
    .${componentName} [role="option"] {
      min-height: var(--seekora-touch-target);
      padding: 12px 16px;
    }
    
    .${componentName} button {
      min-height: var(--seekora-touch-target);
      min-width: var(--seekora-touch-target);
    }
  }

  /* Touch device optimizations */
  ${mediaQueries.touch} {
    .${componentName} [data-item]:active,
    .${componentName} [role="option"]:active {
      background-color: var(--seekora-bg-hover, #f0f0f0) !important;
    }
    
    /* Disable hover states on touch */
    .${componentName} [data-item]:hover,
    .${componentName} [role="option"]:hover {
      background-color: transparent;
    }
  }

  /* Tablet adjustments */
  ${mediaQueries.tablet} {
    .${componentName} {
      max-width: 90vw;
      margin: 8px auto;
    }
  }

  /* Desktop optimizations */
  ${mediaQueries.desktop} {
    .${componentName} [data-item],
    .${componentName} [role="option"] {
      min-height: 40px;
    }
  }
`;
/**
 * Inject responsive styles into document
 */
export const injectResponsiveStyles = (componentName) => {
    const styleId = `seekora-responsive-${componentName}`;
    // Don't inject if already exists
    if (typeof document !== 'undefined' && document.getElementById(styleId)) {
        return;
    }
    if (typeof document !== 'undefined') {
        const style = document.createElement('style');
        style.id = styleId;
        style.textContent = generateResponsiveCSS(componentName);
        document.head.appendChild(style);
    }
};
export const useResponsive = () => {
    const [state, setState] = useState({
        isMobile: false,
        isTablet: false,
        isDesktop: true,
        isTouch: false,
        width: typeof window !== 'undefined' ? window.innerWidth : 1024,
        height: typeof window !== 'undefined' ? window.innerHeight : 768,
        breakpoint: 'lg',
    });
    useEffect(() => {
        if (typeof window === 'undefined')
            return;
        const getBreakpoint = (width) => {
            if (width < breakpoints.sm)
                return 'xs';
            if (width < breakpoints.md)
                return 'sm';
            if (width < breakpoints.lg)
                return 'md';
            if (width < breakpoints.xl)
                return 'lg';
            return 'xl';
        };
        const updateState = () => {
            const width = window.innerWidth;
            const height = window.innerHeight;
            const breakpoint = getBreakpoint(width);
            const isTouch = 'ontouchstart' in window || navigator.maxTouchPoints > 0;
            setState({
                isMobile: width < breakpoints.md,
                isTablet: width >= breakpoints.md && width < breakpoints.lg,
                isDesktop: width >= breakpoints.lg,
                isTouch,
                width,
                height,
                breakpoint,
            });
        };
        updateState();
        window.addEventListener('resize', updateState);
        return () => window.removeEventListener('resize', updateState);
    }, []);
    return state;
};
/**
 * Get styles for current breakpoint
 */
export const getResponsiveStyle = (styles, responsive) => {
    const { isMobile, isTablet } = responsive;
    return {
        ...styles.base,
        ...(isMobile && styles.mobile),
        ...(isTablet && styles.tablet),
        ...(!isMobile && !isTablet && styles.desktop),
    };
};
// ============================================================================
// Safe Area Handling
// ============================================================================
export const safeAreaInsets = {
    top: 'env(safe-area-inset-top, 0px)',
    bottom: 'env(safe-area-inset-bottom, 0px)',
    left: 'env(safe-area-inset-left, 0px)',
    right: 'env(safe-area-inset-right, 0px)',
};
/**
 * Get padding with safe area insets
 */
export const getSafeAreaPadding = (position, additionalPadding = '0px') => {
    return `calc(${safeAreaInsets[position]} + ${additionalPadding})`;
};
