"use strict";
Object.defineProperty(exports, "__esModule", { value: true });
exports.cardBasePropKeys = exports.cardBaseProps = void 0;
const vue_1 = require("vue");
const seemly_1 = require("seemly");
const _mixins_1 = require("../../_mixins");
const _utils_1 = require("../../_utils");
const _internal_1 = require("../../_internal");
const styles_1 = require("../styles");
const index_cssr_1 = require("./styles/index.cssr");
const use_rtl_1 = require("../../_mixins/use-rtl");
exports.cardBaseProps = {
    title: String,
    contentStyle: [Object, String],
    headerStyle: [Object, String],
    footerStyle: [Object, String],
    segmented: {
        type: [Boolean, Object],
        default: false
    },
    size: {
        type: String,
        default: 'medium'
    },
    bordered: {
        type: Boolean,
        default: true
    },
    closable: {
        type: Boolean,
        default: false
    },
    hoverable: Boolean,
    onClose: [Function, Array]
};
exports.cardBasePropKeys = _utils_1.keysOf(exports.cardBaseProps);
const cardProps = Object.assign(Object.assign({}, _mixins_1.useTheme.props), exports.cardBaseProps);
exports.default = vue_1.defineComponent({
    name: 'Card',
    props: cardProps,
    setup(props) {
        const handleCloseClick = () => {
            const { onClose } = props;
            if (onClose)
                _utils_1.call(onClose);
        };
        const { mergedClsPrefixRef, NConfigProvider } = _mixins_1.useConfig(props);
        const themeRef = _mixins_1.useTheme('Card', 'Card', index_cssr_1.default, styles_1.cardLight, props, mergedClsPrefixRef);
        const rtlEnabledRef = use_rtl_1.default('Card', NConfigProvider === null || NConfigProvider === void 0 ? void 0 : NConfigProvider.mergedRtlRef, mergedClsPrefixRef);
        return {
            rtlEnabled: rtlEnabledRef,
            mergedClsPrefix: mergedClsPrefixRef,
            mergedTheme: themeRef,
            handleCloseClick,
            cssVars: vue_1.computed(() => {
                const { size } = props;
                const { self: { color, colorModal, colorTarget, textColor, titleTextColor, titleFontWeight, borderColor, actionColor, borderRadius, closeColor, closeColorHover, closeColorPressed, lineHeight, closeSize, boxShadow, colorPopover, [_utils_1.createKey('padding', size)]: padding, [_utils_1.createKey('fontSize', size)]: fontSize, [_utils_1.createKey('titleFontSize', size)]: titleFontSize }, common: { cubicBezierEaseInOut } } = themeRef.value;
                const { top: paddingTop, left: paddingLeft, bottom: paddingBottom } = seemly_1.getPadding(padding);
                return {
                    '--bezier': cubicBezierEaseInOut,
                    '--border-radius': borderRadius,
                    '--color': color,
                    '--color-modal': colorModal,
                    '--color-popover': colorPopover,
                    '--color-target': colorTarget,
                    '--text-color': textColor,
                    '--line-height': lineHeight,
                    '--action-color': actionColor,
                    '--title-text-color': titleTextColor,
                    '--title-font-weight': titleFontWeight,
                    '--close-color': closeColor,
                    '--close-color-hover': closeColorHover,
                    '--close-color-pressed': closeColorPressed,
                    '--border-color': borderColor,
                    '--box-shadow': boxShadow,
                    // size
                    '--padding-top': paddingTop,
                    '--padding-bottom': paddingBottom,
                    '--padding-left': paddingLeft,
                    '--font-size': fontSize,
                    '--title-font-size': titleFontSize,
                    '--close-size': closeSize
                };
            })
        };
    },
    render() {
        const { segmented, bordered, hoverable, mergedClsPrefix, rtlEnabled, $slots } = this;
        return (vue_1.h("div", { class: [
                `${mergedClsPrefix}-card`,
                {
                    [`${mergedClsPrefix}-card--rtl`]: rtlEnabled,
                    [`${mergedClsPrefix}-card--content${typeof segmented !== 'boolean' && segmented.content === 'soft'
                        ? '-soft'
                        : ''}-segmented`]: segmented === true || (segmented !== false && segmented.content),
                    [`${mergedClsPrefix}-card--footer${typeof segmented !== 'boolean' && segmented.footer === 'soft'
                        ? '-soft'
                        : ''}-segmented`]: segmented === true || (segmented !== false && segmented.footer),
                    [`${mergedClsPrefix}-card--action-segmented`]: segmented === true || (segmented !== false && segmented.action),
                    [`${mergedClsPrefix}-card--bordered`]: bordered,
                    [`${mergedClsPrefix}-card--hoverable`]: hoverable
                }
            ], style: this.cssVars },
            $slots.cover ? (vue_1.h("div", { class: `${mergedClsPrefix}-card-cover`, role: "none" }, vue_1.renderSlot($slots, 'cover'))) : null,
            $slots.header || this.title || this.closable ? (vue_1.h("div", { class: `${mergedClsPrefix}-card-header` },
                vue_1.h("div", { class: `${mergedClsPrefix}-card-header__main`, style: this.headerStyle, role: "heading" }, vue_1.renderSlot($slots, 'header', {}, () => [this.title])),
                $slots['header-extra'] ? (vue_1.h("div", { class: `${mergedClsPrefix}-card-header__extra` }, vue_1.renderSlot($slots, 'header-extra'))) : null,
                this.closable ? (vue_1.h(_internal_1.NBaseClose, { clsPrefix: mergedClsPrefix, class: `${mergedClsPrefix}-card-header__close`, onClick: this.handleCloseClick })) : null)) : null,
            vue_1.h("div", { class: `${mergedClsPrefix}-card__content`, style: this.contentStyle, role: "none" }, $slots),
            $slots.footer ? (vue_1.h("div", { class: `${mergedClsPrefix}-card__footer`, style: this.footerStyle, role: "none" }, vue_1.renderSlot($slots, 'footer'))) : null,
            $slots.action ? (vue_1.h("div", { class: `${mergedClsPrefix}-card__action`, role: "none" }, vue_1.renderSlot($slots, 'action'))) : null));
    }
});
