import { jsx as r } from "react/jsx-runtime";
import { useState as g } from "react";
import { ColorPicker as P } from "../ColorPicker/ColorPicker.es.js";
import { Flyout as x } from "../Flyout/Flyout.es.js";
import { ColorFormat as y } from "../../types/colors.es.js";
import { ColorInputTrigger as C } from "./ColorPickerTrigger.es.js";
import { ColorPreview as O } from "../ColorPicker/ColorPreview.es.js";
const v = ({
  id: u,
  onClick: o,
  onClose: t,
  onSelect: c,
  currentColor: a,
  palettes: d,
  disabled: m = !1,
  clearable: h = !1,
  onClear: n,
  onDelete: i
}) => {
  const [f, e] = g(!1), [l, F] = g(y.Hex), s = (p) => {
    p || t == null || t(), e(p);
  };
  return /* @__PURE__ */ r(
    x,
    {
      hug: !1,
      onConfirm: () => {
        e(!1), o == null || o();
      },
      isOpen: f,
      onCancel: () => s(!1),
      contentMinHeight: 150,
      fixedHeader: /* @__PURE__ */ r(O, { color: a || { red: 255, green: 255, blue: 255 } }),
      onOpenChange: s,
      isTriggerDisabled: m,
      trigger: /* @__PURE__ */ r(
        C,
        {
          isOpen: f,
          currentColor: a,
          format: l,
          disabled: m,
          id: u,
          clearable: h,
          onClear: () => {
            e(!1), n && n();
          },
          onDelete: i ? () => {
            e(!1), i && i();
          } : void 0
        }
      ),
      children: /* @__PURE__ */ r(
        P,
        {
          currentFormat: l,
          setFormat: F,
          palettes: d,
          showPreview: !1,
          currentColor: a || { red: 255, green: 255, blue: 255 },
          onSelect: c
        }
      )
    }
  );
};
v.displayName = "FondueColorPickerFlyout";
export {
  v as ColorPickerFlyout
};
//# sourceMappingURL=ColorPickerFlyout.es.js.map
