import { defineComponent, getCurrentInstance, ref, computed, watch, onMounted, createElementBlock, openBlock, normalizeClass, unref, createElementVNode, normalizeStyle } from 'vue';
import '../config/index.mjs';
import draggable from '../config/draggable.mjs';
import '../../../../utils/index.mjs';
import { createNamespace } from '../../../../utils/create-namespace.mjs';
import { hueSliderProps } from '../config/hue-slider.mjs';

"use strict";
var _sfc_main = /* @__PURE__ */ defineComponent({
  ...{ name: "HueSlider" },
  __name: "hue-slider",
  props: hueSliderProps,
  setup(__props, { expose: __expose }) {
    const props = __props;
    const bem = createNamespace("hue-slider");
    const instance = getCurrentInstance();
    const thumb = ref(null);
    const bar = ref(null);
    const thumbLeft = ref(0);
    const thumbTop = ref(0);
    const hueValue = computed(() => props.color?.get("hue") ?? false);
    const handleClick = (event) => {
      const target = event.target;
      if (target !== thumb.value) {
        handleDrag(event);
      }
    };
    const handleDrag = (event) => {
      const ele = instance?.vnode.el;
      const rect = ele.getBoundingClientRect();
      let hue;
      if (!props.vertical) {
        let left = event.clientX - rect.left;
        left = Math.min(
          left,
          rect.width - thumb.value.offsetWidth / 2
        );
        left = Math.max(thumb.value.offsetWidth / 2, left);
        hue = Math.round(
          (left - thumb.value.offsetWidth / 2) / (rect.width - thumb.value.offsetWidth) * 360
        );
      } else {
        let top = event.clientY - rect.top;
        top = Math.min(
          top,
          rect.height - thumb.value.offsetHeight / 2
        );
        top = Math.max(thumb.value.offsetHeight / 2, top);
        hue = Math.round(
          (top - thumb.value.offsetHeight / 2) / (rect.height - thumb.value.offsetHeight) * 360
        );
      }
      props.color.set("hue", hue);
    };
    const getThumbLeft = () => {
      const ele = instance?.vnode.el;
      if (props.vertical) return 0;
      const hue = props.color.get("hue");
      if (!ele) return 0;
      return Math.round(
        hue * (ele.offsetWidth - thumb.value.offsetWidth / 2) / 360
      );
    };
    const getThumbTop = () => {
      const ele = instance?.vnode.el;
      if (!props.vertical) return 0;
      const hue = props.color.get("hue");
      if (!ele) return 0;
      return Math.round(
        hue * (ele.offsetHeight - thumb.value.offsetHeight / 2) / 360
      );
    };
    const update = () => {
      thumbLeft.value = getThumbLeft();
      thumbTop.value = getThumbTop();
    };
    watch(
      () => hueValue.value,
      () => {
        update();
      }
    );
    onMounted(() => {
      const dragConfig = {
        drag: (event) => {
          handleDrag(event);
        },
        end: (event) => {
          handleDrag(event);
        }
      };
      draggable(bar.value, dragConfig);
      draggable(thumb.value, dragConfig);
      update();
    });
    __expose({
      update
    });
    return (_ctx, _cache) => {
      return openBlock(), createElementBlock(
        "div",
        {
          class: normalizeClass({ [unref(bem).is("vertical")]: _ctx.vertical, [unref(bem).b()]: true })
        },
        [
          createElementVNode(
            "div",
            {
              ref_key: "bar",
              ref: bar,
              class: normalizeClass(unref(bem).m("bar")),
              onClick: handleClick
            },
            null,
            2
            /* CLASS */
          ),
          createElementVNode(
            "div",
            {
              ref_key: "thumb",
              ref: thumb,
              class: normalizeClass(unref(bem).m("thumb")),
              style: normalizeStyle({ left: thumbLeft.value + "px", top: thumbTop.value + "px" })
            },
            null,
            6
            /* CLASS, STYLE */
          )
        ],
        2
        /* CLASS */
      );
    };
  }
});

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