import { jsxs, jsx } from 'react/jsx-runtime';
import React__default from 'react';
import Icon from '../Icon/Icon.js';
import Tooltip from '../Tooltip/Tooltip.js';

const MobileSkin = ({ children, orientation = '', navBarIcons = [], mobileHeight = 448, mobileWidth = 220, UtilityBar, tooltip = {}, background, navBarPosition = 'bottom', }) => {
    const isPortrait = orientation === 'portrait';
    const containerHeight = isPortrait ? mobileHeight : mobileWidth;
    const containerWidth = isPortrait ? mobileWidth : mobileHeight;
    const hasTopNav = UtilityBar && navBarPosition === 'top';
    const hasBottomNav = UtilityBar && navBarPosition === 'bottom';
    const hasSideNav = UtilityBar && navBarPosition === 'left';
    return (jsxs("div", { className: [
            'ff-mobileskin-wrapper',
            isPortrait ? 'portrait' : 'landscape',
            hasSideNav ? 'ff-side-nav-left' : '',
            hasTopNav ? 'navbar-top' : '',
            hasBottomNav ? 'navbar-bottom' : '',
        ]
            .filter(Boolean)
            .join(' '), children: [hasTopNav && (jsx("div", { className: "ff-nav-bar top-nav-bar", children: navBarIcons.map(({ title, name, className, ...iconProps }, index) => {
                    const key = tooltip?.[name] ?? index;
                    const tooltipTitle = tooltip?.[name] || '';
                    return (jsx(Tooltip, { title: tooltipTitle, placement: "top", children: jsx("div", { className: `ff-nav-bar-icon ${className || ''} ${index === navBarIcons.length - 1 ? 'last-icon' : ''} ${hasTopNav ? 'navbar-top' : ''}`, children: jsx(Icon, { name: name, ...iconProps }) }) }, key));
                }) })), jsx("div", { className: "ff-mobileskin-container", style: { height: containerHeight + 16, width: containerWidth + 16 }, children: jsx("div", { className: "ff-mobile-container", style: {
                        width: containerWidth,
                        height: containerHeight,
                        background: background ? background : 'transparent',
                    }, children: jsx("div", { className: "ff-mobile-image-container", children: React__default.isValidElement(children) ? (children) : (jsx("img", { src: children, alt: "Mobile content", style: {
                                width: isPortrait ? '100%' : `${mobileWidth * 2.1}px`,
                                height: isPortrait ? '100%' : `${mobileHeight * 0.5}px`,
                            } })) }) }) }), UtilityBar && hasBottomNav && (jsx("div", { className: "ff-nav-bar", children: navBarIcons?.map((icon, index) => {
                    const { title, ...iconProps } = icon;
                    return (jsx("div", { className: `ff-nav-bar-icon ${icon?.className || ''} ${index === navBarIcons.length - 1 ? 'last-icon' : ''}`, children: jsx(Tooltip, { title: title, children: jsx(Icon, { ...iconProps }) }) }, index));
                }) })), UtilityBar && hasSideNav && (jsx("div", { className: "ff-side-nav-bar", children: navBarIcons?.map((icon, index) => {
                    const { title, ...iconProps } = icon;
                    return (jsx("div", { className: `ff-sidebar ${icon?.className || ''} ${index === navBarIcons.length - 1 ? 'last-icon' : ''}`, children: jsx(Tooltip, { title: title, placement: "bottom", children: jsx(Icon, { ...iconProps }) }) }, index));
                }) }))] }));
};

export { MobileSkin as default };
//# sourceMappingURL=MobileSkin.js.map
