import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
import { classNames } from '../utils/classNames';
import { cva } from '../utils/cva';
import { pageHeaderClassnames } from './constants';
import { HeaderContent } from './HeaderContent';
import { MobilePageActions } from './MobilePageActions';
import { MobileTitleWrapper, Wrapper } from './styles';
import { Title } from './Title';
import { useLogic } from './useLogic';
const mobilePageHeaderCva = cva(pageHeaderClassnames.pageHeaderMobileTitle, {
    variants: {
        hasTitle: {
            true: pageHeaderClassnames.hasTitle,
        },
        hasBackButton: {
            true: pageHeaderClassnames.hasBackButton,
        },
    },
});
const rootCva = cva(pageHeaderClassnames.root, {
    variants: {
        hasActions: {
            true: pageHeaderClassnames.hasActions,
        },
    },
});
export const PageHeader = (props) => {
    const { title, description, subheader, breadcrumbs, actions, backButton, className, filters, } = props;
    const { isLoading, mobileTitleActions, isShowMobileActions } = useLogic(props);
    return (_jsxs(_Fragment, { children: [_jsxs(MobileTitleWrapper, { className: mobilePageHeaderCva({
                    hasTitle: Boolean(title) || isLoading,
                    hasBackButton: Boolean(backButton),
                }), children: [_jsx(Title, { backButton: backButton, title: title, isLoading: isLoading }), mobileTitleActions && mobileTitleActions] }), _jsx(Wrapper, { className: classNames(rootCva({ hasActions: Boolean(actions) }), className), children: _jsx(HeaderContent, { breadcrumbs: breadcrumbs, backButton: backButton, title: title, description: description, actions: actions, subheader: subheader, filters: filters, isLoading: isLoading }) }), isShowMobileActions && (_jsx(MobilePageActions, { className: classNames(pageHeaderClassnames.pageHeaderActions), isLoading: isLoading, ...actions }))] }));
};
