import { defineComponent, ref, reactive, computed, provide, nextTick, watch, onMounted, resolveComponent, createBlock, openBlock, normalizeClass, unref, withCtx, createCommentVNode, createVNode, mergeProps, createElementVNode, normalizeStyle, createTextVNode } from 'vue';
import '../../../utils/index.mjs';
import { useDebounceFn } from '@vueuse/core';
import { Form } from 'ant-design-vue';
import './config/index.mjs';
import Color from './config/color.mjs';
import ColorPipette from './config/color-pipette/index.mjs';
import './components/alpha-slider.vue.mjs';
import './components/hue-slider.vue.mjs';
import './components/pre-define.vue.mjs';
import './components/sv-panel.vue.mjs';
import { createNamespace } from '../../../utils/create-namespace.mjs';
import { displayedRgb, colorPickerEmits, colorPickerProps } from './config/color-picker.mjs';
import { OPTIONS_KEY } from './config/use-options.mjs';
import _sfc_main$1 from './components/sv-panel.vue2.mjs';
import _sfc_main$2 from './components/hue-slider.vue2.mjs';
import _sfc_main$3 from './components/alpha-slider.vue2.mjs';
import _sfc_main$4 from './components/pre-define.vue2.mjs';

"use strict";
var _sfc_main = /* @__PURE__ */ defineComponent({
  ...{ name: "LlColorPicker" },
  __name: "color-picker",
  props: colorPickerProps,
  emits: colorPickerEmits,
  setup(__props, { expose: __expose, emit: __emit }) {
    const props = __props;
    const emits = __emit;
    const bem = createNamespace("color-picker");
    const hasClickBtn = ref(false);
    const hueSlider = ref();
    const svPanel = ref();
    const alpha = ref();
    const color = reactive(
      new Color({
        enableAlpha: props.showAlpha,
        format: props.colorFormat
      })
    );
    const pipette = reactive(
      new ColorPipette({
        container: props.pipetteContainer,
        colorFormat: props.colorFormat,
        listener: {
          onOk: async (e) => {
            console.log({
              color: e.color,
              colors: e.colors,
              container: props.pipetteContainer
            });
            color.fromString(e.color);
            customInput.value = e.color;
          }
        }
      })
    );
    const showPicker = ref(false);
    const showPanelColor = ref(false);
    const customInput = ref("");
    const formItemContext = Form.useInjectFormItemContext();
    const displayedColor = computed(() => {
      if (!props.value && !showPanelColor.value) {
        return "transparent";
      }
      return displayedRgb(color, props.showAlpha);
    });
    const colorDisabled = computed(() => {
      return props.disabled;
    });
    const currentColor = computed(() => {
      return !props.value && !showPanelColor.value ? "" : color.value;
    });
    provide(OPTIONS_KEY, {
      currentColor
    });
    const setShowPicker = (value) => {
      showPicker.value = value;
    };
    const debounceSetShowPicker = useDebounceFn(setShowPicker, 50);
    const hide = () => {
      debounceSetShowPicker(false);
      resetColor();
    };
    const resetColor = () => {
      nextTick(() => {
        if (props.value) {
          color.fromString(props.value);
        } else {
          showPanelColor.value = false;
        }
      });
    };
    const handleTrigger = () => {
      if (colorDisabled.value) return;
      debounceSetShowPicker(!showPicker.value);
    };
    const handleConfirm = () => {
      color.fromString(customInput.value);
    };
    const confirmValue = () => {
      hasClickBtn.value = true;
      const value = color.value;
      emits("update:value", value);
      emits("change", value);
      formItemContext.onFieldChange();
      debounceSetShowPicker(false);
      nextTick(() => {
        const newColor = new Color({
          enableAlpha: props.showAlpha,
          format: props.colorFormat
        });
        newColor.fromString(props.value);
        if (!color.compare(newColor)) {
          resetColor();
        }
      });
      showPicker.value = false;
    };
    const clear = () => {
      hasClickBtn.value = true;
      debounceSetShowPicker(false);
      emits("update:value", null);
      emits("change", null);
      formItemContext.onFieldChange();
      resetColor();
      showPicker.value = false;
    };
    const getPopupContainer = (triggerNode) => {
      return triggerNode.parentElement;
    };
    const handleColorPicking = async () => {
      pipette.start();
    };
    watch(
      () => props.value,
      (newVal) => {
        if (!newVal) {
          showPanelColor.value = false;
        } else if (newVal && newVal !== color.value) {
          color.fromString(newVal);
        }
      }
    );
    watch(
      () => currentColor.value,
      (val) => {
        customInput.value = val;
        emits("active-change", val);
      }
    );
    watch(
      () => color.value,
      () => {
        if (!props.value && !showPanelColor.value) {
          showPanelColor.value = true;
        }
      }
    );
    watch(
      () => showPicker.value,
      (newVal) => {
        if (newVal) {
          hasClickBtn.value = false;
        } else {
          if (!hasClickBtn.value) {
            hide();
          }
        }
        nextTick(() => {
          hueSlider.value?.update();
          setTimeout(() => {
            svPanel.value?.update();
            alpha.value?.update();
          }, 20);
        });
      }
    );
    watch([() => props.colorFormat, () => props.showAlpha], ([val, alpha2]) => {
      const newColor = new Color({
        enableAlpha: alpha2,
        format: val
      });
      for (const i in newColor) {
        if (Object.prototype.hasOwnProperty.call(color, i) && Object.prototype.hasOwnProperty.call(newColor, i)) {
          color[i] = newColor[i];
        }
      }
      pipette.setColorFormat(val);
      confirmValue();
    });
    onMounted(() => {
      if (props.value) {
        color.fromString(props.value);
        customInput.value = currentColor.value;
      }
    });
    __expose({
      getPopupContainer,
      setShowPicker,
      debounceSetShowPicker
    });
    return (_ctx, _cache) => {
      const _component_ll_input = resolveComponent("ll-input");
      const _component_ll_icon = resolveComponent("ll-icon");
      const _component_ll_button = resolveComponent("ll-button");
      const _component_a_popover = resolveComponent("a-popover");
      const _component_a_input_group = resolveComponent("a-input-group");
      return openBlock(), createBlock(_component_a_input_group, {
        compact: "",
        class: normalizeClass([unref(bem).b("container")])
      }, {
        default: withCtx(() => [
          !_ctx.pickerMode ? (openBlock(), createBlock(_component_ll_input, {
            key: 0,
            value: customInput.value,
            "onUpdate:value": _cache[0] || (_cache[0] = ($event) => customInput.value = $event),
            size: _ctx.size,
            disabled: colorDisabled.value,
            readonly: true,
            "allow-clear": _ctx.allowClear,
            placeholder: _ctx.placeholder,
            onClear: clear
          }, null, 8, ["value", "size", "disabled", "allow-clear", "placeholder"])) : createCommentVNode("v-if", true),
          createVNode(_component_a_popover, mergeProps({
            open: showPicker.value,
            trigger: "click"
          }, _ctx.$attrs), {
            content: withCtx(() => [
              createElementVNode(
                "div",
                {
                  class: normalizeClass(unref(bem).m("dropdown-main-wrapper"))
                },
                [
                  createVNode(_sfc_main$1, {
                    ref_key: "svPanel",
                    ref: svPanel,
                    color
                  }, null, 8, ["color"]),
                  createVNode(_sfc_main$2, {
                    ref_key: "hueSlider",
                    ref: hueSlider,
                    class: "hue-slider",
                    color,
                    vertical: ""
                  }, null, 8, ["color"])
                ],
                2
                /* CLASS */
              ),
              _ctx.showAlpha ? (openBlock(), createBlock(_sfc_main$3, {
                key: 0,
                ref_key: "alpha",
                ref: alpha,
                color
              }, null, 8, ["color"])) : createCommentVNode("v-if", true),
              _ctx.predefine.length ? (openBlock(), createBlock(_sfc_main$4, {
                key: 1,
                ref: "predefine",
                color,
                colors: _ctx.predefine
              }, null, 8, ["color", "colors"])) : createCommentVNode("v-if", true),
              createElementVNode(
                "div",
                {
                  class: normalizeClass(unref(bem).m("dropdown-button"))
                },
                [
                  createElementVNode(
                    "span",
                    {
                      class: normalizeClass(unref(bem).m("dropdown-value"))
                    },
                    [
                      props.usePipette ? (openBlock(), createBlock(_component_ll_button, {
                        key: 0,
                        size: "small",
                        onClick: handleColorPicking
                      }, {
                        default: withCtx(() => [
                          createVNode(_component_ll_icon, { "icon-name": "icon-straw" })
                        ]),
                        _: 1
                        /* STABLE */
                      })) : createCommentVNode("v-if", true),
                      createVNode(_component_ll_input, {
                        value: customInput.value,
                        "onUpdate:value": _cache[1] || (_cache[1] = ($event) => customInput.value = $event),
                        size: "small",
                        onPressEnter: handleConfirm,
                        onBlur: handleConfirm
                      }, null, 8, ["value"])
                    ],
                    2
                    /* CLASS */
                  ),
                  createElementVNode(
                    "div",
                    {
                      class: normalizeClass(unref(bem).m("button"))
                    },
                    [
                      createVNode(_component_ll_button, {
                        type: "link",
                        size: "small",
                        class: normalizeClass(unref(bem).m("cancel-button")),
                        onClick: clear
                      }, {
                        default: withCtx(() => [..._cache[2] || (_cache[2] = [
                          createTextVNode(
                            " \u6E05\u7A7A ",
                            -1
                            /* CACHED */
                          )
                        ])]),
                        _: 1
                        /* STABLE */
                      }, 8, ["class"]),
                      createVNode(_component_ll_button, {
                        size: "small",
                        onClick: confirmValue
                      }, {
                        default: withCtx(() => [..._cache[3] || (_cache[3] = [
                          createTextVNode(
                            " \u786E\u5B9A ",
                            -1
                            /* CACHED */
                          )
                        ])]),
                        _: 1
                        /* STABLE */
                      })
                    ],
                    2
                    /* CLASS */
                  )
                ],
                2
                /* CLASS */
              )
            ]),
            default: withCtx(() => [
              createVNode(_component_ll_button, {
                class: normalizeClass(unref(bem).b()),
                disabled: colorDisabled.value,
                size: _ctx.size,
                onClick: handleTrigger
              }, {
                icon: withCtx(() => [
                  createElementVNode(
                    "div",
                    {
                      class: normalizeClass([
                        unref(bem).m("color"),
                        _ctx.showAlpha ? unref(bem).is("alpha") : "",
                        !_ctx.pickerMode ? unref(bem).is("show-input") : ""
                      ])
                    },
                    [
                      createElementVNode(
                        "div",
                        {
                          class: normalizeClass([unref(bem).m("color-inner")]),
                          style: normalizeStyle({ backgroundColor: displayedColor.value })
                        },
                        [
                          createVNode(_component_ll_icon, {
                            "icon-name": showPicker.value ? "icon-line-arrow-folding" : "icon-line-arrow-down",
                            color: "var(--default-icon)",
                            size: _ctx.size === "small" ? 12 : void 0
                          }, null, 8, ["icon-name", "size"])
                        ],
                        6
                        /* CLASS, STYLE */
                      )
                    ],
                    2
                    /* CLASS */
                  )
                ]),
                _: 1
                /* STABLE */
              }, 8, ["class", "disabled", "size"])
            ]),
            _: 1
            /* STABLE */
          }, 16, ["open"])
        ]),
        _: 1
        /* STABLE */
      }, 8, ["class"]);
    };
  }
});

export { _sfc_main as default };
//# sourceMappingURL=color-picker.vue2.mjs.map
