"use strict";
var __importDefault = (this && this.__importDefault) || function (mod) {
    return (mod && mod.__esModule) ? mod : { "default": mod };
};
Object.defineProperty(exports, "__esModule", { value: true });
exports.BreakpointIndicator = void 0;
const jsx_runtime_1 = require("react/jsx-runtime");
/**
 * BreakpointIndicator Component
 *
 * A development tool that shows the current active breakpoint
 */
const react_1 = require("react");
const prop_types_1 = __importDefault(require("prop-types"));
const useMediaQuery_js_1 = require("../hooks/useMediaQuery.js");
/**
 * BreakpointIndicator displays the current active breakpoint in the corner of the screen
 * Useful for responsive design development and debugging
 *
 * @param {Object} props - Component props
 * @param {boolean} props.show - Whether to show the indicator (default: process.env.NODE_ENV === 'development')
 * @param {string} props.position - Position of the indicator (default: 'bottom-right')
 * @param {Object} props.breakpoints - Custom breakpoint definitions
 * @param {string} props.className - Additional CSS classes
 * @param {Object} props.style - Additional inline styles
 * @returns {React.ReactElement|null} BreakpointIndicator component or null if hidden
 */
const BreakpointIndicator = ({ show = process.env.NODE_ENV === 'development', position = 'bottom-right', breakpoints = {
    xs: '(max-width: 575.98px)',
    sm: '(min-width: 576px) and (max-width: 767.98px)',
    md: '(min-width: 768px) and (max-width: 991.98px)',
    lg: '(min-width: 992px) and (max-width: 1199.98px)',
    xl: '(min-width: 1200px) and (max-width: 1399.98px)',
    xxl: '(min-width: 1400px)'
}, className = '', style = {}, ...rest }) => {
    // Don't render anything if not showing
    if (!show)
        return null;
    // Get the current breakpoint
    const [currentBreakpoint, setCurrentBreakpoint] = (0, react_1.useState)('');
    // Check each breakpoint
    const breakpointStates = Object.entries(breakpoints).reduce((acc, [key, query]) => {
        acc[key] = (0, useMediaQuery_js_1.useMediaQuery)(query);
        return acc;
    }, {});
    // Update the current breakpoint when media queries change
    (0, react_1.useEffect)(() => {
        // Find the active breakpoint
        const active = Object.entries(breakpointStates).find(([_, isActive]) => isActive);
        setCurrentBreakpoint(active ? active[0] : '');
    }, [breakpointStates]);
    // Positioning styles
    const positionStyles = {
        'top-left': { top: '0', left: '0' },
        'top-right': { top: '0', right: '0' },
        'bottom-left': { bottom: '0', left: '0' },
        'bottom-right': { bottom: '0', right: '0' }
    };
    // Set default styles
    const defaultStyle = {
        position: 'fixed',
        zIndex: 9999,
        padding: '4px 8px',
        backgroundColor: 'rgba(0, 0, 0, 0.75)',
        color: 'white',
        fontSize: '12px',
        borderRadius: '4px',
        fontFamily: 'monospace',
        pointerEvents: 'none',
        ...positionStyles[position],
        ...style
    };
    // Colors for different breakpoints
    const breakpointColors = {
        xs: '#dc3545', // red
        sm: '#fd7e14', // orange
        md: '#ffc107', // yellow
        lg: '#28a745', // green
        xl: '#17a2b8', // teal
        xxl: '#6610f2' // purple
    };
    return ((0, jsx_runtime_1.jsx)("div", { className: `bf-breakpoint-indicator ${className}`, style: {
            ...defaultStyle,
            borderLeft: `4px solid ${breakpointColors[currentBreakpoint] || '#6c757d'}`
        }, ...rest, children: (0, jsx_runtime_1.jsxs)("div", { className: "bf-breakpoint-indicator__content", children: [(0, jsx_runtime_1.jsx)("span", { className: "bf-breakpoint-indicator__label", children: "Breakpoint:" }), (0, jsx_runtime_1.jsx)("span", { className: "bf-breakpoint-indicator__value", style: {
                        fontWeight: 'bold',
                        color: breakpointColors[currentBreakpoint] || 'white'
                    }, children: currentBreakpoint || 'unknown' }), (0, jsx_runtime_1.jsx)("span", { className: "bf-breakpoint-indicator__dimensions", children: ` (${window.innerWidth}px × ${window.innerHeight}px)` })] }) }));
};
exports.BreakpointIndicator = BreakpointIndicator;
exports.BreakpointIndicator.propTypes = {
    show: prop_types_1.default.bool,
    position: prop_types_1.default.oneOf(['top-left', 'top-right', 'bottom-left', 'bottom-right']),
    breakpoints: prop_types_1.default.objectOf(prop_types_1.default.string),
    className: prop_types_1.default.string,
    style: prop_types_1.default.object
};
exports.default = exports.BreakpointIndicator;
//# sourceMappingURL=BreakpointIndicator.js.map