import { _ as _extends } from '../extends-e61fd370.js';
import { _ as _slicedToArray } from '../slicedToArray-5b664d46.js';
import React__default, { useState, useCallback, useEffect } from 'react';
import { c as common, C as ColorPicker } from '../color-picker-9f39d06d.js';
import PropTypes from 'prop-types';
import ColorPickerInputGroup from './color-picker-input-group.js';
import cx from 'classnames';
import getColorInHex from './get-color-in-hex.js';
import { SavedColorShape } from './saved-colors-addon.js';
import { u as usePopper } from '../usePopper-fcd8f86a.js';
import Portal from '../portal/index.js';
import Label from '../label/index.js';
import '../defineProperty-18999f8e.js';
import '../objectWithoutProperties-72d23964.js';
import '../_baseIteratee-15f148bc.js';
import '../typeof-6c6d8d7a.js';
import '../_commonjsHelpers-57e89916.js';
import '../input/index.js';
import '../use-previous/index.js';
import '../index-4e01772f.js';
import '../toConsumableArray-f2f53597.js';
import '../index-81a9bdac.js';
import 'react-dom';
import '../icon/assets/icon-map/index.js';
import '../social-icon/index.js';
import '@fortawesome/react-fontawesome';
import '../social-icon/icons.js';
import '../social-icon/library.js';
import '@fortawesome/fontawesome-svg-core';
import '@fortawesome/free-solid-svg-icons';
import '@fortawesome/free-brands-svg-icons';
import '../tooltip/index.js';
import '../auto-id.esm-2b54f757.js';
import '../utils.esm-514fad91.js';
import '../warning-ed2bf294.js';
import '../portal.esm-613949dc.js';
import '@reach/visually-hidden';
import '../use-rerender-once/index.js';
import '../use-force-update/index.js';
import '../button/button-group.js';

var ColorInput = function ColorInput(_ref) {
  var label = _ref.label,
      onChange = _ref.onChange,
      transparency = _ref.transparency,
      value = _ref.value,
      savedColors = _ref.savedColors,
      children = _ref.children;

  var _useState = useState(),
      _useState2 = _slicedToArray(_useState, 2),
      colorInput = _useState2[0],
      setColorInput = _useState2[1];

  var _useState3 = useState(),
      _useState4 = _slicedToArray(_useState3, 2),
      colorPicker = _useState4[0],
      setColorPicker = _useState4[1];

  var _useState5 = useState(false),
      _useState6 = _slicedToArray(_useState5, 2),
      active = _useState6[0],
      setActive = _useState6[1];

  var _usePopper = usePopper(colorInput, colorPicker, {
    placement: "bottom-start",
    modifiers: [{
      name: "flip",
      enabled: true
    }]
  }),
      styles = _usePopper.styles,
      attributes = _usePopper.attributes;

  var buttonClasses = cx("flex items-center w-full bg-white border border-gray-200 rounded text-gray-800 focus:outline-none", {
    uppercase: getColorInHex(value) !== "transparent"
  });

  var handleClick = function handleClick() {
    if (active) {
      return;
    }

    setActive(true);
  };

  var handleChange = function handleChange(color) {
    onChange && onChange(color);
  };

  var handleClose = function handleClose() {
    setActive(false);
  };

  var handleDocumentClick = useCallback(function (event) {
    if (!colorInput) return;
    if (!colorPicker) return; // Close if the the click is not inside the color input or color picker

    if ((!colorInput.contains(event.target) || colorInput === event.target) && (!colorPicker.contains(event.target) || colorPicker === event.target)) {
      handleClose();
    }
  }, [colorPicker, colorInput]);
  useEffect(function () {
    document.addEventListener("mousedown", handleDocumentClick);
    return function () {
      document.removeEventListener("mousedown", handleDocumentClick);
    };
  }, [handleDocumentClick]);
  var hex = getColorInHex(value);
  var swatchClass = hex === "#FFFFFF" ? " border border-gray-200" : "";
  return /*#__PURE__*/React__default.createElement("div", {
    className: "relative",
    ref: setColorInput
  }, label && /*#__PURE__*/React__default.createElement(Label, {
    as: "div",
    className: "mb-1"
  }, label), /*#__PURE__*/React__default.createElement("div", {
    className: buttonClasses,
    onClick: handleClick
  }, /*#__PURE__*/React__default.createElement("div", {
    className: "rounded overflow-hidden ml-2 flex-none h-6 w-6" + swatchClass
  }, /*#__PURE__*/React__default.createElement(common.Swatch, {
    color: hex
  })), /*#__PURE__*/React__default.createElement(ColorPickerInputGroup, {
    color: hex,
    onChange: handleChange
  })), /*#__PURE__*/React__default.createElement(Portal, null, active && /*#__PURE__*/React__default.createElement("div", _extends({
    ref: setColorPicker,
    style: styles.popper
  }, attributes.popper), /*#__PURE__*/React__default.createElement(ColorPicker, {
    onChange: handleChange,
    onClose: handleClose,
    active: active,
    color: hex,
    hexInput: false,
    className: "mt-1",
    position: "relative",
    transparency: transparency,
    standalone: false,
    savedColors: savedColors
  }, children))));
};

ColorInput.propTypes = {
  label: PropTypes.string,
  onChange: PropTypes.func,
  value: PropTypes.string,
  transparency: PropTypes.bool,
  savedColors: PropTypes.shape(SavedColorShape),
  children: PropTypes.oneOfType([PropTypes.arrayOf(PropTypes.node), PropTypes.node])
};

export { ColorInput as default };
