import _defineProperty from '@babel/runtime/helpers/defineProperty';
import _toConsumableArray from '@babel/runtime/helpers/toConsumableArray';
import _asyncToGenerator from '@babel/runtime/helpers/asyncToGenerator';
import _slicedToArray from '@babel/runtime/helpers/slicedToArray';
import _regeneratorRuntime from '@babel/runtime/regenerator';
import { useMemo, useRef, useState, useEffect, useCallback } from 'react';
import classnames from 'classnames';
import ColorPickerIcon from '@bigbinary/neeto-icons/ColorPicker';
import { HexAlphaColorPicker, HexColorPicker, HexColorInput } from 'react-colorful';
import { useTranslation } from 'react-i18next';
import { t as tinycolor, u as useRecentlyUsedColors } from './useRecentlyUsedColors-DlRzBP3W.js';
import Button from './Button.js';
import Dropdown from './Dropdown.js';
import Typography from './Typography.js';
import { a as getLocale, n as noop } from './index-QWVp_Xt6.js';
import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
import Down from '@bigbinary/neeto-icons/Down';
import '@babel/runtime/helpers/objectWithoutProperties';
import 'react-router-dom';
import './Spinner.js';
import './Tooltip.js';
import '@tippyjs/react';
import 'tippy.js';
import '@bigbinary/neeto-hotkeys';
import './overlayManager.js';
import '@babel/runtime/helpers/classCallCheck';
import '@babel/runtime/helpers/createClass';
import '@bigbinary/neeto-cist';
import 'qs';
import 'ramda';
import './index-DyUNP5G9.js';
import 'dayjs';
import 'dayjs/plugin/localeData';
import 'dayjs/plugin/utc';
import 'dayjs/plugin/weekday';
import 'dayjs/plugin/weekOfYear';
import 'i18next';
import './usePrefersReducedMotion-n4ZJtExQ.js';
import './useId-Jj9hXm-g.js';
import './en-Dmu3B4Vs.js';

const i=()=>"undefined"!=typeof window&&"EyeDropper"in window,s=()=>{throw new Error("Unsupported browser.")},a=a=>{const c=useMemo(()=>{var r;return (r=i()&&new EyeDropper(a))?EyeDropper.prototype.open.bind(r):s},[a]),[p,w]=(()=>{const r=useRef(),[s,a]=useState(false);useEffect(()=>(r.current=true,a(i()),()=>{r.current=false;}),[]);const c=useCallback(()=>s,[s]);return [r,c]})(),f=useRef(),u=useCallback(()=>{ void 0!==f.current&&f.current.abort();},[f]),d=useCallback(async function(r){ void 0===r&&(r={}),u();const{signal:o,...n}=r,t=new AbortController;f.current=t;const e=void 0!==o?(r=>{if("any"in AbortSignal)return AbortSignal.any(r);const o=new AbortController,n=()=>{o.abort();for(const o of r)o.removeEventListener("abort",n);};for(const o of r){if(o.aborted){n();break}o.addEventListener("abort",n);}return o.signal})([o,t.signal]):t.signal;try{return await c({...n,signal:e})}catch(r){throw p.current||(r.canceled=true),r}},[f,p,u,c]);return useEffect(()=>u,[u]),{open:d,close:u,isSupported:w}};

var useEyeDropper = a

var DEFAULT_PALETTE_COLORS = [{
  hex: "#FFFFFF"
}, {
  hex: "#D6D6D6"
}, {
  hex: "#0A0E13"
}, {
  hex: "#FECE1E"
}, {
  hex: "#F32E48"
}, {
  hex: "#02C39A"
}, {
  hex: "#2A79C4"
}, {
  hex: "#B3E5FC"
}, {
  hex: "#C3C6F9"
}, {
  hex: "#8064CE"
}, {
  hex: "#FE861E"
}, {
  hex: "#FF7DC9"
}, {
  hex: "#028090"
}, {
  hex: "#095482"
}];
var TARGET_SIZES = {
  large: "large",
  medium: "medium",
  small: "small"
};

