import React from 'react';
import { Heading, Page, SkeletonRectangle, Box, Badge, } from '@wix/design-system';
import { useFormPageContext } from '../../providers';
import { FormPageActionsBar } from '../../components/FormPage';
import { PageSubTitle } from '../../components/PageSubTitle';
import { st, classes } from './FormPageHeader.st.css.js';
import { useIsMobile } from '../../hooks/useIsMobile';
export function useFormPageHeader(child, { headerProps = {}, overrides = {}, } = {}) {
    const state = useFormPageContext();
    const isMobile = useIsMobile();
    const { title, subtitle, breadcrumbs } = overrides;
    const actionsBar = (React.createElement(FormPageActionsBar, { moreActions: child.props.moreActions }));
    const renderTitle = () => {
        if (!title?.text) {
            return React.createElement(SkeletonRectangle, { height: "24px", width: "50%" });
        }
        const { text, badges } = title;
        return (React.createElement(Box, { gap: "SP2", verticalAlign: "middle", alignContent: "center" },
            React.createElement(Heading, { size: isMobile ? 'large' : 'extraLarge' }, text),
            badges && badges.length > 0 && (React.createElement(Box, { gap: "SP2" }, badges.map((badge, index) => (React.createElement(Badge, { key: index, ...badge, dataHook: `form-page-header-badge-${index}` }, badge.text)))))));
    };
    return (React.createElement(Page.Header, { className: st(classes.root, { mobile: isMobile }), key: child.key, title: renderTitle(), subtitle: !subtitle && state.isFetching ? (React.createElement(SkeletonRectangle, { marginTop: "SP1", height: "12px", width: "70%" })) : (subtitle && React.createElement(PageSubTitle, { ...subtitle })), actionsBar: actionsBar, breadcrumbs: breadcrumbs, ...headerProps }));
}
//# sourceMappingURL=useFormPageHeader.js.map