"use strict";

var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
Object.defineProperty(exports, "__esModule", {
  value: true
});
exports.default = exports.baseSliderProps = void 0;
var _vue = require("vue");
var _color = require("../color");
var _util = require("../util");
var _useColorDrag = _interopRequireDefault(require("../hooks/useColorDrag"));
var _classNames = _interopRequireDefault(require("../../_util/classNames"));
var _Palette = _interopRequireDefault(require("./Palette"));
var _Transform = _interopRequireDefault(require("./Transform"));
var _Handler = _interopRequireDefault(require("./Handler"));
var _Gradient = _interopRequireDefault(require("./Gradient"));
const baseSliderProps = () => ({
  prefixCls: String,
  colors: Array,
  min: Number,
  max: Number,
  value: Number,
  disabled: Boolean,
  onChange: Function,
  onChangeComplete: Function,
  type: String,
  color: Object
});
exports.baseSliderProps = baseSliderProps;
const Slider = (0, _vue.defineComponent)({
  name: 'Slider',
  inheritAttrs: false,
  props: baseSliderProps(),
  setup(props) {
    const sliderRef = (0, _vue.ref)();
    const transformWrapperRef = (0, _vue.ref)();
    const transformRef = (0, _vue.computed)(() => {
      var _a;
      return (_a = transformWrapperRef.value) === null || _a === void 0 ? void 0 : _a.divRef;
    });
    const colorRef = (0, _vue.ref)(props.color);
    const getValue = c => {
      return props.type === 'hue' ? c.getHue() : c.a * 100;
    };
    const onDragChange = offsetValue => {
      const calcColor = (0, _util.calculateColor)({
        offset: offsetValue,
        targetRef: transformRef.value,
        containerRef: sliderRef.value,
        color: props.color,
        type: props.type
      });
      colorRef.value = calcColor;
      props.onChange(getValue(calcColor));
    };
    const [offset, dragStartHandle] = (0, _useColorDrag.default)({
      color: (0, _vue.toRef)(props, 'color'),
      targetRef: transformRef,
      containerRef: sliderRef,
      calculate: () => (0, _util.calcOffset)(props.color, props.type),
      onDragChange,
      onDragChangeComplete() {
        props.onChangeComplete(getValue(colorRef.value));
      },
      direction: (0, _vue.ref)('x'),
      disabledDrag: (0, _vue.toRef)(props, 'disabled')
    });
    const handleColor = (0, _vue.computed)(() => {
      if (props.type === 'hue') {
        const hsb = props.color.toHsb();
        hsb.s = 1;
        hsb.b = 1;
        hsb.a = 1;
        const lightColor = new _color.Color(hsb);
        return lightColor;
      }
      return props.color;
    });
    // ========================= Gradient =========================
    const gradientList = (0, _vue.computed)(() => props.colors.map(info => `${info.color} ${info.percent}%`));
    // ========================== Render ==========================
    return () => {
      const {
        prefixCls,
        type
      } = props;
      return (0, _vue.createVNode)("div", {
        "ref": sliderRef,
        "class": (0, _classNames.default)(`${prefixCls}-slider`, `${prefixCls}-slider-${type}`),
        "onMousedown": dragStartHandle,
        "onTouchstart": dragStartHandle
      }, [(0, _vue.createVNode)(_Palette.default, {
        "prefixCls": prefixCls
      }, {
        default: () => [(0, _vue.createVNode)(_Transform.default, {
          "x": offset.value.x,
          "y": offset.value.y,
          "ref": transformWrapperRef
        }, {
          default: () => [(0, _vue.createVNode)(_Handler.default, {
            "size": "small",
            "color": handleColor.value.toHexString(),
            "prefixCls": prefixCls
          }, null)]
        }), (0, _vue.createVNode)(_Gradient.default, {
          "colors": gradientList.value,
          "type": type,
          "prefixCls": prefixCls
        }, null)]
      })]);
    };
  }
});
var _default = exports.default = Slider;