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);
};

import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
import * as React from 'react';
import { useState } from 'react';
import ReactDOM from 'react-dom';
import { Alpha, Hue, Saturation, Checkboard, ColorWrap } from 'react-color/lib/components/common';
import classNames from 'classnames';
import { ColorFieldsMemo as ColorFields } from "./ColorFields";
import { prefixClsCustom } from "./constant";
import Icon from "../../icon/Icon";
import "../style/custom-color-picker.css";
import CanvasColorPicker from "../../canvas-color-picker";
var CustomPointer = /*#__PURE__*/React.memo(function () {
  return _jsx("span", {
    className: 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 = 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 _jsxs("div", __assign({
    className: classNames("" + prefixClsCustom, className)
  }, {
    children: [_jsx("div", __assign({
      className: prefixClsCustom + "-saturation"
    }, {
      children: _jsx(Saturation, {
        hsl: hsl,
        hsv: hsv,
        onChange: onChange
      }, void 0)
    }), void 0), _jsxs("div", __assign({
      className: prefixClsCustom + "-controls"
    }, {
      children: [_jsx(Icon, {
        icon: "color-picker",
        onClick: onIconClick,
        className: prefixClsCustom + "-icon-straw"
      }, void 0), _jsx("input", {
        type: "color",
        ref: inputRef,
        onChange: onColorChange,
        className: prefixClsCustom + "-input-color"
      }, void 0), _jsxs("div", __assign({
        className: prefixClsCustom + "-sliders"
      }, {
        children: [_jsx("div", __assign({
          className: prefixClsCustom + "-hue"
        }, {
          children: _jsx(Hue, {
            radius: 10,
            pointer: CustomPointer,
            hsl: hsl,
            onChange: onChange
          }, void 0)
        }), void 0), _jsx("div", __assign({
          className: prefixClsCustom + "-alpha"
        }, {
          children: _jsx(Alpha, {
            rgb: rgb,
            hsl: hsl,
            hsv: hsv,
            onChange: onChange,
            renderers: renderers,
            pointer: CustomPointer
          }, void 0)
        }), void 0)]
      }), void 0), _jsxs("div", __assign({
        className: prefixClsCustom + "-color"
      }, {
        children: [_jsx(Checkboard, {}, void 0), _jsx("div", {
          className: prefixClsCustom + "-color-active",
          style: background
        }, void 0)]
      }), void 0)]
    }), void 0), _jsx(ColorFields, {
      rgb: rgb,
      hsl: hsl,
      hex: hex,
      onChange: onChange
    }, void 0), pickColorFromMap && toMeasureCanvas && /*#__PURE__*/ReactDOM.createPortal(_jsx(CanvasColorPicker, {
      toMeasureCanvas: toMeasureCanvas,
      toGetColorCanvas: toGetColorCanvas,
      visible: colorPickerVisible,
      handleVisibleChange: handleVisibleChange,
      handlePickColor: handlePickColor,
      useShadowElementToPickColor: useShadowElementToPickColor,
      shadowElementContainer: shadowElementContainer
    }, void 0), document.body)]
  }), void 0);
};

export default ColorWrap(CustomColorPicker);

