"use strict";
Object.defineProperty(exports, "__esModule", { value: true });
const vue_1 = require("vue");
const context_1 = require("../ssr/context");
// The current implemention will take extra perf & memory usage. I just want to
// make it work now. If we can determine whether the style is already mounted,
// we won't need to watch effect. However, we need to make css-render support
// it. We need to refactor ssrAdapter and expose a exists function
function useRtl(mountId, rtlStateRef, clsPrefixRef) {
    if (!rtlStateRef)
        return undefined;
    const ssrAdapter = vue_1.inject(context_1.ssrInjectionKey, undefined);
    const componentRtlStateRef = vue_1.computed(() => {
        const { value: rtlState } = rtlStateRef;
        if (!rtlState) {
            return undefined;
        }
        const componentRtlState = rtlState[mountId];
        if (!componentRtlState) {
            return undefined;
        }
        return componentRtlState;
    });
    const mountStyle = () => {
        vue_1.watchEffect(() => {
            const { value: clsPrefix } = clsPrefixRef;
            const { value: componentRtlState } = componentRtlStateRef;
            if (!componentRtlState)
                return;
            componentRtlState.style.mount({
                id: `${clsPrefix}${mountId}Rtl`,
                head: true,
                props: {
                    bPrefix: clsPrefix ? `.${clsPrefix}-` : undefined
                },
                ssr: ssrAdapter
            });
        });
    };
    if (ssrAdapter) {
        mountStyle();
    }
    else {
        vue_1.onBeforeMount(mountStyle);
    }
    return componentRtlStateRef;
}
exports.default = useRtl;
