var __assign = this && this.__assign || function () {
  __assign = Object.assign || function (t) {
    for (var s, i = 1, n = arguments.length; i < n; i++) {
      s = arguments[i];

      for (var p in s) {
        if (Object.prototype.hasOwnProperty.call(s, p)) t[p] = s[p];
      }
    }

    return t;
  };

  return __assign.apply(this, arguments);
};

var __rest = this && this.__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;
};

var __spreadArray = this && this.__spreadArray || function (to, from) {
  for (var i = 0, il = from.length, j = to.length; i < il; i++, j++) {
    to[j] = from[i];
  }

  return to;
};

import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
import * as React from 'react';
import classNames from 'classnames';
import { PaletteMemo as Palette } from "./Palette";
import Slider from "../slider";
import useEvent from 'react-use/lib/useEvent';
import useMeasure from 'react-use/lib/useMeasure';
import "./style/color-gradient.css";
export var prefixCls = 'dmc-color-gradient';

var ColorGradient = function ColorGradient(props) {
  var _a = props,
      className = _a.className,
      onChange = _a.onChange,
      stops = _a.stops,
      color = _a.color,
      aIdx = _a.activeIndex,
      onSelect = _a.onSelect,
      onActiveChange = _a.onActiveChange,
      restProps = __rest(_a, ["className", "onChange", "stops", "color", "activeIndex", "onSelect", "onActiveChange"]);

  var isControl = ('activeIndex' in props);

  var _b = React.useState(aIdx),
      active = _b[0],
      setActive = _b[1];

  var activeIndex = isControl ? aIdx !== null && aIdx !== void 0 ? aIdx : '' : active;
  var refWrap = React.useRef(null);

  var _c = useMeasure(),
      ref = _c[0],
      width = _c[1].width;

  var _d = React.useState([]),
      vstops = _d[0],
      setVstops = _d[1];

  React.useEffect(function () {
    setVstops(stops);
  }, [stops]);
  var onStopsChange = React.useCallback(function (s) {
    if (onChange) {
      setVstops(s);
      onChange(s);
    }
  }, [onChange]);
  var handleKeyup = React.useCallback(function (_a) {
    var key = _a.key,
        target = _a.target;
    var tagName = target && target.tagName.toLowerCase();

    if (tagName === 'input' || tagName === 'textarea') {
      return;
    }

    if (key === 'Backspace') {
      var newStops = stops.filter(function (_, index) {
        return index !== active;
      });
      onStopsChange(newStops);
    }
  }, [onStopsChange, active, stops]);
  var handleClick = React.useCallback(function (e) {
    var index = activeIndex;
    var target = e.target;
    var classList = e.target.classList || [];

    if (classList.contains('dmc-slider-handle')) {
      index = parseInt(target.tabIndex);

      if (onSelect) {
        onSelect(stops[target.tabIndex].color, target.tabIndex);
      }
    } else {
      var offset = Math.round((e.clientX - target.getBoundingClientRect().left) / width * 100) / 100;

      var newStops = __spreadArray(__spreadArray([], stops), [{
        offset: offset,
        color: color
      }]);

      index = newStops.length - 1;
      onStopsChange(newStops);
    }

    setActive(index);

    if (onActiveChange) {
      onActiveChange(index);
    }
  }, [onSelect, onStopsChange, stops, color, width, onActiveChange, activeIndex]);
  var handleChange = React.useCallback(function (index, value) {
    var newVal = __spreadArray([], stops);

    newVal[index].offset = value;
    onStopsChange(newVal);
  }, [onStopsChange, stops]);
  useEvent('keyup', handleKeyup, document.body);
  return _jsx("div", __assign({}, restProps, {
    className: prefixCls + "-wrap",
    ref: refWrap
  }, {
    children: _jsxs("div", __assign({
      ref: ref,
      onClick: handleClick,
      className: classNames(prefixCls + "-gradient", className)
    }, {
      children: [_jsx(Palette, {
        palette: vstops
      }, void 0), vstops.map(function (t, idx) {
        return _jsx(Slider, {
          max: 1,
          min: 0,
          step: 0.01,
          value: t.offset,
          tabIndex: idx,
          tooltipVisible: false,
          onChange: function onChange(v) {
            return handleChange(idx, v);
          },
          "data-index": idx,
          className: classNames(prefixCls + "-slider", prefixCls + "-slider-" + idx, {
            actived: idx === activeIndex
          })
        }, idx);
      })]
    }), void 0)
  }), void 0);
};

var defaultProps = {
  stops: [],
  color: '#fff'
};
ColorGradient.defaultProps = defaultProps;
ColorGradient.displayName = 'ColorGradient';
export default ColorGradient;
var ColorGradientMemo = /*#__PURE__*/React.memo(ColorGradient);
ColorGradientMemo.displayName = 'ColorGradientMemo';
export { ColorGradientMemo };

