"use strict";
var __importDefault = (this && this.__importDefault) || function (mod) {
    return (mod && mod.__esModule) ? mod : { "default": mod };
};
Object.defineProperty(exports, "__esModule", { value: true });
exports.LayoutPreview = void 0;
const jsx_runtime_1 = require("react/jsx-runtime");
/**
 * LayoutPreview Component
 *
 * Provides a preview of the layout in different breakpoints/devices
 */
const react_1 = require("react");
const prop_types_1 = __importDefault(require("prop-types"));
const LayoutToolbar_js_1 = require("./LayoutToolbar.js");
// Define device presets
const DEVICE_PRESETS = {
    // Mobile devices
    iphoneSE: { name: 'iPhone SE', width: 375, height: 667, scale: 1, type: 'mobile' },
    iphone12: { name: 'iPhone 12', width: 390, height: 844, scale: 1, type: 'mobile' },
    iphone12Pro: { name: 'iPhone 12 Pro', width: 390, height: 844, scale: 1, type: 'mobile' },
    iphone12ProMax: { name: 'iPhone 12 Pro Max', width: 428, height: 926, scale: 1, type: 'mobile' },
    pixel5: { name: 'Pixel 5', width: 393, height: 851, scale: 1, type: 'mobile' },
    samsungGalaxyS20: { name: 'Samsung Galaxy S20', width: 412, height: 915, scale: 1, type: 'mobile' },
    // Tablet devices
    ipadMini: { name: 'iPad Mini', width: 768, height: 1024, scale: 1, type: 'tablet' },
    ipad: { name: 'iPad', width: 810, height: 1080, scale: 1, type: 'tablet' },
    ipadPro: { name: 'iPad Pro', width: 1024, height: 1366, scale: 1, type: 'tablet' },
    galaxyTab: { name: 'Galaxy Tab', width: 800, height: 1280, scale: 1, type: 'tablet' },
    // Desktop presets
    laptop: { name: 'Laptop', width: 1366, height: 768, scale: 1, type: 'desktop' },
    desktop: { name: 'Desktop', width: 1920, height: 1080, scale: 1, type: 'desktop' },
    widescreen: { name: 'Widescreen', width: 2560, height: 1440, scale: 1, type: 'desktop' },
    // Responsive breakpoints
    sm: { name: 'Small (576px)', width: 576, height: 900, scale: 1, type: 'responsive' },
    md: { name: 'Medium (768px)', width: 768, height: 900, scale: 1, type: 'responsive' },
    lg: { name: 'Large (992px)', width: 992, height: 900, scale: 1, type: 'responsive' },
    xl: { name: 'X-Large (1200px)', width: 1200, height: 900, scale: 1, type: 'responsive' },
    xxl: { name: 'XX-Large (1400px)', width: 1400, height: 900, scale: 1, type: 'responsive' }
};
/**
 * DeviceFrame component renders a device-specific frame around content
 */
const DeviceFrame = ({ device, children, zoom = 1 }) => {
    const frameStyle = {
        width: `${device.width}px`,
        height: `${device.height}px`,
        transform: `scale(${zoom})`,
        transformOrigin: 'top left',
        overflow: 'hidden',
        border: '1px solid #ccc',
        borderRadius: device.type === 'mobile' ? '20px' : device.type === 'tablet' ? '10px' : '0',
        boxShadow: '0 2px 10px rgba(0, 0, 0, 0.2)',
        position: 'relative',
        transition: 'width 0.3s, height 0.3s',
        backgroundColor: 'white'
    };
    return ((0, jsx_runtime_1.jsxs)("div", { className: `bf-device-frame bf-device-frame--${device.type}`, style: frameStyle, children: [device.type === 'mobile' && (0, jsx_runtime_1.jsx)("div", { className: "bf-device-frame__notch" }), (0, jsx_runtime_1.jsx)("div", { className: "bf-device-frame__content", children: children })] }));
};
/**
 * LayoutPreview component
 * @param {Object} props - Component props
 * @param {React.ReactNode} props.children - The content to preview
 * @param {string} props.className - Additional CSS classes
 * @param {Object} props.style - Additional inline styles
 * @param {Object} props.initialDevice - Initial device to use (default: iphone12)
 * @param {number} props.initialZoom - Initial zoom level (default: 0.8)
 * @param {boolean} props.showDeviceFrame - Whether to show a device frame (default: true)
 * @param {boolean} props.showToolbar - Whether to show the toolbar (default: true)
 * @param {Object} props.customDevices - Custom device presets to add
 * @returns {React.ReactElement} LayoutPreview component
 */
