"use strict";
Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
const aria = require("../../../../constants/aria.js");
const event = require("../../../../utils/dom/event.js");
const position = require("../../../../utils/dom/position.js");
const style = require("../../../../utils/dom/style.js");
const index = require("../../../../hooks/use-namespace/index.js");
const draggable = require("../utils/draggable.js");
const Vue = require("vue");
const useSvPanel = (props) => {
  const instance = Vue.getCurrentInstance();
  const cursorRef = Vue.ref();
  const cursorTop = Vue.ref(0);
  const cursorLeft = Vue.ref(0);
  const background = Vue.ref("hsl(0, 100%, 50%)");
  const saturation = Vue.computed(() => props.color.get("saturation"));
  const brightness = Vue.computed(() => props.color.get("value"));
  const hue = Vue.computed(() => props.color.get("hue"));
  function handleClick(event2) {
    var _a;
    if (props.disabled) return;
    if (event2.target !== cursorRef.value) handleDrag(event2);
    (_a = cursorRef.value) == null ? void 0 : _a.focus({ preventScroll: true });
  }
  function handleDrag(event2) {
    if (props.disabled) return;
    const rect = instance.vnode.el.getBoundingClientRect();
    const { clientX, clientY } = position.getClientXY(event2);
    let left = clientX - rect.left;
    let top = clientY - rect.top;
    left = Math.max(0, left);
    left = Math.min(left, rect.width);
    top = Math.max(0, top);
    top = Math.min(top, rect.height);
    cursorLeft.value = left;
    cursorTop.value = top;
    props.color.set({
      saturation: left / rect.width * 100,
      value: 100 - top / rect.height * 100
    });
  }
  function handleKeydown(event$1) {
    if (props.disabled) return;
    const { shiftKey } = event$1;
    const code = event.getEventCode(event$1);
    const step = shiftKey ? 10 : 1;
    let isPreventDefault = true;
    switch (code) {
      case aria.EVENT_CODE.left:
        incrementSaturation(-step);
        break;
      case aria.EVENT_CODE.right:
        incrementSaturation(step);
        break;
      case aria.EVENT_CODE.up:
        incrementBrightness(step);
        break;
      case aria.EVENT_CODE.down:
        incrementBrightness(-step);
        break;
      default:
        isPreventDefault = false;
        break;
    }
    isPreventDefault && event$1.preventDefault();
  }
  function incrementSaturation(step) {
    let next = saturation.value + step;
    next = next < 0 ? 0 : next > 100 ? 100 : next;
    props.color.set("saturation", next);
  }
  function incrementBrightness(step) {
    let next = brightness.value + step;
    next = next < 0 ? 0 : next > 100 ? 100 : next;
    props.color.set("value", next);
  }
  return {
    cursorRef,
    cursorTop,
    cursorLeft,
    background,
    saturation,
    brightness,
    hue,
    handleClick,
    handleDrag,
    handleKeydown
  };
};
const useSvPanelDOM = (props, { cursorTop, cursorLeft, background, handleDrag }) => {
  const instance = Vue.getCurrentInstance();
  const ns = index.useNamespace("color-svpanel");
  function update() {
    const saturation = props.color.get("saturation");
    const brightness = props.color.get("value");
    const { clientWidth: width, clientHeight: height } = instance.vnode.el;
    cursorLeft.value = saturation * width / 100;
    cursorTop.value = (100 - brightness) * height / 100;
    background.value = `hsl(${props.color.get("hue")}, 100%, 50%)`;
  }
  Vue.onMounted(() => {
    draggable.draggable(instance.vnode.el, {
      drag: (event2) => {
        handleDrag(event2);
      },
      end: (event2) => {
        handleDrag(event2);
      }
    });
    update();
  });
  Vue.watch([
    () => props.color.get("hue"),
    () => props.color.get("value"),
    () => props.color.value
  ], () => update());
  return {
    rootKls: Vue.computed(() => ns.b()),
    cursorKls: Vue.computed(() => ns.e("cursor")),
    rootStyle: Vue.computed(() => ({ backgroundColor: background.value })),
    cursorStyle: Vue.computed(() => ({
      top: style.addUnit(cursorTop.value),
      left: style.addUnit(cursorLeft.value)
    })),
    update
  };
};
exports.useSvPanel = useSvPanel;
exports.useSvPanelDOM = useSvPanelDOM;
