import { createVNode as _createVNode } from "vue";
import _extends from "@babel/runtime/helpers/esm/extends";
import { computed, defineComponent, ref, toRef } from 'vue';
import { baseColorPickerProps } from '../interface';
import { calcOffset, calculateColor } from '../util';
import useColorDrag from '../hooks/useColorDrag';
import Palette from './Palette';
import Transform from './Transform';
import Handler from './Handler';
const pickerProps = () => _extends({}, baseColorPickerProps());
const Picker = defineComponent({
  name: 'Picker',
  inheritAttrs: false,
  props: pickerProps(),
  setup(props) {
    const pickerRef = ref();
    const transformWrapperRef = ref();
    const transformRef = computed(() => {
      var _a;
      return (_a = transformWrapperRef.value) === null || _a === void 0 ? void 0 : _a.divRef;
    });
    const colorRef = ref(props.color);
    const onDragChange = offsetValue => {
      const calcColor = calculateColor({
        offset: offsetValue,
        targetRef: transformRef.value,
        containerRef: pickerRef.value,
        color: props.color
      });
      colorRef.value = calcColor;
      props.onChange(calcColor);
    };
    const [offset, dragStartHandle] = useColorDrag({
      color: toRef(props, 'color'),
      containerRef: pickerRef,
      targetRef: transformRef,
      calculate: () => calcOffset(props.color),
      onDragChange,
      onDragChangeComplete: () => {
        var _a;
        return (_a = props.onChangeComplete) === null || _a === void 0 ? void 0 : _a.call(props, colorRef.value);
      },
      disabledDrag: toRef(props, 'disabled')
    });
    return () => {
      const {
        prefixCls,
        color
      } = props;
      return _createVNode("div", {
        "ref": pickerRef,
        "class": `${prefixCls}-select`,
        "onMousedown": dragStartHandle,
        "onTouchstart": dragStartHandle
      }, [_createVNode(Palette, {
        "prefixCls": prefixCls
      }, {
        default: () => [_createVNode(Transform, {
          "x": offset.value.x,
          "y": offset.value.y,
          "ref": transformWrapperRef
        }, {
          default: () => [_createVNode(Handler, {
            "color": color.toRgbString(),
            "prefixCls": prefixCls
          }, null)]
        }), _createVNode("div", {
          "class": `${prefixCls}-saturation`,
          "style": {
            backgroundColor: `hsl(${color.toHsb().h},100%, 50%)`,
            backgroundImage: 'linear-gradient(0deg, #000, transparent),linear-gradient(90deg, #fff, hsla(0, 0%, 100%, 0))'
          }
        }, null)]
      })]);
    };
  }
});
export default Picker;