import _slicedToArray from "@babel/runtime/helpers/esm/slicedToArray";
import { createVNode as _createVNode } from "vue";
import { computed, defineComponent, ref, shallowRef, watchEffect } from 'vue';
import classNames from '../../_util/classNames';
import { calculateColor, calculateOffset } from '../util';
import useColorDrag from '../hooks/useColorDrag';
import Palette from './Palette';
import Gradient from './Gradient';
import Handler from './Handler';
import Transform from './Transform';
var Slider = defineComponent({
  name: 'Slider',
  props: ['gradientColors', 'direction', 'type', 'value', 'color', 'onChange', 'onChangeComplete', 'disabled', 'prefixCls'],
  setup: function setup(props) {
    var sliderRef = shallowRef();
    var transformRef = shallowRef();
    var colorRef = ref(props.color);
    var type = computed(function () {
      return props.type || 'hue';
    });
    var direction = computed(function () {
      return props.direction || 'x';
    });
    var disabledDrag = computed(function () {
      return props.disabled;
    });
    watchEffect(function () {
      colorRef.value = props.color;
    });
    var _useColorDrag = useColorDrag({
        colorRef: colorRef,
        targetRef: transformRef,
        containerRef: sliderRef,
        calculate: function calculate(containerRef) {
          return calculateOffset(containerRef, transformRef, colorRef, type.value);
        },
        onDragChange: function onDragChange(offsetValue) {
          var calcColor = calculateColor({
            offset: offsetValue,
            targetRef: transformRef,
            containerRef: sliderRef,
            color: props.color,
            type: type.value
          });
          colorRef.value = calcColor;
          props === null || props === void 0 ? void 0 : props.onChange(calcColor);
        },
        onDragChangeComplete: function onDragChangeComplete() {
          var _props$onChangeComple;
          (_props$onChangeComple = props.onChangeComplete) === null || _props$onChangeComple === void 0 ? void 0 : _props$onChangeComple.call(props, colorRef.value, type.value);
        },
        direction: direction,
        disabledDrag: disabledDrag
      }),
      _useColorDrag2 = _slicedToArray(_useColorDrag, 2),
      offset = _useColorDrag2[0],
      dragStartHandle = _useColorDrag2[1];
    return function () {
      return _createVNode("div", {
        "ref": sliderRef,
        "class": classNames("".concat(props.prefixCls, "-slider"), "".concat(props.prefixCls, "-slider-").concat(type.value)),
        "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, {
                "size": "small",
                "color": props.value,
                "prefixCls": props.prefixCls
              }, null)];
            }
          }), _createVNode(Gradient, {
            "colors": props.gradientColors,
            "direction": props.direction,
            "type": props.type,
            "prefixCls": props.prefixCls
          }, null)];
        }
      })]);
    };
  }
});
export default Slider;