"use strict";

var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
Object.defineProperty(exports, "__esModule", {
  value: true
});
exports.gradientColorSliderProps = exports.default = exports.GradientColorSlider = void 0;
var _objectSpread2 = _interopRequireDefault(require("@babel/runtime/helpers/objectSpread2"));
var _vue = require("vue");
var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
var _omit = _interopRequireDefault(require("../../_util/omit"));
var _vcColorPicker = require("../../vc-color-picker");
var _propsUtil = require("../../_util/props-util");
var _slider = _interopRequireDefault(require("../../slider"));
var _classNames = _interopRequireDefault(require("../../_util/classNames"));
var _context = require("../../ng-slider/context");
var _Context = require("../../slider/Context");
var _util = require("../util");
var __rest = void 0 && (void 0).__rest || function (s, e) {
  var t = {};
  for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0) t[p] = s[p];
  if (s != null && typeof Object.getOwnPropertySymbols === "function") for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
    if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i])) t[p[i]] = s[p[i]];
  }
  return t;
};
const gradientColorSliderProps = () => (0, _extends2.default)((0, _extends2.default)({}, (0, _omit.default)((0, _vcColorPicker.baseSliderProps)(), ['value', 'onChange', 'onChangeComplete', 'type'])), {
  value: Array,
  onChange: Function,
  onChangeComplete: Function,
  range: Boolean,
  className: String,
  activeIndex: Number,
  onActive: Function,
  type: String,
  // Drag events
  onDragStart: Function,
  onDragChange: Function,
  // Key event
  onKeyDelete: Function
});
exports.gradientColorSliderProps = gradientColorSliderProps;
const GradientColorSlider = exports.GradientColorSlider = (0, _vue.defineComponent)({
  name: 'GradientColorSlider',
  inheritAttrs: false,
  props: (0, _propsUtil.initDefaultProps)(gradientColorSliderProps(), {
    range: false
  }),
  setup(props) {
    const linearCss = (0, _vue.computed)(() => {
      const colorsStr = props.colors.map(c => `${c.color} ${c.percent}%`).join(', ');
      return `linear-gradient(90deg, ${colorsStr})`;
    });
    const pointColor = (0, _vue.computed)(() => {
      if (!props.color || !props.type) {
        return null;
      }
      if (props.type === 'alpha') {
        return props.color.toRgbString();
      }
      return `hsl(${props.color.toHsb().h}, 100%, 50%)`;
    });
    // ======================= Context: Slider ========================
    const onInternalDragStart = props.onDragStart;
    const onInternalDragChange = props.onDragChange;
    (0, _context.useProvideUnstableSlider)({
      onDragStart: onInternalDragStart,
      onDragChange: onInternalDragChange
    });
    // ======================= Context: Render ========================
    const handleRender = (ori, info) => {
      const {
        style,
        class: handleCls
      } = ori.props;
      // Point Color
      const mergedStyle = (0, _extends2.default)({}, style);
      if (props.type === 'gradient') {
        mergedStyle.background = (0, _util.getGradientPercentColor)(props.colors, info.value);
      }
      return (0, _vue.cloneVNode)(ori, {
        onFocus: () => {
          var _a;
          (_a = props.onActive) === null || _a === void 0 ? void 0 : _a.call(props, info.index);
        },
        style: mergedStyle,
        className: (0, _classNames.default)(handleCls, {
          [`${props.prefixCls}-slider-handle-active`]: props.activeIndex === info.index
        }),
        onKeydown: e => {
          if ((e.key === 'Delete' || e.key === 'Backspace') && props.onKeyDelete) {
            props.onKeyDelete(info.index);
          }
        }
      });
    };
    (0, _Context.useProvideSliderInternal)({
      direction: (0, _vue.ref)('ltr'),
      handleRender
    });
    return () => {
      const {
          prefixCls,
          colors,
          type,
          color,
          range = false,
          className,
          activeIndex,
          onActive,
          onKeyDelete
        } = props,
        restProps = __rest(props, ["prefixCls", "colors", "type", "color", "range", "className", "activeIndex", "onActive", "onKeyDelete"]);
      const sliderProps = (0, _extends2.default)((0, _extends2.default)({}, restProps), {
        track: false
      });
      return (0, _vue.createVNode)(_slider.default, (0, _objectSpread2.default)((0, _objectSpread2.default)({}, sliderProps), {}, {
        "class": (0, _classNames.default)(className, `${prefixCls}-slider`),
        "tooltip": {
          open: false
        },
        "range": {
          editable: range,
          minCount: 2
        },
        "styles": {
          rail: {
            background: linearCss.value
          },
          handle: pointColor.value ? {
            background: pointColor.value
          } : {}
        },
        "classNames": {
          rail: `${prefixCls}-slider-rail`,
          handle: `${prefixCls}-slider-handle`
        }
      }), null);
    };
  }
});
const SingleColorSlider = (0, _vue.defineComponent)({
  name: 'SingleColorPicker',
  props: (0, _vcColorPicker.baseSliderProps)(),
  setup(props) {
    const singleOnChange = v => props.onChange(v[0]);
    const singleOnChangeComplete = v => props.onChangeComplete(v[0]);
    return () => {
      return (0, _vue.createVNode)(GradientColorSlider, (0, _objectSpread2.default)((0, _objectSpread2.default)({}, props), {}, {
        "value": [props.value],
        "onChange": singleOnChange,
        "onChangeComplete": singleOnChangeComplete
      }), null);
    };
  }
});
var _default = exports.default = SingleColorSlider;