"use strict";

var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
Object.defineProperty(exports, "__esModule", {
  value: true
});
exports.gradientColorBarProps = exports.default = void 0;
var _vue = require("vue");
var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
var _color = require("../../color");
var _util = require("../../util");
var _ColorSlider = require("../ColorSlider");
var _context = require("../../context");
function sortColors(colors) {
  return [...colors].sort((a, b) => a.percent - b.percent);
}
const gradientColorBarProps = () => (0, _extends2.default)((0, _extends2.default)({}, (0, _context.panelPickerContextProps)()), {
  colors: Array
});
exports.gradientColorBarProps = gradientColorBarProps;
const GradientColorBar = (0, _vue.defineComponent)({
  name: 'GradientColorBar',
  props: gradientColorBarProps(),
  setup(props) {
    const isGradient = (0, _vue.computed)(() => props.mode === 'gradient');
    // ============================= Colors =============================
    const colorList = (0, _vue.computed)(() => props.colors.map(info => ({
      percent: info.percent,
      color: info.color.toRgbString()
    })));
    const values = (0, _vue.computed)(() => colorList.value.map(info => info.percent));
    // ============================== Drag ==============================
    let colorsRef = colorList.value;
    const onDragStart = ({
      rawValues,
      draggingIndex,
      draggingValue
    }) => {
      if (rawValues.length > colorList.value.length) {
        const newPointColor = (0, _util.getGradientPercentColor)(colorList.value, draggingValue);
        const nextColors = [...colorList.value];
        nextColors.splice(draggingIndex, 0, {
          percent: draggingValue,
          color: newPointColor
        });
        colorsRef = nextColors;
      } else {
        colorsRef = colorList.value;
      }
      props.onGradientDragging(true);
      props.onChange(new _color.AggregationColor(sortColors(colorsRef)), true);
    };
    const onDragChange = ({
      deleteIndex,
      draggingIndex,
      draggingValue
    }) => {
      let nextColors = [...colorsRef];
      if (deleteIndex !== -1) {
        nextColors.splice(deleteIndex, 1);
      } else {
        nextColors[draggingIndex] = (0, _extends2.default)((0, _extends2.default)({}, nextColors[draggingIndex]), {
          percent: draggingValue
        });
        nextColors = sortColors(nextColors);
      }
      props.onChange(new _color.AggregationColor(nextColors), true);
    };
    // ============================== Key ===============================
    const onKeyDelete = index => {
      const nextColors = [...colorList.value];
      nextColors.splice(index, 1);
      const nextColor = new _color.AggregationColor(nextColors);
      props.onChange(nextColor);
      props.onChangeComplete(nextColor);
    };
    // ============================= Change =============================
    const onInternalChangeComplete = nextValues => {
      props.onChangeComplete(new _color.AggregationColor(colorList.value));
      if (props.activeIndex >= nextValues.length) {
        props.onActive(nextValues.length - 1);
      }
      props.onGradientDragging(false);
    };
    // ============================= Render =============================
    return () => {
      if (!isGradient.value) {
        return null;
      }
      const {
        prefixCls,
        activeIndex,
        onActive
      } = props;
      return (0, _vue.createVNode)(_ColorSlider.GradientColorSlider, {
        "min": 0,
        "max": 100,
        "prefixCls": prefixCls,
        "className": `${prefixCls}-gradient-slider`,
        "colors": colorList.value,
        "color": null,
        "value": values.value,
        "range": true,
        "onChangeComplete": onInternalChangeComplete,
        "disabled": false,
        "type": "gradient",
        "activeIndex": activeIndex,
        "onActive": onActive,
        "onDragStart": onDragStart,
        "onDragChange": onDragChange,
        "onKeyDelete": onKeyDelete
      }, null);
    };
  }
});
var _default = exports.default = GradientColorBar;