import { SectionHeader, Text, CounterBadge, Box, Tooltip, } from '@wix/design-system';
import React, { cloneElement, isValidElement, } from 'react';
import { st, classes } from './CollectionSectionHeader.st.css.js';
import { CollectionSectionHeaderActionBar } from './CollectionSectionHeaderActionBar';
export const CollectionSectionHeader = ({ sectionId, sectionIndex, section, skin, dataHook, biComponentType, collapsible, onToggleCollapse, }) => {
    const renderBadge = () => {
        const { badge } = section;
        if (!badge || !badge.visible) {
            return null;
        }
        return (React.createElement(CounterBadge, { truncate: false, skin: badge.skin || 'light', dataHook: "section-header-badge" },
            section.count,
            section.hasMore ? '+' : ''));
    };
    const renderSummary = () => {
        const { summary } = section;
        if (!summary || summary.length === 0) {
            return null;
        }
        return (React.createElement(Box, { gap: "SP1" }, summary.map((item, index) => (React.createElement(Box, { key: index, verticalAlign: "middle", gap: "3px", dataHook: "section-header-summary-item" },
            React.createElement(Tooltip, { content: item.text }, isValidElement(item.icon)
                ? cloneElement(item.icon, {
                    className: st(classes.summaryIcon, item.icon.props?.className),
                })
                : item.icon),
            React.createElement(Text, { size: "tiny", weight: "normal", skin: "standard", secondary: true }, item.count))))));
    };
    const title = (React.createElement(Box, { verticalAlign: "middle", gap: "SP2" },
        React.createElement(Box, { gap: "SP1" },
            React.createElement(Text, { size: "small", weight: "normal" }, section.title),
            renderBadge()),
        renderSummary()));
    return (React.createElement(SectionHeader, { dataHook: dataHook, title: title, skin: skin, divider: section.collapsed ? 'bottom' : 'none', size: "small", suffix: React.createElement(CollectionSectionHeaderActionBar, { sectionId: sectionId, sectionIndex: sectionIndex, section: section, biComponentType: biComponentType, collapsible: collapsible, onToggleCollapse: onToggleCollapse }) }));
};
//# sourceMappingURL=CollectionSectionHeader.js.map