"use strict";
var __importDefault = (this && this.__importDefault) || function (mod) {
    return (mod && mod.__esModule) ? mod : { "default": mod };
};
Object.defineProperty(exports, "__esModule", { value: true });
exports.LayoutRegionComponent = exports.LayoutRegion = void 0;
const jsx_runtime_1 = require("react/jsx-runtime");
/**
 * LayoutRegion Component
 *
 * Provides a flexible region for layouts with customizable behavior
 */
const react_1 = require("react");
const prop_types_1 = __importDefault(require("prop-types"));
const useLayoutPersistence_js_1 = require("../hooks/useLayoutPersistence.js");
/**
 * LayoutRegion component represents a section of the layout that can be
 * customized, collapsed, resized, or otherwise modified by the user.
 *
 * @param {Object} props - Component props
 * @param {React.ReactNode} props.children - Child components
 * @param {string} props.className - Additional CSS classes
 * @param {Object} props.style - Additional inline styles
 * @param {string} props.id - Unique identifier for the region
 * @param {string} props.name - Display name for the region
 * @param {string} props.type - Type of region (sidebar, content, header, footer)
 * @param {boolean} props.collapsible - Whether the region can be collapsed
 * @param {boolean} props.defaultCollapsed - Default collapsed state
 * @param {boolean} props.resizable - Whether the region can be resized
 * @param {string|number} props.defaultWidth - Default width for the region
 * @param {string|number} props.defaultHeight - Default height for the region
 * @param {string|number} props.minWidth - Minimum width for the region
 * @param {string|number} props.maxWidth - Maximum width for the region
 * @param {string|number} props.minHeight - Minimum height for the region
 * @param {string|number} props.maxHeight - Maximum height for the region
 * @param {boolean} props.persistState - Whether to persist state in localStorage
 * @returns {React.ReactElement} LayoutRegion component
 */
const LayoutRegion = ({ children, className = '', style = {}, id, name, type = 'content', collapsible = false, defaultCollapsed = false, resizable = false, defaultWidth, defaultHeight, minWidth, maxWidth, minHeight, maxHeight, persistState = true, ...rest }) => {
    // Generate a unique ID if none provided
    const regionId = id || `region-${type}-${Math.random().toString(36).substr(2, 9)}`;
    // Use persistent state if enabled
    const [collapsed, setCollapsed] = persistState
        ? (0, useLayoutPersistence_js_1.useLayoutPersistence)(`${regionId}-collapsed`, defaultCollapsed)
        : (0, react_1.useState)(defaultCollapsed);
    const [width, setWidth] = persistState
        ? (0, useLayoutPersistence_js_1.useLayoutPersistence)(`${regionId}-width`, defaultWidth)
        : (0, react_1.useState)(defaultWidth);
    const [height, setHeight] = persistState
        ? (0, useLayoutPersistence_js_1.useLayoutPersistence)(`${regionId}-height`, defaultHeight)
        : (0, react_1.useState)(defaultHeight);
    // Toggle collapse state
    const toggleCollapse = (0, react_1.useCallback)(() => {
        setCollapsed(!collapsed);
    }, [collapsed, setCollapsed]);
    // Handle resize
    const handleResize = (0, react_1.useCallback)((newWidth, newHeight) => {
        if (resizable) {
            if (newWidth !== undefined) {
                setWidth(newWidth);
            }
            if (newHeight !== undefined) {
                setHeight(newHeight);
            }
        }
    }, [resizable, setWidth, setHeight]);
    // Compute styles
    const regionStyle = {
        ...(width && { width }),
        ...(height && { height }),
        ...(minWidth && { minWidth }),
        ...(maxWidth && { maxWidth }),
        ...(minHeight && { minHeight }),
        ...(maxHeight && { maxHeight }),
        ...style
    };
    // Classes
    const regionClasses = [
        'bf-layout-region',
        `bf-layout-region--${type}`,
        collapsed ? 'bf-layout-region--collapsed' : '',
        resizable ? 'bf-layout-region--resizable' : '',
        className
    ].filter(Boolean).join(' ');
    return ((0, jsx_runtime_1.jsxs)("div", { id: regionId, className: regionClasses, style: regionStyle, "data-region-type": type, "data-region-name": name, ...rest, children: [collapsible && ((0, jsx_runtime_1.jsx)("button", { className: "bf-layout-region__collapse-button", onClick: toggleCollapse, "aria-expanded": !collapsed, "aria-controls": `${regionId}-content`, title: collapsed ? `Expand ${name || type}` : `Collapse ${name || type}`, children: collapsed ? '⟩' : '⟨' })), (0, jsx_runtime_1.jsx)("div", { id: `${regionId}-content`, className: "bf-layout-region__content", style: { display: collapsed ? 'none' : 'block' }, children: children }), resizable && !collapsed && ((0, jsx_runtime_1.jsx)("div", { className: "bf-layout-region__resize-handle", onMouseDown: (e) => {
                    // Resize logic would be implemented here
                    // This is a simplified version without the actual resize behavior
                } }))] }));
};
exports.LayoutRegion = LayoutRegion;
exports.LayoutRegion.propTypes = {
    children: prop_types_1.default.node,
    className: prop_types_1.default.string,
    style: prop_types_1.default.object,
    id: prop_types_1.default.string,
    name: prop_types_1.default.string,
    type: prop_types_1.default.oneOf(['sidebar', 'content', 'header', 'footer']),
    collapsible: prop_types_1.default.bool,
    defaultCollapsed: prop_types_1.default.bool,
    resizable: prop_types_1.default.bool,
    defaultWidth: prop_types_1.default.oneOfType([prop_types_1.default.string, prop_types_1.default.number]),
    defaultHeight: prop_types_1.default.oneOfType([prop_types_1.default.string, prop_types_1.default.number]),
    minWidth: prop_types_1.default.oneOfType([prop_types_1.default.string, prop_types_1.default.number]),
    maxWidth: prop_types_1.default.oneOfType([prop_types_1.default.string, prop_types_1.default.number]),
    minHeight: prop_types_1.default.oneOfType([prop_types_1.default.string, prop_types_1.default.number]),
    maxHeight: prop_types_1.default.oneOfType([prop_types_1.default.string, prop_types_1.default.number]),
    persistState: prop_types_1.default.bool
};
/**
 * LayoutRegionComponent is a specialization of LayoutRegion with predefined behavior
 * @param {Object} props - Component props, same as LayoutRegion
 * @returns {React.ReactElement} LayoutRegionComponent
 */
const LayoutRegionComponent = (props) => (0, jsx_runtime_1.jsx)(exports.LayoutRegion, { ...props });
exports.LayoutRegionComponent = LayoutRegionComponent;
exports.LayoutRegionComponent.propTypes = exports.LayoutRegion.propTypes;
exports.default = exports.LayoutRegion;
//# sourceMappingURL=LayoutRegion.js.map