var Palette = function Palette(_ref) {
  var color = _ref.color,
    _ref$colorList = _ref.colorList,
    colorList = _ref$colorList === void 0 ? DEFAULT_PALETTE_COLORS : _ref$colorList,
    onChange = _ref.onChange;
  return /*#__PURE__*/jsx("div", {
    className: "neeto-ui-flex neeto-ui-flex-row neeto-ui-flex-wrap neeto-ui-items-start neeto-ui-justify-start neeto-ui-color-palette neeto-ui-gap-1",
    children: colorList.map(function (item) {
      var hex = item.hex,
        rgb = item.rgb;
      var colorObject = tinycolor(hex !== null && hex !== void 0 ? hex : rgb);
      var isTransparent = colorObject.getAlpha() === 0;
      var isActive = Boolean(
      // hex is case insensitive.
      (color === null || color === void 0 ? void 0 : color.toLocaleLowerCase()) === (hex === null || hex === void 0 ? void 0 : hex.toLocaleLowerCase()) || color === rgb);
      return /*#__PURE__*/jsx("div", {
        "data-testid": "color-palette-item",
        className: classnames("neeto-ui-color-palette__item neeto-ui-border", {
          active: isActive
        }),
        onClick: function onClick() {
          return onChange(hex !== null && hex !== void 0 ? hex : rgb);
        },
        children: /*#__PURE__*/jsx("div", {
          style: {
            backgroundColor: hex !== null && hex !== void 0 ? hex : rgb
          },
          className: classnames({
            "transparent-bg-pattern": isTransparent
          })
        })
      }, hex !== null && hex !== void 0 ? hex : rgb);
    })
  });
};

var Target = function Target(_ref) {
  var size = _ref.size,
    showHexValue = _ref.showHexValue,
    color = _ref.color,
    colorValue = _ref.colorValue;
  return /*#__PURE__*/jsxs("button", {
    "data-testid": "color-picker-target",
    type: "button",
    className: classnames("neeto-ui-colorpicker__target", {
      "neeto-ui-colorpicker__target-size--large": size === TARGET_SIZES.large,
      "neeto-ui-colorpicker__target-size--medium": size === TARGET_SIZES.medium,
      "neeto-ui-colorpicker__target-size--small": size === TARGET_SIZES.small
    }),
    children: [showHexValue && /*#__PURE__*/jsx("span", {
      className: "neeto-ui-colorpicker-target__code",
      children: color
    }), /*#__PURE__*/jsxs("span", {
      className: "neeto-ui-colorpicker-target__color-wrapper",
      children: [/*#__PURE__*/jsx("span", {
        className: "neeto-ui-colorpicker-target__color neeto-ui-border-gray-200",
        style: {
          backgroundColor: colorValue
        }
      }), /*#__PURE__*/jsx("span", {
        className: "neeto-ui-colorpicker-target__icon",
        children: /*#__PURE__*/jsx(Down, {
          size: 16
        })
      })]
    })]
  });
};

