import { st, classes } from './Header.st.css.js';
import React, { PureComponent } from 'react';
import { ChevronLeft } from '@wix/wix-ui-icons-common';
import Breadcrumbs from '../../../Breadcrumbs';
import Text from '../../../Text';
import Heading from '../../../Heading';
import IconButton from '../../../IconButton';
import { dataHooks } from './constants';
import Transition from '../../../Transition';
import { WixStyleReactEnvironmentContext } from '../../../WixStyleReactEnvironmentProvider/context';
const isDarkTheme = (hasBackgroundImage, minimized, skin) => {
    switch (skin) {
        case 'light':
            return false;
        case 'dark':
            return true;
        default:
            return hasBackgroundImage && !minimized;
    }
};
const getBreadcrumbsTheme = (hasBackgroundImage, minimized, skin) => isDarkTheme(hasBackgroundImage, minimized, skin)
    ? 'onDarkBackground'
    : 'onGrayBackground';
const getTitle = (title, minimized) => typeof title === 'function' ? title(minimized) : title;
const generateDefaultBreadcrumbs = (title, hasBackgroundImage, minimized, skin) => (React.createElement(Breadcrumbs, { items: [{ id: '1', value: getTitle(title, minimized) }], activeId: "1", size: "medium", theme: getBreadcrumbsTheme(hasBackgroundImage, minimized, skin), onClick: () => { } }));
const getBreadcrumbs = (breadcrumbs, minimized) => typeof breadcrumbs === 'function' ? breadcrumbs(minimized) : breadcrumbs;
const generateThemedBreadcrumbs = (breadcrumbs, title, hasBackgroundImage, minimized, skin) => {
    if (breadcrumbs) {
        // @ts-expect-error
        return React.cloneElement(getBreadcrumbs(breadcrumbs, minimized), {
            theme: getBreadcrumbsTheme(hasBackgroundImage, minimized, skin),
        });
    }
    return generateDefaultBreadcrumbs(title, hasBackgroundImage, minimized);
};
/**
 * A header that sticks at the top of the container which minimizes on scroll
 */
class Header extends PureComponent {
    constructor(props) {
        super(props);
        this._animateComponent = (show, useEnterDelay, content) => {
            if (show) {
                return content;
            }
            return useEnterDelay ? (React.createElement(Transition, { show: show, enterAnimation: {
                    fadeIn: {
                        duration: 'medium01',
                        delay: 'short',
                    },
                }, exitAnimation: {
                    fadeOut: true,
                } }, content)) : (React.createElement(Transition, { show: show, enterAnimation: {
                    fadeIn: true,
                }, exitAnimation: {
                    fadeOut: true,
                } }, content));
        };
        const { breadcrumbs, title, hasBackgroundImage, minimized, skin } = props;
        this.state = {
            themedBreadcrumbs: generateThemedBreadcrumbs(breadcrumbs, title, hasBackgroundImage, minimized, skin),
        };
    }
    UNSAFE_componentWillReceiveProps(nextProps) {
        const { breadcrumbs, title, hasBackgroundImage, minimized, skin } = this.props;
        const newBreadcrumbs = nextProps.breadcrumbs;
        const newTitle = nextProps.title;
        const newHasBackgroundImage = nextProps.hasBackgroundImage;
        const newMinimized = nextProps.minimized;
        const newSkin = nextProps.skin;
        if (breadcrumbs !== newBreadcrumbs ||
            title !== newTitle ||
            hasBackgroundImage !== newHasBackgroundImage ||
            minimized !== newMinimized ||
            skin !== newSkin) {
            const themedBreadcrumbs = generateThemedBreadcrumbs(newBreadcrumbs, newTitle, newHasBackgroundImage, newMinimized, skin);
            this.setState({ themedBreadcrumbs });
        }
    }
    render() {
        const { dataHook, breadcrumbs, onBackClicked, title, subtitle, minimized, skin, actionsBar, showBackButton, hasBackgroundImage, className, backButtonAriaLabel, } = this.props;
        const breadcrumbsExists = !!breadcrumbs;
        const { themedBreadcrumbs } = this.state;
        const _title = getTitle(title, minimized);
        const isDark = isDarkTheme(hasBackgroundImage, minimized, skin);
        const { pageHeaderId } = this.context;
        return (React.createElement("div", { className: st(classes.root, {}, className), "data-hook": dataHook },
            React.createElement("div", { className: classes.header },
                React.createElement("div", null, this._animateComponent(breadcrumbsExists || minimized, !breadcrumbsExists, React.createElement("div", { className: st(classes.breadcrumbsContainer, {
                        withoutBreadcrumbs: !breadcrumbsExists,
                    }), "data-hook": dataHooks.breadcrumbs }, themedBreadcrumbs))),
                React.createElement("div", { className: st(classes.titleContainer, { minimized }) },
                    showBackButton &&
                        onBackClicked &&
                        this._animateComponent(!minimized, !breadcrumbsExists, React.createElement(IconButton, { className: st(classes.titleBackButton, {
                                darkTheme: isDark,
                            }), dataHook: dataHooks.backButton, onClick: onBackClicked, ariaLabel: backButtonAriaLabel },
                            React.createElement(ChevronLeft, { className: classes.titleBackButtonIcon }))),
                    React.createElement("div", { className: classes.titleColumn },
                        title &&
                            this._animateComponent(!minimized, !breadcrumbsExists, React.createElement(Heading, { size: "extraLarge", className: st(classes.title), dataHook: dataHooks.title, ellipsis: typeof _title === 'string', light: isDark, id: pageHeaderId }, _title)),
                        subtitle &&
                            this._animateComponent(!minimized, !breadcrumbsExists, React.createElement("div", { "data-hook": dataHooks.subtitle },
                                React.createElement(Text, { ellipsis: typeof subtitle === 'string', light: isDark, secondary: !isDark, maxLines: 2, maxWidth: "288px" }, subtitle)))))),
            actionsBar && (React.createElement("div", { className: st(classes.actionsBar, {
                    minimized,
                    withBreadcrumbs: breadcrumbsExists,
                }), "data-hook": dataHooks.actionBar }, typeof actionsBar === 'function'
                ? actionsBar({
                    minimized,
                    hasBackgroundImage,
                    skin,
                })
                : actionsBar))));
    }
}
Header.displayName = 'Page.Header';
Header.defaultProps = {
    minimized: false,
};
export default Header;
Header.contextType = WixStyleReactEnvironmentContext;
//# sourceMappingURL=Header.js.map