"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 __importDefault = void 0 && (void 0).__importDefault || function (mod) {
  return mod && mod.__esModule ? mod : {
    "default": mod
  };
};

Object.defineProperty(exports, "__esModule", {
  value: true
});

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

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

var react_1 = require("react");

var react_dom_1 = __importDefault(require("react-dom"));

var common_1 = require("react-color/lib/components/common");

var classnames_1 = __importDefault(require("classnames"));

var ColorFields_1 = require("./ColorFields");

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

var Icon_1 = __importDefault(require("../../icon/Icon"));

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

var canvas_color_picker_1 = __importDefault(require("../../canvas-color-picker"));

var CustomPointer = React.memo(function () {
  return jsx_runtime_1.jsx("span", {
    className: constant_1.prefixClsCustom + "-pointer"
  }, void 0);
});
var useRef = React.useRef,
    useCallback = React.useCallback;

var CustomColorPicker = function CustomColorPicker(_a) {
  var rgb = _a.rgb,
      hsl = _a.hsl,
      hsv = _a.hsv,
      hex = _a.hex,
      className = _a.className,
      onChange = _a.onChange,
      renderers = _a.renderers,
      _b = _a.pickColorFromMap,
      pickColorFromMap = _b === void 0 ? false : _b,
      toMeasureCanvas = _a.toMeasureCanvas,
      toGetColorCanvas = _a.toGetColorCanvas,
      useShadowElementToPickColor = _a.useShadowElementToPickColor,
      shadowElementContainer = _a.shadowElementContainer,
      handleCanvasColorPickerVisibleChange = _a.handleCanvasColorPickerVisibleChange;
  var inputRef = useRef(null);
  var background = {
    background: "rgba(" + rgb.r + "," + rgb.g + "," + rgb.b + "," + rgb.a + ")"
  };

  var _c = react_1.useState(false),
      colorPickerVisible = _c[0],
      setColorPickerVisible = _c[1];

  var onIconClick = useCallback(function (e) {
    e.stopPropagation();

    if (pickColorFromMap) {
      setColorPickerVisible(!colorPickerVisible);
    } else {
      var current = inputRef.current;

      if (current) {
        current.click();
      }
    }
  }, [colorPickerVisible, pickColorFromMap]);
  var onColorChange = useCallback(function (e) {
    if (onChange) {
      onChange(e.target.value, e);
    }
  }, [onChange]);
  var handlePickColor = useCallback(function (colors) {
    onChange("rgba(" + colors[0] + "," + colors[1] + "," + colors[2] + "," + colors[3] + ")", {});
  }, [onChange]);
  var handleVisibleChange = useCallback(function (v) {
    handleCanvasColorPickerVisibleChange === null || handleCanvasColorPickerVisibleChange === void 0 ? void 0 : handleCanvasColorPickerVisibleChange(v);
    setColorPickerVisible(v);
  }, [handleCanvasColorPickerVisibleChange]);
  return jsx_runtime_1.jsxs("div", __assign({
    className: classnames_1["default"]("" + constant_1.prefixClsCustom, className)
  }, {
    children: [jsx_runtime_1.jsx("div", __assign({
      className: constant_1.prefixClsCustom + "-saturation"
    }, {
      children: jsx_runtime_1.jsx(common_1.Saturation, {
        hsl: hsl,
        hsv: hsv,
        onChange: onChange
      }, void 0)
    }), void 0), jsx_runtime_1.jsxs("div", __assign({
      className: constant_1.prefixClsCustom + "-controls"
    }, {
      children: [jsx_runtime_1.jsx(Icon_1["default"], {
        icon: "color-picker",
        onClick: onIconClick,
        className: constant_1.prefixClsCustom + "-icon-straw"
      }, void 0), jsx_runtime_1.jsx("input", {
        type: "color",
        ref: inputRef,
        onChange: onColorChange,
        className: constant_1.prefixClsCustom + "-input-color"
      }, void 0), jsx_runtime_1.jsxs("div", __assign({
        className: constant_1.prefixClsCustom + "-sliders"
      }, {
        children: [jsx_runtime_1.jsx("div", __assign({
          className: constant_1.prefixClsCustom + "-hue"
        }, {
          children: jsx_runtime_1.jsx(common_1.Hue, {
            radius: 10,
            pointer: CustomPointer,
            hsl: hsl,
            onChange: onChange
          }, void 0)
        }), void 0), jsx_runtime_1.jsx("div", __assign({
          className: constant_1.prefixClsCustom + "-alpha"
        }, {
          children: jsx_runtime_1.jsx(common_1.Alpha, {
            rgb: rgb,
            hsl: hsl,
            hsv: hsv,
            onChange: onChange,
            renderers: renderers,
            pointer: CustomPointer
          }, void 0)
        }), void 0)]
      }), void 0), jsx_runtime_1.jsxs("div", __assign({
        className: constant_1.prefixClsCustom + "-color"
      }, {
        children: [jsx_runtime_1.jsx(common_1.Checkboard, {}, void 0), jsx_runtime_1.jsx("div", {
          className: constant_1.prefixClsCustom + "-color-active",
          style: background
        }, void 0)]
      }), void 0)]
    }), void 0), jsx_runtime_1.jsx(ColorFields_1.ColorFieldsMemo, {
      rgb: rgb,
      hsl: hsl,
      hex: hex,
      onChange: onChange
    }, void 0), pickColorFromMap && toMeasureCanvas && react_dom_1["default"].createPortal(jsx_runtime_1.jsx(canvas_color_picker_1["default"], {
      toMeasureCanvas: toMeasureCanvas,
      toGetColorCanvas: toGetColorCanvas,
      visible: colorPickerVisible,
      handleVisibleChange: handleVisibleChange,
      handlePickColor: handlePickColor,
      useShadowElementToPickColor: useShadowElementToPickColor,
      shadowElementContainer: shadowElementContainer
    }, void 0), document.body)]
  }), void 0);
};

exports["default"] = common_1.ColorWrap(CustomColorPicker);