function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), true).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
var ColorPicker = function ColorPicker(_ref) {
  var _ref2;
  var _ref$color = _ref.color,
    color = _ref$color === void 0 ? "" : _ref$color,
    _ref$size = _ref.size,
    size = _ref$size === void 0 ? TARGET_SIZES.large : _ref$size,
    _ref$onChange = _ref.onChange,
    onChange = _ref$onChange === void 0 ? noop : _ref$onChange,
    dropdownProps = _ref.dropdownProps,
    _ref$showEyeDropper = _ref.showEyeDropper,
    showEyeDropper = _ref$showEyeDropper === void 0 ? true : _ref$showEyeDropper,
    _ref$showHexValue = _ref.showHexValue,
    showHexValue = _ref$showHexValue === void 0 ? false : _ref$showHexValue,
    _ref$showTransparency = _ref.showTransparencyControl,
    showTransparencyControl = _ref$showTransparency === void 0 ? false : _ref$showTransparency,
    _ref$showPicker = _ref.showPicker,
    showPicker = _ref$showPicker === void 0 ? true : _ref$showPicker,
    _ref$showHexPicker = _ref.showHexPicker,
    showHexPicker = _ref$showHexPicker === void 0 ? true : _ref$showHexPicker,
    portalProps = _ref.portalProps,
    colorPalette = _ref.colorPalette,
    _ref$showRecentlyUsed = _ref.showRecentlyUsedColors,
    showRecentlyUsedColors = _ref$showRecentlyUsed === void 0 ? showPicker : _ref$showRecentlyUsed;
  var _useTranslation = useTranslation(),
    t = _useTranslation.t,
    i18n = _useTranslation.i18n;
  var _useState = useState(color),
    _useState2 = _slicedToArray(_useState, 2),
    colorInternal = _useState2[0],
    setColorInternal = _useState2[1];
  var _useState3 = useState(false),
    _useState4 = _slicedToArray(_useState3, 2),
    isColorSelected = _useState4[0],
    setIsColorSelected = _useState4[1];
  var hexColorInputValue = useRef("");
  var _useEyeDropper = useEyeDropper({
      pickRadius: 3
    }),
    open = _useEyeDropper.open,
    isSupported = _useEyeDropper.isSupported;
  var _useRecentlyUsedColor = useRecentlyUsedColors(),
    _useRecentlyUsedColor2 = _slicedToArray(_useRecentlyUsedColor, 2),
    recentlyUsedColors = _useRecentlyUsedColor2[0],
    setRecentlyUsedColors = _useRecentlyUsedColor2[1];
  var PickerComponent = showTransparencyControl ? HexAlphaColorPicker : HexColorPicker;
  var colorValue = (_ref2 = color !== null && color !== void 0 ? color : colorInternal) !== null && _ref2 !== void 0 ? _ref2 : "";
  var getColor = function getColor(colorValue) {
    var color = tinycolor(colorValue);
    if (color.isValid()) {
      var hex = color.toHexString();
      // return `transparent` for transparent colors.
      if (color.getAlpha() === 0) hex = colorValue;else if (showTransparencyControl) hex = color.toHex8String();
      return {
        hex: hex,
        rgb: color.toRgb()
      };
    }
    return {
      hex: colorValue,
      rgb: colorValue
    };
  };
  var onColorChange = function onColorChange(color) {
    setIsColorSelected(true);
    var changeHandler = onChange !== null && onChange !== void 0 ? onChange : setColorInternal;
    changeHandler(getColor(color));
  };
  var onColorInputChange = function onColorInputChange(hex) {
    // HexColorInput onChange will trigger only if the input value is a valid color
    hexColorInputValue.current = hex;
    if (hex.length !== (showTransparencyControl ? 9 : 7)) return;
    onColorChange(hex);
    hexColorInputValue.current = "";
  };
  var onBlur = function onBlur() {
    if (!hexColorInputValue.current) return;
    onColorChange(hexColorInputValue.current);
    hexColorInputValue.current = "";
  };
  var pickColor = /*#__PURE__*/function () {
    var _ref3 = _asyncToGenerator(/*#__PURE__*/_regeneratorRuntime.mark(function _callee() {
      var colorResponse, hex;
      return _regeneratorRuntime.wrap(function (_context) {
        while (1) switch (_context.prev = _context.next) {
          case 0:
            _context.prev = 0;
            _context.next = 1;
            return open();
          case 1:
            colorResponse = _context.sent;
            hex = tinycolor(colorResponse.sRGBHex).toHexString();
            onColorChange(hex);
            _context.next = 3;
            break;
          case 2:
            _context.prev = 2;
            _context["catch"](0);
          case 3:
          case "end":
            return _context.stop();
        }
      }, _callee, null, [[0, 2]]);
    }));
    return function pickColor() {
      return _ref3.apply(this, arguments);
    };
  }();
  var onClose = function onClose() {
    if (!showRecentlyUsedColors || !isColorSelected) return;
    var newColor = getColor(colorValue);
    var recentColorsExcludingNew = recentlyUsedColors.filter(function (_ref4) {
      var hex = _ref4.hex;
      return hex !== newColor.hex;
    });
    var updatedColors = [newColor].concat(_toConsumableArray(recentColorsExcludingNew));
    if (updatedColors.length > 14) updatedColors.pop();
    setRecentlyUsedColors(updatedColors);
    setIsColorSelected(false);
  };
  return /*#__PURE__*/jsx(Dropdown, _objectSpread(_objectSpread({
    closeOnSelect: false,
    label: colorValue,
    position: "bottom-start"
  }, _objectSpread(_objectSpread({}, dropdownProps), {}, {
    onClose: onClose
  })), {}, {
    customTarget: /*#__PURE__*/jsx(Target, {
      color: color,
      colorValue: colorValue,
      showHexValue: showHexValue,
      size: size
    }),
    dropdownProps: _objectSpread(_objectSpread({}, dropdownProps === null || dropdownProps === void 0 ? void 0 : dropdownProps.dropdownProps), portalProps),
    className: classnames("neeto-ui-colorpicker__dropdown", {
      "neeto-ui-colorpicker__dropdown-size--small": size === TARGET_SIZES.small,
      "neeto-ui-colorpicker__dropdown-size--medium": size === TARGET_SIZES.medium,
      "neeto-ui-colorpicker__dropdown-size--large": size === TARGET_SIZES.large
    }),
    children: /*#__PURE__*/jsxs("div", {
      className: "neeto-ui-colorpicker__popover",
      children: [showPicker && /*#__PURE__*/jsxs(Fragment, {
        children: [showHexPicker && /*#__PURE__*/jsx("div", {
          className: "neeto-ui-colorpicker__pointer",
          "data-testid": "neeto-color-picker-section",
          children: /*#__PURE__*/jsx(PickerComponent, {
            color: colorValue,
            onChange: onColorChange
          })
        }), /*#__PURE__*/jsxs("div", {
          className: "neeto-ui-flex neeto-ui-items-center neeto-ui-justify-center neeto-ui-mt-3 neeto-ui-gap-2",
          children: [showEyeDropper && isSupported() && /*#__PURE__*/jsx(Button, {
            className: "neeto-ui-colorpicker__eyedropper-btn",
            icon: ColorPickerIcon,
            size: "small",
            style: "text",
            type: "button",
            onClick: pickColor
          }), /*#__PURE__*/jsx("div", {
            className: "neeto-ui-input__wrapper",
            children: /*#__PURE__*/jsx("div", {
              className: "neeto-ui-colorpicker__input neeto-ui-input neeto-ui-input--small",
              "data-testid": "colorpicker-editable-input",
              children: /*#__PURE__*/jsx(HexColorInput, {
                onBlur: onBlur,
                prefixed: true,
                alpha: !!showTransparencyControl,
                color: colorValue,
                "data-testid": "colorpicker-editable-input-textbox",
                onChange: onColorInputChange
              })
            })
          })]
        })]
      }), /*#__PURE__*/jsx("div", {
        "data-testid": "color-palette",
        className: classnames("neeto-ui-colorpicker__palette-wrapper", {
          "neeto-ui-colorpicker__palette-wrapper--hidden-picker": !showPicker,
          "neeto-ui-pt-3 neeto-ui-border-t neeto-ui-border-gray-200": showPicker
        }),
        children: /*#__PURE__*/jsx(Palette, {
          color: color,
          colorList: colorPalette,
          onChange: onColorChange
        })
      }), showRecentlyUsedColors && recentlyUsedColors.length > 0 && /*#__PURE__*/jsxs("div", {
        className: "neeto-ui-colorpicker__palette-wrapper neeto-ui-border-t neeto-ui-border-gray-200 neeto-ui-pt-3",
        "data-testid": "color-palette-recently-used",
        children: [/*#__PURE__*/jsx(Typography, {
          className: "neeto-ui-text-gray-600 mb-2",
          style: "body3",
          weight: "medium",
          children: getLocale(i18n, t, "neetoui.colorPicker.recentlyUsed")
        }), /*#__PURE__*/jsx(Palette, {
          colorList: recentlyUsedColors,
          onChange: onColorChange
        })]
      })]
    })
  }));
};

export { ColorPicker as default };
//# sourceMappingURL=ColorPicker.js.map
