import _slicedToArray from "@babel/runtime/helpers/esm/slicedToArray";
import { createVNode as _createVNode } from "vue";
import { computed, defineComponent, ref, shallowRef, watchEffect } from 'vue';
import useColorDrag from '../hooks/useColorDrag';
import { calculateColor, calculateOffset } from '../util';
import Handler from './Handler';
import Palette from './Palette';
import Transform from './Transform';
var Picker = defineComponent({
  name: 'Picker',
  props: ['color', 'prefixCls', 'onChange', 'onChangeComplete', 'disabled'],
  setup: function setup(props) {
    var pickerRef = shallowRef();
    var transformRef = shallowRef();
    var colorRef = ref(props.color);
    var disabledDrag = computed(function () {
      return props.disabled;
    });
    watchEffect(function () {
      colorRef.value = props.color;
    });
    var _useColorDrag = useColorDrag({
        colorRef: colorRef,
        containerRef: pickerRef,
        targetRef: transformRef,
        calculate: function calculate(containerRef) {
          return calculateOffset(containerRef, transformRef, colorRef);
        },
        onDragChange: function onDragChange(offsetValue) {
          var calcColor = calculateColor({
            offset: offsetValue,
            targetRef: transformRef,
            containerRef: pickerRef,
            color: props.color
          });
          colorRef.value = calcColor;
          props === null || props === void 0 ? void 0 : props.onChange(calcColor);
        },
        onDragChangeComplete: function onDragChangeComplete() {
          var _props$onChangeComple;
          return props === null || props === void 0 ? void 0 : (_props$onChangeComple = props.onChangeComplete) === null || _props$onChangeComple === void 0 ? void 0 : _props$onChangeComple.call(props, colorRef.value);
        },
        disabledDrag: disabledDrag
      }),
      _useColorDrag2 = _slicedToArray(_useColorDrag, 2),
      offset = _useColorDrag2[0],
      dragStartHandle = _useColorDrag2[1];
    return function () {
      return _createVNode("div", {
        "ref": pickerRef,
        "class": "".concat(props.prefixCls, "-select"),
        "onMousedown": dragStartHandle,
        "onTouchstart": dragStartHandle
      }, [_createVNode(Palette, {
        "prefixCls": props.prefixCls
      }, {
        default: function _default() {
          return [_createVNode(Transform, {
            "offset": offset.value,
            "ref": transformRef
          }, {
            default: function _default() {
              return [_createVNode(Handler, {
                "color": props.color.toRgbString(),
                "prefixCls": props.prefixCls
              }, null)];
            }
          }), _createVNode("div", {
            "class": "".concat(props.prefixCls, "-saturation"),
            "style": {
              backgroundColor: "hsl(".concat(props.color.toHsb().h, ",100%, 50%)"),
              backgroundImage: 'linear-gradient(0deg, #000, transparent),linear-gradient(90deg, #fff, hsla(0, 0%, 100%, 0))'
            }
          }, null)];
        }
      })]);
    };
  }
});
export default Picker;