const LayoutPreview = ({ children, className = '', style = {}, initialDevice = 'iphone12', initialZoom = 0.8, showDeviceFrame = true, showToolbar = true, customDevices = {}, ...rest }) => {
    // Combine built-in and custom devices
    const devices = { ...DEVICE_PRESETS, ...customDevices };
    // State
    const [currentDevice, setCurrentDevice] = (0, react_1.useState)(typeof initialDevice === 'string' ? devices[initialDevice] : initialDevice);
    const [zoom, setZoom] = (0, react_1.useState)(initialZoom);
    const [orientation, setOrientation] = (0, react_1.useState)('portrait');
    // Device type filters
    const deviceTypes = {
        mobile: Object.entries(devices).filter(([_, device]) => device.type === 'mobile'),
        tablet: Object.entries(devices).filter(([_, device]) => device.type === 'tablet'),
        desktop: Object.entries(devices).filter(([_, device]) => device.type === 'desktop'),
        responsive: Object.entries(devices).filter(([_, device]) => device.type === 'responsive'),
    };
    // Change device handler
    const handleDeviceChange = (deviceKey) => {
        setCurrentDevice(devices[deviceKey]);
    };
    // Toggle orientation handler
    const handleToggleOrientation = () => {
        setOrientation(orientation === 'portrait' ? 'landscape' : 'portrait');
    };
    // Get container dimensions
    const containerWidth = orientation === 'portrait' ? currentDevice.width * zoom : currentDevice.height * zoom;
    const containerHeight = orientation === 'portrait' ? currentDevice.height * zoom : currentDevice.width * zoom;
    // Container style
    const containerStyle = {
        width: `${containerWidth}px`,
        height: `${containerHeight}px`,
        margin: '0 auto',
        position: 'relative',
        ...style
    };
    // Content style (handles orientation)
    const contentStyle = {
        width: '100%',
        height: '100%',
        overflow: 'hidden',
        transform: orientation === 'landscape' ? 'rotate(-90deg) translate(-100%, 0)' : 'none',
        transformOrigin: orientation === 'landscape' ? 'top left' : 'center center'
    };
    // Render device selection toolbar
    const renderToolbar = () => {
        if (!showToolbar)
            return null;
        return ((0, jsx_runtime_1.jsxs)(LayoutToolbar_js_1.LayoutToolbar, { className: "bf-layout-preview__toolbar", position: "top", children: [(0, jsx_runtime_1.jsx)(LayoutToolbar_js_1.LayoutToolbar.Group, { label: "Mobile", children: deviceTypes.mobile.map(([key, device]) => ((0, jsx_runtime_1.jsx)(LayoutToolbar_js_1.LayoutToolbar.Item, { onClick: () => handleDeviceChange(key), tooltip: device.name, icon: "\uD83D\uDCF1", className: currentDevice.name === device.name ? 'active' : '', children: device.name }, key))) }), (0, jsx_runtime_1.jsx)(LayoutToolbar_js_1.LayoutToolbar.Divider, {}), (0, jsx_runtime_1.jsx)(LayoutToolbar_js_1.LayoutToolbar.Group, { label: "Tablet", children: deviceTypes.tablet.map(([key, device]) => ((0, jsx_runtime_1.jsx)(LayoutToolbar_js_1.LayoutToolbar.Item, { onClick: () => handleDeviceChange(key), tooltip: device.name, icon: "\uD83D\uDCF1", className: currentDevice.name === device.name ? 'active' : '', children: device.name }, key))) }), (0, jsx_runtime_1.jsx)(LayoutToolbar_js_1.LayoutToolbar.Divider, {}), (0, jsx_runtime_1.jsx)(LayoutToolbar_js_1.LayoutToolbar.Group, { label: "Desktop", children: deviceTypes.desktop.map(([key, device]) => ((0, jsx_runtime_1.jsx)(LayoutToolbar_js_1.LayoutToolbar.Item, { onClick: () => handleDeviceChange(key), tooltip: device.name, icon: "\uD83D\uDDA5\uFE0F", className: currentDevice.name === device.name ? 'active' : '', children: device.name }, key))) }), (0, jsx_runtime_1.jsx)(LayoutToolbar_js_1.LayoutToolbar.Divider, {}), (0, jsx_runtime_1.jsx)(LayoutToolbar_js_1.LayoutToolbar.Group, { label: "Responsive", children: deviceTypes.responsive.map(([key, device]) => ((0, jsx_runtime_1.jsx)(LayoutToolbar_js_1.LayoutToolbar.Item, { onClick: () => handleDeviceChange(key), tooltip: device.name, icon: "\uD83D\uDCD0", className: currentDevice.name === device.name ? 'active' : '', children: device.name }, key))) }), (0, jsx_runtime_1.jsx)(LayoutToolbar_js_1.LayoutToolbar.Divider, {}), (0, jsx_runtime_1.jsxs)(LayoutToolbar_js_1.LayoutToolbar.Group, { label: "Tools", children: [(0, jsx_runtime_1.jsx)(LayoutToolbar_js_1.LayoutToolbar.Item, { onClick: handleToggleOrientation, tooltip: `Switch to ${orientation === 'portrait' ? 'landscape' : 'portrait'}`, icon: "\uD83D\uDD04", children: orientation === 'portrait' ? 'Landscape' : 'Portrait' }), (0, jsx_runtime_1.jsx)(LayoutToolbar_js_1.LayoutToolbar.Item, { onClick: () => setZoom(Math.max(0.1, zoom - 0.1)), tooltip: "Zoom out", icon: "\u2796" }), (0, jsx_runtime_1.jsx)(LayoutToolbar_js_1.LayoutToolbar.Item, { onClick: () => setZoom(Math.min(2, zoom + 0.1)), tooltip: "Zoom in", icon: "\u2795" }), (0, jsx_runtime_1.jsx)(LayoutToolbar_js_1.LayoutToolbar.Item, { onClick: () => setZoom(1), tooltip: "Reset zoom", children: `${Math.round(zoom * 100)}%` })] })] }));
    };
    return ((0, jsx_runtime_1.jsxs)("div", { className: `bf-layout-preview ${className}`, ...rest, children: [renderToolbar(), (0, jsx_runtime_1.jsx)("div", { className: "bf-layout-preview__container", style: containerStyle, children: showDeviceFrame ? ((0, jsx_runtime_1.jsx)(DeviceFrame, { device: currentDevice, zoom: zoom, children: (0, jsx_runtime_1.jsx)("div", { className: "bf-layout-preview__content", style: contentStyle, children: children }) })) : ((0, jsx_runtime_1.jsx)("div", { className: "bf-layout-preview__content", style: contentStyle, children: children })) })] }));
};
exports.LayoutPreview = LayoutPreview;
exports.LayoutPreview.propTypes = {
    children: prop_types_1.default.node,
    className: prop_types_1.default.string,
    style: prop_types_1.default.object,
    initialDevice: prop_types_1.default.oneOfType([
        prop_types_1.default.string,
        prop_types_1.default.shape({
            name: prop_types_1.default.string.isRequired,
            width: prop_types_1.default.number.isRequired,
            height: prop_types_1.default.number.isRequired,
            scale: prop_types_1.default.number,
            type: prop_types_1.default.oneOf(['mobile', 'tablet', 'desktop', 'responsive'])
        })
    ]),
    initialZoom: prop_types_1.default.number,
    showDeviceFrame: prop_types_1.default.bool,
    showToolbar: prop_types_1.default.bool,
    customDevices: prop_types_1.default.object
};
exports.default = exports.LayoutPreview;
//# sourceMappingURL=LayoutPreview.js.map