"use strict";

var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
Object.defineProperty(exports, "__esModule", {
  value: true
});
exports.default = void 0;
var _vue = require("vue");
var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
var _classNames = _interopRequireDefault(require("../../_util/classNames"));
var _util = require("../util");
var _useColorDrag3 = _interopRequireDefault(require("../hooks/useColorDrag"));
var _Palette = _interopRequireDefault(require("./Palette"));
var _Gradient = _interopRequireDefault(require("./Gradient"));
var _Handler = _interopRequireDefault(require("./Handler"));
var _Transform = _interopRequireDefault(require("./Transform"));
var Slider = (0, _vue.defineComponent)({
  name: 'Slider',
  props: ['gradientColors', 'direction', 'type', 'value', 'color', 'onChange', 'onChangeComplete', 'disabled', 'prefixCls'],
  setup: function setup(props) {
    var sliderRef = (0, _vue.shallowRef)();
    var transformRef = (0, _vue.shallowRef)();
    var colorRef = (0, _vue.ref)(props.color);
    var type = (0, _vue.computed)(function () {
      return props.type || 'hue';
    });
    var direction = (0, _vue.computed)(function () {
      return props.direction || 'x';
    });
    var disabledDrag = (0, _vue.computed)(function () {
      return props.disabled;
    });
    (0, _vue.watchEffect)(function () {
      colorRef.value = props.color;
    });
    var _useColorDrag = (0, _useColorDrag3.default)({
        colorRef: colorRef,
        targetRef: transformRef,
        containerRef: sliderRef,
        calculate: function calculate(containerRef) {
          return (0, _util.calculateOffset)(containerRef, transformRef, colorRef, type.value);
        },
        onDragChange: function onDragChange(offsetValue) {
          var calcColor = (0, _util.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 = (0, _slicedToArray2.default)(_useColorDrag, 2),
      offset = _useColorDrag2[0],
      dragStartHandle = _useColorDrag2[1];
    return function () {
      return (0, _vue.createVNode)("div", {
        "ref": sliderRef,
        "class": (0, _classNames.default)("".concat(props.prefixCls, "-slider"), "".concat(props.prefixCls, "-slider-").concat(type.value)),
        "onMousedown": dragStartHandle,
        "onTouchstart": dragStartHandle
      }, [(0, _vue.createVNode)(_Palette.default, {
        "prefixCls": props.prefixCls
      }, {
        default: function _default() {
          return [(0, _vue.createVNode)(_Transform.default, {
            "offset": offset.value,
            "ref": transformRef
          }, {
            default: function _default() {
              return [(0, _vue.createVNode)(_Handler.default, {
                "size": "small",
                "color": props.value,
                "prefixCls": props.prefixCls
              }, null)];
            }
          }), (0, _vue.createVNode)(_Gradient.default, {
            "colors": props.gradientColors,
            "direction": props.direction,
            "type": props.type,
            "prefixCls": props.prefixCls
          }, null)];
        }
      })]);
    };
  }
});
var _default2 = Slider;
exports.default = _default2;