import { defineComponent, computed, inject, h, renderSlot } from 'vue';
import { createKey, throwError } from '../../_utils';
import { timelineInjectionKey } from './Timeline';
const timelineItemProps = {
    time: [String, Number],
    title: String,
    content: String,
    type: {
        type: String,
        default: 'default'
    }
};
export default defineComponent({
    name: 'TimelineItem',
    props: timelineItemProps,
    setup(props) {
        const NTimeline = inject(timelineInjectionKey);
        if (!NTimeline) {
            throwError('timeline-item', '`n-timeline-item` must be placed inside `n-timeline`.');
        }
        return {
            mergedClsPrefix: NTimeline.mergedClsPrefixRef,
            cssVars: computed(() => {
                const { props: { size }, mergedThemeRef } = NTimeline;
                const { type } = props;
                const { self: { titleTextColor, contentTextColor, metaTextColor, lineColor, titleFontWeight, contentFontSize, [createKey('titleMargin', size)]: titleMargin, [createKey('titleFontSize', size)]: titleFontSize, [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 (h("div", { class: [
                `${mergedClsPrefix}-timeline-item`,
                `${mergedClsPrefix}-timeline-item--${this.type}-type`
            ], style: this.cssVars },
            h("div", { class: `${mergedClsPrefix}-timeline-item-timeline` },
                h("div", { class: `${mergedClsPrefix}-timeline-item-timeline__line` }),
                h("div", { class: `${mergedClsPrefix}-timeline-item-timeline__circle` })),
            h("div", { class: `${mergedClsPrefix}-timeline-item-content` },
                this.title || this.$slots.header ? (h("div", { class: `${mergedClsPrefix}-timeline-item-content__title` }, renderSlot(this.$slots, 'header', undefined, () => [this.title]))) : null,
                h("div", { class: `${mergedClsPrefix}-timeline-item-content__content` }, renderSlot(this.$slots, 'default', undefined, () => [
                    this.content
                ])),
                h("div", { class: `${mergedClsPrefix}-timeline-item-content__meta` }, renderSlot(this.$slots, 'footer', undefined, () => [this.time])))));
    }
});
