"use strict";

var __assign = void 0 && (void 0).__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 __createBinding = void 0 && (void 0).__createBinding || (Object.create ? function (o, m, k, k2) {
  if (k2 === undefined) k2 = k;
  Object.defineProperty(o, k2, {
    enumerable: true,
    get: function get() {
      return m[k];
    }
  });
} : function (o, m, k, k2) {
  if (k2 === undefined) k2 = k;
  o[k2] = m[k];
});

var __setModuleDefault = void 0 && (void 0).__setModuleDefault || (Object.create ? function (o, v) {
  Object.defineProperty(o, "default", {
    enumerable: true,
    value: v
  });
} : function (o, v) {
  o["default"] = v;
});

var __importStar = void 0 && (void 0).__importStar || function (mod) {
  if (mod && mod.__esModule) return mod;
  var result = {};
  if (mod != null) for (var k in mod) {
    if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
  }

  __setModuleDefault(result, mod);

  return result;
};

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

  return to;
};

var __importDefault = void 0 && (void 0).__importDefault || function (mod) {
  return mod && mod.__esModule ? mod : {
    "default": mod
  };
};

Object.defineProperty(exports, "__esModule", {
  value: true
});
exports.ColorPanelMemo = void 0;

var jsx_runtime_1 = require("react/jsx-runtime");

var React = __importStar(require("react"));

var color_1 = require("react-color/lib/helpers/color");

var select_1 = __importDefault(require("../../select"));

var CustomColorPicker_1 = __importDefault(require("./CustomColorPicker"));

var constant_1 = require("./constant");

var color_gradient_1 = __importDefault(require("../../color-gradient"));

var ColorPreset_1 = require("./ColorPreset");

var ColorFavor_1 = require("./ColorFavor");

var ColorImage_1 = require("./ColorImage");

var helper_1 = require("./helper");

require("../style/color-picker.css");

var react_1 = require("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 ? constant_1.DEFAULT_ROTATE : _g,
      _h = _a.type,
      type = _h === void 0 ? constant_1.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(constant_1.CircleType.preset),
      activeCircle = _o[0],
      setActiveCircle = _o[1];

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

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

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

  var _p = color_1.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([], constant_1.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]);
  react_1.useEffect(function () {
    if (pickColorFromMap && toMeasureCanvas === undefined) {
      throw new Error("prop 'pickColorFromMap' should used with 'toMeasureCanvas' ");
    }
  }, [pickColorFromMap, toMeasureCanvas]);
  return jsx_runtime_1.jsxs("div", __assign({
    ref: ref,
    className: constant_1.prefixCls
  }, {
    children: [jsx_runtime_1.jsxs("div", __assign({
      className: disabled || disabledPanel ? constant_1.prefixCls + "-disabled" : ''
    }, {
      children: [showTypeSelect && jsx_runtime_1.jsxs("div", __assign({
        className: constant_1.prefixCls + "-top-wrap"
      }, {
        children: [jsx_runtime_1.jsx(select_1["default"], {
          size: "mini",
          type: "menu-bg",
          allowClear: false,
          value: type,
          disabled: disabledTypeSelect,
          onChange: onActiveTypeChange,
          options: bgOptions,
          getPopupContainer: getPopupContainer,
          className: constant_1.prefixCls + "-type-select " + constant_1.prefixCls + "-select"
        }, void 0), type === constant_1.COLORPICKER_TYPE_GRADIENT && !disableGradientRotateSelect && jsx_runtime_1.jsxs("div", __assign({
          className: constant_1.prefixCls + "-rotate-wrap"
        }, {
          children: [jsx_runtime_1.jsx("span", __assign({
            className: constant_1.prefixCls + "-rotate-label"
          }, {
            children: labelRotate
          }), void 0), jsx_runtime_1.jsx(select_1["default"], {
            size: "mini",
            type: "menu-bg",
            createAble: true,
            showSearch: true,
            allowClear: false,
            value: rotate,
            options: constant_1.ROTATE_OPT,
            onChange: onRotateChange,
            getPopupContainer: getPopupContainer
          }, void 0)]
        }), void 0)]
      }), void 0), type === constant_1.COLORPICKER_TYPE_GRADIENT && jsx_runtime_1.jsx("div", __assign({
        className: constant_1.prefixCls + "-gradient-wrap"
      }, {
        children: jsx_runtime_1.jsx(color_gradient_1["default"], {
          stops: currentStops,
          color: hex,
          activeIndex: activeIndex,
          onSelect: onChange,
          onChange: onStopsChange,
          onActiveChange: setActiveIndex
        }, void 0)
      }), void 0), (type === constant_1.COLORPICKER_TYPE_PURE || type === constant_1.COLORPICKER_TYPE_GRADIENT) && jsx_runtime_1.jsxs(React.Fragment, {
        children: [jsx_runtime_1.jsx(CustomColorPicker_1["default"], {
          color: rgb,
          onChange: onColorChange,
          pickColorFromMap: pickColorFromMap,
          toMeasureCanvas: toMeasureCanvas,
          toGetColorCanvas: toGetColorCanvas,
          useShadowElementToPickColor: useShadowElementToPickColor,
          shadowElementContainer: shadowElementContainer,
          handleCanvasColorPickerVisibleChange: handleCanvasColorPickerVisibleChange
        }, void 0), jsx_runtime_1.jsx("div", {
          className: constant_1.prefixCls + "-divider"
        }, void 0), jsx_runtime_1.jsx(ColorPreset_1.ColorPresetMemo, {
          color: hex,
          onChange: onColorChange,
          getPopupContainer: getPopupContainer,
          colorPresetOptions: colorPresetOptions,
          actived: activeCircle === constant_1.CircleType.preset
        }, void 0), jsx_runtime_1.jsx("div", {
          className: constant_1.prefixCls + "-divider"
        }, void 0), jsx_runtime_1.jsx(ColorFavor_1.ColorFavorMemo, {
          colors: favors,
          color: hex,
          onChange: onColorChange,
          labelFavor: labelFavor,
          labelFavorPlaceholder: labelFavorPlaceholder,
          actived: activeCircle === constant_1.CircleType.favor,
          onChangeColors: onChangeColors
        }, void 0)]
      }, void 0), type === constant_1.COLORPICKER_TYPE_IMG && jsx_runtime_1.jsx(ColorImage_1.ColorImageMemo, {
        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';
exports["default"] = ColorPanel;
var ColorPanelMemo = React.memo(ColorPanel);
exports.ColorPanelMemo = ColorPanelMemo;
ColorPanelMemo.displayName = 'ColorPanelMemo';

