"use strict";
Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
const index = require("../../../../hooks/use-namespace/index.js");
const colorPickerPanel = require("../color-picker-panel.js");
const color = require("../utils/color.js");
const Vue = require("vue");
const usePredefine = (props) => {
  const { currentColor } = Vue.inject(colorPickerPanel.colorPickerPanelContextKey);
  const rgbaColors = Vue.ref(parseColors(props.colors, props.color));
  Vue.watch(() => currentColor.value, (val) => {
    const color$1 = new color.default({
      value: val,
      enableAlpha: props.enableAlpha
    });
    rgbaColors.value.forEach((item) => {
      item.selected = color$1.compare(item);
    });
  });
  Vue.watchEffect(() => {
    rgbaColors.value = parseColors(props.colors, props.color);
  });
  function handleSelect(index2) {
    props.color.fromString(props.colors[index2]);
  }
  function parseColors(colors, color$1) {
    return colors.map((value) => {
      const c = new color.default({
        value,
        enableAlpha: props.enableAlpha
      });
      c.selected = c.compare(color$1);
      return c;
    });
  }
  return {
    rgbaColors,
    handleSelect
  };
};
const usePredefineDOM = (props) => {
  const ns = index.useNamespace("color-predefine");
  const rootKls = Vue.computed(() => [ns.b(), ns.is("disabled", props.disabled)]);
  const colorsKls = Vue.computed(() => ns.e("colors"));
  function colorSelectorKls(item) {
    return [
      ns.e("color-selector"),
      ns.is("alpha", item.get("alpha") < 100),
      { selected: item.selected }
    ];
  }
  return {
    rootKls,
    colorsKls,
    colorSelectorKls
  };
};
exports.usePredefine = usePredefine;
exports.usePredefineDOM = usePredefineDOM;
