"use strict";
Object.defineProperty(exports, "__esModule", { value: true });
const vue_1 = require("vue");
const _mixins_1 = require("../../_mixins");
const _utils_1 = require("../../_utils");
const styles_1 = require("../styles");
const index_cssr_1 = require("./styles/index.cssr");
exports.default = vue_1.defineComponent({
    _n_icon__: true,
    name: 'Icon',
    props: Object.assign(Object.assign({}, _mixins_1.useTheme.props), { depth: [String, Number], size: [Number, String], color: String }),
    setup(props) {
        const { mergedClsPrefixRef } = _mixins_1.useConfig(props);
        const themeRef = _mixins_1.useTheme('Icon', 'Icon', index_cssr_1.default, styles_1.iconLight, props, mergedClsPrefixRef);
        return {
            mergedClsPrefix: mergedClsPrefixRef,
            mergedStyle: vue_1.computed(() => {
                const { size, color } = props;
                return {
                    fontSize: _utils_1.formatLength(size),
                    color
                };
            }),
            cssVars: vue_1.computed(() => {
                const { depth } = props;
                const { common: { cubicBezierEaseInOut }, self } = themeRef.value;
                if (depth !== undefined) {
                    const { color, [`opacity${depth}Depth`]: opacity } = self;
                    return {
                        '--bezier': cubicBezierEaseInOut,
                        '--color': color,
                        '--opacity': opacity
                    };
                }
                return {
                    '--bezier': cubicBezierEaseInOut
                };
            })
        };
    },
    render() {
        var _a;
        const { $parent, depth, mergedClsPrefix } = this;
        if ((_a = $parent === null || $parent === void 0 ? void 0 : $parent.$options) === null || _a === void 0 ? void 0 : _a._n_icon__) {
            _utils_1.warn('icon', "don't wrap `n-icon` inside `n-icon`");
        }
        return vue_1.h('i', vue_1.mergeProps(this.$attrs, {
            role: 'img',
            class: [
                `${mergedClsPrefix}-icon`,
                {
                    [`${mergedClsPrefix}-icon--depth`]: depth,
                    [`${mergedClsPrefix}-icon--color-transition`]: depth !== undefined
                }
            ],
            style: Object.assign(this.cssVars, this.mergedStyle)
        }), this.$slots);
    }
});
