import React, { PureComponent } from 'react';
import { SidePanelContext } from '../../SidePanelAPI';
import { st, classes } from './Header.st.css.js';
import { dataHooks } from '../../constants';
import Heading from '../../../Heading';
import Divider from '../../../Divider';
import CloseButton from '../../../CloseButton';
import Box from '../../../Box';
import InfoIcon from '../../../InfoIcon';
import Text from '../../../Text';
import { Help24 as Help } from '@wix/wix-ui-icons-common/system';
import { ChevronLeftLarge } from '@wix/wix-ui-icons-common';
import Tooltip from '../../../Tooltip';
class Header extends PureComponent {
    renderStringTitle(skin) {
        const { title, infoTooltipContent, infoTooltipProps, maxLines, ellipsis } = this.props;
        const headerProps = {
            placement: 'auto',
            ellipsis,
            maxLines,
            size: 'medium',
            as: 'h2',
            dataHook: dataHooks.sidePanelHeaderTitle,
        };
        const HeaderText = () => skin === 'floating' ? (React.createElement(Text, { className: classes.floatingTitle, ...headerProps, weight: "bold" }, title)) : (React.createElement(Heading, { className: classes.standardTitle, ...headerProps }, title));
        return (React.createElement(Box, null,
            React.createElement(HeaderText, null),
            infoTooltipContent && (React.createElement(Box, { marginLeft: "tiny" },
                React.createElement(InfoIcon, { dataHook: dataHooks.sidePanelHeaderTitleInfoIcon, content: infoTooltipContent, tooltipProps: infoTooltipProps })))));
    }
    renderSubtitle() {
        const { subtitle } = this.props;
        if (!subtitle)
            return null;
        const isStringSubtitle = typeof subtitle === 'string';
        if (!isStringSubtitle) {
            return subtitle;
        }
        return (React.createElement(Text, { className: classes.subtitle, skin: "standard", secondary: true, dataHook: dataHooks.sidePanelHeaderSubtitle }, subtitle));
    }
    renderBackButton({ ariaLabel, onClick, onMouseDown, description, tooltipProps, } = {}) {
        const backButton = (React.createElement(CloseButton, { dataHook: dataHooks.sidePanelHeaderBackButton, className: classes.backButton, onClick: onClick, onMouseDown: onMouseDown, size: "large", skin: "dark", "aria-label": ariaLabel, children: React.createElement(ChevronLeftLarge, null) }));
        if (description) {
            return (React.createElement(Tooltip, { ...tooltipProps, content: description, dataHook: dataHooks.sidePanelHeaderBackButtonTooltip }, backButton));
        }
        return backButton;
    }
    renderTitle(skin, backButtonProps, closeButtonProps, helpButtonProps) {
        const { title } = this.props;
        const isStringTitle = typeof title === 'string';
        return (React.createElement("div", { className: st(classes.titleContainer, {
                noCloseButton: !closeButtonProps?.onClick,
            }) },
            this.props.prefix && (React.createElement("div", { "data-hook": dataHooks.sidePanelHeaderPrefix }, this.props.prefix)),
            backButtonProps?.onClick && this.renderBackButton(backButtonProps),
            React.createElement("div", { className: classes.title },
                isStringTitle ? this.renderStringTitle(skin) : title,
                this.renderSubtitle()),
            this.renderButtons(closeButtonProps, helpButtonProps)));
    }
    renderButtons(closeButtonProps, helpButtonProps) {
        if (!closeButtonProps?.onClick &&
            !helpButtonProps?.onClick &&
            !this.props.suffix) {
            return React.createElement(React.Fragment, null);
        }
        return (React.createElement("div", { className: classes.buttonBox },
            this.props.suffix && (React.createElement("div", { "data-hook": dataHooks.sidePanelHeaderSuffix }, this.props.suffix)),
            helpButtonProps?.onClick && (React.createElement(CloseButton, { dataHook: dataHooks.sidePanelHeaderHelpButton, className: classes.helpButton, onClick: helpButtonProps.onClick, onMouseDown: helpButtonProps.onMouseDown, size: helpButtonProps.size ?? 'large', skin: helpButtonProps.skin ?? 'dark', "aria-label": helpButtonProps.ariaLabel, children: React.createElement(Help, { className: classes.helpIcon }) })),
            closeButtonProps?.onClick && (React.createElement(CloseButton, { dataHook: dataHooks.sidePanelHeaderCloseButton, className: classes.closeButton, onClick: closeButtonProps.onClick, onMouseDown: closeButtonProps.onMouseDown, size: closeButtonProps.size ?? 'large', "aria-label": closeButtonProps.ariaLabel, skin: closeButtonProps.skin ?? 'dark', autoFocus: closeButtonProps.autoFocus }))));
    }
    render() {
        const { children, showDivider, className } = this.props;
        return (React.createElement(SidePanelContext.Consumer, null, ({ skin, isDraggable, backButtonProps, closeButtonProps, helpButtonProps, }) => (React.createElement("div", { className: st(classes.root, { skin, isDraggable }, className), "data-hook": dataHooks.sidePanelHeader },
            this.renderTitle(skin, backButtonProps, closeButtonProps, helpButtonProps),
            children,
            showDivider && (React.createElement(Divider, { className: classes.divider, dataHook: dataHooks.sidePanelHeaderDivider }))))));
    }
}
Header.displayName = 'SidePanel.Header';
Header.defaultProps = {
    showDivider: true,
};
export default Header;
//# sourceMappingURL=Header.js.map