import { jsx as a, jsxs as v } from "react/jsx-runtime";
import { useAppDispatch as U } from "./index-use-app-dispatch.js";
import { useFormConfig as j } from "./index-useFormConfig.js";
import { debounce as F } from "./index-debounce.js";
import { isValidHexColor as d, normalizeHexColor as I } from "./index-hex-color.js";
import { InputBase as B } from "./index-InputBase.js";
import { Form as M } from "./index-Form.js";
import { Label as W } from "./index-Label.js";
import { useState as V, useEffect as _, useMemo as $, useCallback as b } from "react";
import u from "./index-ColorPicker.module.scss.js";
import { useFormConfigContext as w } from "./index-FormConfigContext.js";
const k = 50, eo = (y) => {
  const {
    label: E,
    replacements: P,
    onColorChange: s,
    initialColor: T,
    color: r,
    formconfig: n,
    maxWidth: C,
    testId: i
  } = y, p = U(), h = r ?? T ?? "", [l, c] = V(h), [D, m] = V(h), f = w(), H = f == null ? void 0 : f.formConfig;
  _(() => {
    r !== void 0 && (c(r), m(r));
  }, [r]);
  const {
    formConfig: N
  } = j({
    inputs: {
      hexColor: {
        fieldType: "ColorPicker",
        validation: {
          validateHexColor: !0
        }
      }
    }
  }), t = n || N.hexColor;
  t != null && t.validation && (t.validation.validateHexColor = !0);
  const z = $(() => l && d(l) ? I(l) : "#000000", [l]), g = b(F((e) => {
    s && s(e);
  }, k), [s]), x = b(F((e) => {
    d(e) && n && n.setStateValue && p(n.setStateValue(e));
  }, k), [p, n]), A = (e) => {
    const o = e.target.value;
    c(o), m(o), g(o), x(o);
  }, L = (e) => {
    const o = e.target.value;
    if (m(o), d(o)) {
      const S = I(o);
      c(S), g(o), x(o);
    }
  };
  return a(M, {
    config: H ?? t,
    children: v("div", {
      className: u.container,
      style: C ? {
        "--colorPickerMaxWidth": C
      } : void 0,
      children: [a(W, {
        value: E,
        replacements: P
      }), v("div", {
        className: u.inputContainer,
        children: [a("input", {
          type: "color",
          value: z,
          onChange: A,
          className: u.colorInput,
          "data-testid": i ? `${i}-color` : void 0
        }), a(B, {
          formFieldType: "ColorPicker",
          value: D,
          onChange: L,
          formconfig: t,
          testId: i ? `${i}-text` : void 0
        })]
      })]
    })
  });
};
export {
  eo as ColorPicker
};
