import { createVNode as _createVNode } from "vue";
import _extends from "@babel/runtime/helpers/esm/extends";
import { computed, defineComponent } from 'vue';
import { AggregationColor } from '../../color';
import { getGradientPercentColor } from '../../util';
import { GradientColorSlider } from '../ColorSlider';
import { panelPickerContextProps } from '../../context';
function sortColors(colors) {
  return [...colors].sort((a, b) => a.percent - b.percent);
}
export const gradientColorBarProps = () => _extends(_extends({}, panelPickerContextProps()), {
  colors: Array
});
const GradientColorBar = defineComponent({
  name: 'GradientColorBar',
  props: gradientColorBarProps(),
  setup(props) {
    const isGradient = computed(() => props.mode === 'gradient');
    // ============================= Colors =============================
    const colorList = computed(() => props.colors.map(info => ({
      percent: info.percent,
      color: info.color.toRgbString()
    })));
    const values = 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 = 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 AggregationColor(sortColors(colorsRef)), true);
    };
    const onDragChange = ({
      deleteIndex,
      draggingIndex,
      draggingValue
    }) => {
      let nextColors = [...colorsRef];
      if (deleteIndex !== -1) {
        nextColors.splice(deleteIndex, 1);
      } else {
        nextColors[draggingIndex] = _extends(_extends({}, nextColors[draggingIndex]), {
          percent: draggingValue
        });
        nextColors = sortColors(nextColors);
      }
      props.onChange(new AggregationColor(nextColors), true);
    };
    // ============================== Key ===============================
    const onKeyDelete = index => {
      const nextColors = [...colorList.value];
      nextColors.splice(index, 1);
      const nextColor = new AggregationColor(nextColors);
      props.onChange(nextColor);
      props.onChangeComplete(nextColor);
    };
    // ============================= Change =============================
    const onInternalChangeComplete = nextValues => {
      props.onChangeComplete(new 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 _createVNode(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);
    };
  }
});
export default GradientColorBar;