import { computed, h, defineComponent, mergeProps } from 'vue';
import { useConfig, useTheme } from '../../_mixins';
import style from './styles/index.cssr';
import { collapseTransitionLight } from '../styles';
import { NFadeInExpandTransition } from '../../_internal';
const collapseProps = Object.assign(Object.assign({}, useTheme.props), { collapsed: Boolean, appear: Boolean });
export default defineComponent({
    name: 'CollapseTransition',
    props: collapseProps,
    inheritAttrs: false,
    setup(props) {
        const { mergedClsPrefixRef } = useConfig(props);
        const mergedThemeRef = useTheme('CollapseTransition', 'CollapseTransition', style, collapseTransitionLight, props);
        return {
            mergedClsPrefix: mergedClsPrefixRef,
            cssVars: computed(() => {
                const { self: { bezier } } = mergedThemeRef.value;
                return {
                    '--bezier': bezier
                };
            })
        };
    },
    render() {
        return (h(NFadeInExpandTransition, { appear: this.appear }, {
            default: () => this.collapsed
                ? h('div', // Don't use jsx since it would cause useless spread in each rendering
                mergeProps({
                    class: `${this.mergedClsPrefix}-collapse-transition`,
                    style: this.cssVars
                }, this.$attrs), this.$slots)
                : null
        }));
    }
});
