"use strict";
Object.defineProperty(exports, "__esModule", { value: true });
const vue_1 = require("vue");
const _utils_1 = require("../../_utils");
const Timeline_1 = require("./Timeline");
const timelineItemProps = {
    time: [String, Number],
    title: String,
    content: String,
    type: {
        type: String,
        default: 'default'
    }
};
exports.default = vue_1.defineComponent({
    name: 'TimelineItem',
    props: timelineItemProps,
    setup(props) {
        const NTimeline = vue_1.inject(Timeline_1.timelineInjectionKey);
        if (!NTimeline) {
            _utils_1.throwError('timeline-item', '`n-timeline-item` must be placed inside `n-timeline`.');
        }
        return {
            mergedClsPrefix: NTimeline.mergedClsPrefixRef,
            cssVars: vue_1.computed(() => {
                const { props: { size }, mergedThemeRef } = NTimeline;
                const { type } = props;
                const { self: { titleTextColor, contentTextColor, metaTextColor, lineColor, titleFontWeight, contentFontSize, [_utils_1.createKey('titleMargin', size)]: titleMargin, [_utils_1.createKey('titleFontSize', size)]: titleFontSize, [_utils_1.createKey('circleBorder', type)]: circleBorder }, common: { cubicBezierEaseInOut } } = mergedThemeRef.value;
                return {
                    '--bezier': cubicBezierEaseInOut,
                    '--circle-border': circleBorder,
                    '--content-font-size': contentFontSize,
                    '--content-text-color': contentTextColor,
                    '--line-color': lineColor,
                    '--meta-text-color': metaTextColor,
                    '--title-font-size': titleFontSize,
                    '--title-font-weight': titleFontWeight,
                    '--title-margin': titleMargin,
                    '--title-text-color': titleTextColor
                };
            })
        };
    },
    render() {
        const { mergedClsPrefix } = this;
        return (vue_1.h("div", { class: [
                `${mergedClsPrefix}-timeline-item`,
                `${mergedClsPrefix}-timeline-item--${this.type}-type`
            ], style: this.cssVars },
            vue_1.h("div", { class: `${mergedClsPrefix}-timeline-item-timeline` },
                vue_1.h("div", { class: `${mergedClsPrefix}-timeline-item-timeline__line` }),
                vue_1.h("div", { class: `${mergedClsPrefix}-timeline-item-timeline__circle` })),
            vue_1.h("div", { class: `${mergedClsPrefix}-timeline-item-content` },
                this.title || this.$slots.header ? (vue_1.h("div", { class: `${mergedClsPrefix}-timeline-item-content__title` }, vue_1.renderSlot(this.$slots, 'header', undefined, () => [this.title]))) : null,
                vue_1.h("div", { class: `${mergedClsPrefix}-timeline-item-content__content` }, vue_1.renderSlot(this.$slots, 'default', undefined, () => [
                    this.content
                ])),
                vue_1.h("div", { class: `${mergedClsPrefix}-timeline-item-content__meta` }, vue_1.renderSlot(this.$slots, 'footer', undefined, () => [this.time])))));
    }
});
