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

"use strict";
var _sfc_main = /* @__PURE__ */ defineComponent({
  ...{ name: "AlphaSlider" },
  __name: "alpha-slider",
  props: alphaSliderProps,
  setup(__props, { expose: __expose }) {
    const props = __props;
    const bem = createNamespace("alpha-slider");
    const instance = getCurrentInstance();
    const bar = shallowRef(null);
    const thumb = shallowRef(null);
    const thumbLeft = ref(0);
    const thumbTop = ref(0);
    const background = ref("");
    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();
      if (!props.vertical) {
        let left = event.clientX - rect.left;
        left = Math.max(thumb.value.offsetWidth / 2, left);
        left = Math.min(
          left,
          rect.width - thumb.value.offsetWidth / 2
        );
        props.color?.set(
          "alpha",
          Math.round(
            (left - thumb.value.offsetWidth / 2) / (rect.width - thumb.value.offsetWidth) * 100
          )
        );
      } else {
        let top = event.clientY - rect.top;
        top = Math.max(thumb.value.offsetHeight / 2, top);
        top = Math.min(
          top,
          rect.height - thumb.value.offsetHeight / 2
        );
        props.color?.set(
          "alpha",
          Math.round(
            (top - thumb.value.offsetHeight / 2) / (rect.height - thumb.value.offsetHeight) * 100
          )
        );
      }
    };
    const update = () => {
      thumbLeft.value = getThumbLeft();
      thumbTop.value = getThumbTop();
      background.value = getBackground();
    };
    const getThumbLeft = () => {
      if (props.vertical) return 0;
      const ele = instance?.vnode.el;
      const alpha = props.color?.get("alpha");
      if (!ele) return 0;
      return Math.round(
        alpha * (ele.offsetWidth - thumb.value.offsetWidth / 2) / 100
      );
    };
    const getThumbTop = () => {
      const ele = instance?.vnode.el;
      if (!props.vertical) return 0;
      const alpha = props.color?.get("alpha");
      if (!ele) return 0;
      return Math.round(
        alpha * (ele.offsetHeight - thumb.value.offsetHeight / 2) / 100
      );
    };
    const getBackground = () => {
      if (props.color && props.color.value) {
        const { r, g, b } = props.color.toRgb();
        return `linear-gradient(to right, rgba(${r}, ${g}, ${b}, 0) 0%, rgba(${r}, ${g}, ${b}, 1) 100%)`;
      }
      return "";
    };
    watch(
      () => props.color?.get("alpha"),
      () => {
        update();
      }
    );
    watch(
      () => props.color?.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")),
              style: normalizeStyle({ background: background.value }),
              onClick: handleClick
            },
            null,
            6
            /* CLASS, STYLE */
          ),
          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=alpha-slider.vue2.mjs.map
