import { useToken as g } from "@aplus-frontend/antdv/es/theme/internal";
import { injectGlobal as S, cx as b } from "@emotion/css";
import V from "@emotion/css/create-instance";
import { omit as f, isFunction as w } from "lodash-unified";
import { ref as A, computed as a, watch as k } from "vue";
import "../../config-provider/index.mjs";
import { useToken as h } from "../../config-provider/hooks/use-token.mjs";
import { css as j } from "./instance.mjs";
import { downSpecificityPlugin as G } from "./plugin-specificity.mjs";
import { TokenUtil as P } from "./TokenUtil.mjs";
import { camelToKebab as x, generateCssVar as E } from "./utils.mjs";
import { useGlobalConfig as F } from "../../config-provider/hooks/use-global-config.mjs";
const { css: Q } = V({
  key: "css-dev-only",
  stylisPlugins: [G]
});
function H(l) {
  const t = {};
  for (const n in l)
    t[n] = `var(${x(n)})`;
  return t;
}
function R(l, t, n, d) {
  return (s) => {
    const u = l.split("."), { token: m, rootCls: p } = h(), [, C] = g(), T = A(), c = F("namespace"), $ = a(() => ({
      ...f(m.value || {}, "components"),
      ...m.value.components?.[u[0]] || {}
    })), i = a(() => {
      const e = m.value.components?.[u[0]] || {};
      return {
        ...w(n) ? n($.value) : n || {},
        ...e
      };
    }), v = a(() => ({
      ...f(m.value || {}, "components"),
      ...i.value,
      componentCls: `.${c.value}-${s}`,
      namespace: c.value
    }));
    return k(
      () => c.value,
      (e) => {
        const o = H(
          v.value
        );
        o.componentCls = `.${e}-${s}`, o.namespace = e, o.calc = (y) => new P(y), o.antdv = C.value;
        const r = t(o, {
          ...v.value,
          componentCls: `.${e}-${s}`,
          namespace: e
        });
        S(r);
      },
      { immediate: !0 }
    ), k(
      [() => i.value, () => p.value],
      ([e, o]) => {
        const r = E(e, d);
        Object.keys(r).length && j({
          [`.${o}.${c.value}-${s}`]: r
        });
      },
      { deep: !0, immediate: !0 }
    ), a(() => b(p.value, T.value));
  };
}
export {
  R as genComponentStyleHook
};
