"use strict";
Object.defineProperty(exports, "__esModule", { value: true });
const vue_1 = require("vue");
const vooks_1 = require("vooks");
const seemly_1 = require("seemly");
const _internal_1 = require("../../_internal");
const _mixins_1 = require("../../_mixins");
const _utils_1 = require("../../_utils");
const styles_1 = require("../styles");
const index_cssr_1 = require("./styles/index.cssr");
const STROKE_WIDTH = {
    small: 20,
    medium: 18,
    large: 16
};
const spinProps = Object.assign(Object.assign({}, _mixins_1.useTheme.props), { stroke: {
        type: String,
        default: undefined
    }, size: {
        type: [String, Number],
        default: 'medium'
    }, show: {
        type: Boolean,
        default: true
    }, strokeWidth: {
        type: Number,
        default: undefined
    }, spinning: {
        type: Boolean,
        validator: () => {
            _utils_1.warn('spin', '`spinning` is deprecated, please use `show` instead.');
            return true;
        },
        default: undefined
    } });
exports.default = vue_1.defineComponent({
    name: 'Spin',
    props: spinProps,
    setup(props) {
        const { mergedClsPrefixRef } = _mixins_1.useConfig(props);
        const themeRef = _mixins_1.useTheme('Spin', 'Spin', index_cssr_1.default, styles_1.spinLight, props, mergedClsPrefixRef);
        return {
            mergedClsPrefix: mergedClsPrefixRef,
            compitableShow: vooks_1.useCompitable(props, ['spinning', 'show']),
            mergedStrokeWidth: vue_1.computed(() => {
                const { strokeWidth } = props;
                if (strokeWidth !== undefined)
                    return strokeWidth;
                const { size } = props;
                return STROKE_WIDTH[typeof size === 'number' ? 'medium' : size];
            }),
            cssVars: vue_1.computed(() => {
                const { size: spinSize } = props;
                const { common: { cubicBezierEaseInOut }, self } = themeRef.value;
                const { opacitySpinning, color } = self;
                const size = typeof spinSize === 'number'
                    ? seemly_1.pxfy(spinSize)
                    : self[_utils_1.createKey('size', spinSize)];
                return {
                    '--bezier': cubicBezierEaseInOut,
                    '--opacity-spinning': opacitySpinning,
                    '--size': size,
                    '--color': color
                };
            })
        };
    },
    render() {
        const { $slots, mergedClsPrefix } = this;
        return $slots.default ? (vue_1.h("div", { class: `${mergedClsPrefix}-spin-container`, style: this.cssVars },
            vue_1.h("div", { class: [
                    `${mergedClsPrefix}-spin-content`,
                    this.compitableShow && `${mergedClsPrefix}-spin-content--spinning`
                ] }, $slots),
            vue_1.h(vue_1.Transition, { name: "fade-in-transition" }, {
                default: () => this.compitableShow ? (vue_1.h(_internal_1.NBaseLoading, { clsPrefix: mergedClsPrefix, stroke: this.stroke, strokeWidth: this.mergedStrokeWidth, class: `${mergedClsPrefix}-spin` })) : null
            }))) : (vue_1.h(_internal_1.NBaseLoading, { clsPrefix: mergedClsPrefix, style: this.cssVars, stroke: this.stroke, "stroke-width": this.mergedStrokeWidth, class: `${mergedClsPrefix}-spin` }));
    }
});
