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 __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 { toState } from 'react-color/lib/helpers/color';
import Select from "../../select";
import CustomColorPicker from "./CustomColorPicker";
import { CircleType, COLORPICKER_TYPE_GRADIENT, COLORPICKER_TYPE_IMG, COLORPICKER_TYPE_PURE, COLORPICKER_TYPES_OPT, DEFAULT_ROTATE, prefixCls, ROTATE_OPT } from "./constant";
import ColorGradient from "../../color-gradient";
import { ColorPresetMemo as ColorPreset } from "./ColorPreset";
import { ColorFavorMemo as ColorFavor } from "./ColorFavor";
import { ColorImageMemo as ColorImage } from "./ColorImage";
import { getRgbaColor } from "./helper";
import "../style/color-picker.css";
import { useEffect } from 'react';
var useCallback = React.useCallback;

var ColorPanel = function ColorPanel(_a) {
  var _b = _a.stops,
      stops = _b === void 0 ? [] : _b,
      color = _a.color,
      favors = _a.favors,
      labelFavor = _a.labelFavor,
      onChangeColors = _a.onChangeColors,
      labelFavorPlaceholder = _a.labelFavorPlaceholder,
      imgSrc = _a.imgSrc,
      imgSize = _a.imgSize,
      onChange = _a.onChange,
      labelRotate = _a.labelRotate,
      showMedia = _a.showMedia,
      showUpload = _a.showUpload,
      onStopsChange = _a.onStopsChange,
      onSizeChange = _a.onSizeChange,
      onRotateChange = _a.onRotateChange,
      onActiveTypeChange = _a.onActiveTypeChange,
      labelUpload = _a.labelUpload,
      labelSelectMedia = _a.labelSelectMedia,
      // bgTypeOptions,
  bgSizeOptions = _a.bgSizeOptions,
      colorPresetOptions = _a.colorPresetOptions,
      disabledTypeSelect = _a.disabledTypeSelect,
      disableGradientRotateSelect = _a.disableGradientRotateSelect,
      _c = _a.showTypeSelect,
      showTypeSelect = _c === void 0 ? false : _c,
      _d = _a.showPureColorOption,
      showPureColorOption = _d === void 0 ? true : _d,
      _e = _a.showGradientOption,
      showGradientOption = _e === void 0 ? true : _e,
      _f = _a.showImageOption,
      showImageOption = _f === void 0 ? true : _f,
      _g = _a.rotate,
      rotate = _g === void 0 ? DEFAULT_ROTATE : _g,
      _h = _a.type,
      type = _h === void 0 ? COLORPICKER_TYPE_PURE : _h,
      _j = _a.disabled,
      disabled = _j === void 0 ? false : _j,
      _k = _a.disabledPanel,
      disabledPanel = _k === void 0 ? false : _k,
      footer = _a.footer,
      className = _a.className,
      _l = _a.pickColorFromMap,
      pickColorFromMap = _l === void 0 ? false : _l,
      toMeasureCanvas = _a.toMeasureCanvas,
      toGetColorCanvas = _a.toGetColorCanvas,
      useShadowElementToPickColor = _a.useShadowElementToPickColor,
      shadowElementContainer = _a.shadowElementContainer,
      handleCanvasColorPickerVisibleChange = _a.handleCanvasColorPickerVisibleChange;
  var ref = React.useRef(null);

  var _m = React.useState(0),
      activeIndex = _m[0],
      setActiveIndex = _m[1]; // const [activeType, setActiveType] = useState<string>(type);


  var _o = React.useState(CircleType.preset),
      activeCircle = _o[0],
      setActiveCircle = _o[1];

  var onColorChange = useCallback(function (color, type) {
    setActiveCircle(type);

    if (onChange) {
      onChange(getRgbaColor(color.rgb));
    }

    if (onStopsChange) {
      onStopsChange(stops.map(function (t, index) {
        return activeIndex === index ? __assign(__assign({}, t), {
          color: getRgbaColor(color.rgb)
        }) : t;
      }), getRgbaColor(color.rgb));
    }
  }, [onChange, onStopsChange, stops, activeIndex]);
  var getPopupContainer = useCallback(function () {
    return ref.current;
  }, []);

  var _p = toState(color),
      rgb = _p.rgb,
      hex = _p.hex;

  var currentStops = stops.length ? stops : [{
    offset: 0.5,
    color: color
  }];
  var bgOptions = React.useMemo(function () {
    var opt = __spreadArray([], COLORPICKER_TYPES_OPT);

    if (!showImageOption) {
      opt.splice(2, 1);
    }

    if (!showGradientOption) {
      opt.splice(1, 1);
    }

    if (!showPureColorOption) {
      opt.splice(0, 1);
    }

    return opt;
  }, [showGradientOption, showImageOption, showPureColorOption]);
  useEffect(function () {
    if (pickColorFromMap && toMeasureCanvas === undefined) {
      throw new Error("prop 'pickColorFromMap' should used with 'toMeasureCanvas' ");
    }
  }, [pickColorFromMap, toMeasureCanvas]);
  return _jsxs("div", __assign({
    ref: ref,
    className: prefixCls
  }, {
    children: [_jsxs("div", __assign({
      className: disabled || disabledPanel ? prefixCls + "-disabled" : ''
    }, {
      children: [showTypeSelect && _jsxs("div", __assign({
        className: prefixCls + "-top-wrap"
      }, {
        children: [_jsx(Select, {
          size: "mini",
          type: "menu-bg",
          allowClear: false,
          value: type,
          disabled: disabledTypeSelect,
          onChange: onActiveTypeChange,
          options: bgOptions,
          getPopupContainer: getPopupContainer,
          className: prefixCls + "-type-select " + prefixCls + "-select"
        }, void 0), type === COLORPICKER_TYPE_GRADIENT && !disableGradientRotateSelect && _jsxs("div", __assign({
          className: prefixCls + "-rotate-wrap"
        }, {
          children: [_jsx("span", __assign({
            className: prefixCls + "-rotate-label"
          }, {
            children: labelRotate
          }), void 0), _jsx(Select, {
            size: "mini",
            type: "menu-bg",
            createAble: true,
            showSearch: true,
            allowClear: false,
            value: rotate,
            options: ROTATE_OPT,
            onChange: onRotateChange,
            getPopupContainer: getPopupContainer
          }, void 0)]
        }), void 0)]
      }), void 0), type === COLORPICKER_TYPE_GRADIENT && _jsx("div", __assign({
        className: prefixCls + "-gradient-wrap"
      }, {
        children: _jsx(ColorGradient, {
          stops: currentStops,
          color: hex,
          activeIndex: activeIndex,
          onSelect: onChange,
          onChange: onStopsChange,
          onActiveChange: setActiveIndex
        }, void 0)
      }), void 0), (type === COLORPICKER_TYPE_PURE || type === COLORPICKER_TYPE_GRADIENT) && _jsxs(React.Fragment, {
        children: [_jsx(CustomColorPicker, {
          color: rgb,
          onChange: onColorChange,
          pickColorFromMap: pickColorFromMap,
          toMeasureCanvas: toMeasureCanvas,
          toGetColorCanvas: toGetColorCanvas,
          useShadowElementToPickColor: useShadowElementToPickColor,
          shadowElementContainer: shadowElementContainer,
          handleCanvasColorPickerVisibleChange: handleCanvasColorPickerVisibleChange
        }, void 0), _jsx("div", {
          className: prefixCls + "-divider"
        }, void 0), _jsx(ColorPreset, {
          color: hex,
          onChange: onColorChange,
          getPopupContainer: getPopupContainer,
          colorPresetOptions: colorPresetOptions,
          actived: activeCircle === CircleType.preset
        }, void 0), _jsx("div", {
          className: prefixCls + "-divider"
        }, void 0), _jsx(ColorFavor, {
          colors: favors,
          color: hex,
          onChange: onColorChange,
          labelFavor: labelFavor,
          labelFavorPlaceholder: labelFavorPlaceholder,
          actived: activeCircle === CircleType.favor,
          onChangeColors: onChangeColors
        }, void 0)]
      }, void 0), type === COLORPICKER_TYPE_IMG && _jsx(ColorImage, {
        className: className,
        src: imgSrc,
        size: imgSize,
        showMedia: showMedia,
        showUpload: showUpload,
        onChange: onSizeChange,
        labelSelectMedia: labelSelectMedia,
        labelUpload: labelUpload,
        bgSizeOptions: bgSizeOptions,
        getPopupContainer: getPopupContainer
      }, void 0)]
    }), void 0), footer === null || footer === void 0 ? void 0 : footer()]
  }), void 0);
};

ColorPanel.defaultProps = {
  labelRotate: '角度' // bgTypeOptions: COLORPICKER_TYPES_OPT,

};
ColorPanel.displayName = 'ColorPanel';
export default ColorPanel;
var ColorPanelMemo = /*#__PURE__*/React.memo(ColorPanel);
ColorPanelMemo.displayName = 'ColorPanelMemo';
export { ColorPanelMemo };

