"use strict";
var __importDefault = (this && this.__importDefault) || function (mod) {
    return (mod && mod.__esModule) ? mod : { "default": mod };
};
Object.defineProperty(exports, "__esModule", { value: true });
/* eslint-disable @typescript-eslint/no-non-null-assertion */
const vue_1 = require("vue");
const _mixins_1 = require("../../_mixins");
const light_1 = require("../styles/light");
const index_cssr_1 = __importDefault(require("./styles/index.cssr"));
const icons_1 = require("../../_internal/icons");
const _internal_1 = require("../../_internal");
const use_rtl_1 = __importDefault(require("../../_mixins/use-rtl"));
const pageHeaderProps = Object.assign(Object.assign({}, _mixins_1.useTheme.props), { title: String, subtitle: String, extra: String, onBack: Function });
exports.default = (0, vue_1.defineComponent)({
    name: 'PageHeader',
    props: pageHeaderProps,
    setup(props) {
        const { mergedClsPrefixRef, NConfigProvider } = (0, _mixins_1.useConfig)(props);
        const themeRef = (0, _mixins_1.useTheme)('PageHeader', 'PageHeader', index_cssr_1.default, light_1.pageHeaderLight, props, mergedClsPrefixRef);
        const rtlEnabledRef = (0, use_rtl_1.default)('PageHeader', NConfigProvider === null || NConfigProvider === void 0 ? void 0 : NConfigProvider.mergedRtlRef, mergedClsPrefixRef);
        return {
            rtlEnabled: rtlEnabledRef,
            mergedClsPrefix: mergedClsPrefixRef,
            cssVars: (0, vue_1.computed)(() => {
                const { self: { titleTextColor, subtitleTextColor, backColor, fontSize, titleFontSize, backSize, titleFontWeight, backColorHover, backColorPressed }, common: { cubicBezierEaseInOut } } = themeRef.value;
                return {
                    '--title-text-color': titleTextColor,
                    '--title-font-size': titleFontSize,
                    '--title-font-weight': titleFontWeight,
                    '--font-size': fontSize,
                    '--back-size': backSize,
                    '--subtitle-text-color': subtitleTextColor,
                    '--back-color': backColor,
                    '--back-color-hover': backColorHover,
                    '--back-color-pressed': backColorPressed,
                    '--bezier': cubicBezierEaseInOut
                };
            })
        };
    },
    render() {
        const { onBack, title, subtitle, extra, mergedClsPrefix, cssVars, $slots } = this;
        const { title: titleSlot, subtitle: subtitleSlot, extra: extraSlot, default: defaultSlot, header: headerSlot, avatar: avatarSlot, footer: footerSlot } = $slots;
        const showBack = onBack;
        const showTitle = title || titleSlot;
        const showSubtitle = subtitle || subtitleSlot;
        const showExtra = extra || extraSlot;
        return ((0, vue_1.h)("div", { style: cssVars, class: [
                `${mergedClsPrefix}-page-header-wrapper`,
                this.rtlEnabled && `${mergedClsPrefix}-page-header-wrapper--rtl`
            ] },
            headerSlot ? ((0, vue_1.h)("div", { class: `${mergedClsPrefix}-page-header-header`, key: "breadcrumn" }, headerSlot())) : null,
            (0, vue_1.h)("div", { class: `${mergedClsPrefix}-page-header`, key: "header" },
                (0, vue_1.h)("div", { class: `${mergedClsPrefix}-page-header__main`, key: "back" },
                    showBack ? ((0, vue_1.h)("div", { class: `${mergedClsPrefix}-page-header__back`, onClick: onBack },
                        (0, vue_1.h)(_internal_1.NBaseIcon, { clsPrefix: mergedClsPrefix }, {
                            default: () => (0, vue_1.h)(icons_1.ArrowBackIcon, null)
                        }))) : null,
                    avatarSlot ? ((0, vue_1.h)("div", { class: `${mergedClsPrefix}-page-header__avatar` }, avatarSlot())) : null,
                    showTitle ? ((0, vue_1.h)("div", { class: `${mergedClsPrefix}-page-header__title`, key: "title" }, title || titleSlot())) : null,
                    showSubtitle ? ((0, vue_1.h)("div", { class: `${mergedClsPrefix}-page-header__subtitle`, key: "subtitle" }, subtitle || subtitleSlot())) : null),
                showExtra ? ((0, vue_1.h)("div", { class: `${mergedClsPrefix}-page-header__extra` }, extra || extraSlot())) : null),
            defaultSlot ? ((0, vue_1.h)("div", { class: `${mergedClsPrefix}-page-header-content`, key: "content" }, defaultSlot())) : null,
            footerSlot ? ((0, vue_1.h)("div", { class: `${mergedClsPrefix}-page-header-footer`, key: "footer" }, footerSlot())) : null));
    }
});
