import { slicedToArray as _slicedToArray } from '../../../_virtual/_rollupPluginBabelHelpers.js';
import React__default, { useState, useEffect } from 'react';
import { useColor, toColor, ColorPicker } from 'react-color-palette';
import { ColorPickerWrapper } from './style.js';
import { ColorPickerHeadWrapper } from '../../Typography/Paragraph/index.js';
import 'react-color-palette/lib/css/styles.css';
import '@mui/material';
import '../../Icons/IconWrapper/index.js';
import { ThemeProvider } from 'styled-components';
import theme from '../../../Globals/theme.js';
import globalStyle from '../../../Globals/global-styles.js';
import '../../labels/Label/style.js';
import '../../Tooltip/Tooltip/index.js';
import '../../labels/RequiredLabel/style.js';
import '../../InputField/RequiredInputField/style.js';
import '../../InputField/RichTextEditorInputField/style.js';
import InputBase from '../../InputField/InputBase/index.js';

var ColorPickerComponent = function ColorPickerComponent(_ref) {
  var width = _ref.width,
      height = _ref.height,
      onChange = _ref.onChange;

  var _useColor = useColor("hex", "#121212"),
      _useColor2 = _slicedToArray(_useColor, 2),
      color = _useColor2[0],
      setColor = _useColor2[1];

  var _useState = useState(color.hex),
      _useState2 = _slicedToArray(_useState, 2),
      colorChange = _useState2[0],
      setColorChange = _useState2[1];

  var changeColor = function changeColor(e) {
    setColor(e);
    onChange(color);
  };

  useEffect(function () {
    if (colorChange.length === 7) {
      setColor(toColor('hex', colorChange));
    }
  }, [colorChange, setColor]);
  return /*#__PURE__*/React__default.createElement(ThemeProvider, {
    theme: theme
  }, /*#__PURE__*/React__default.createElement(globalStyle, null), /*#__PURE__*/React__default.createElement(React__default.Fragment, null, /*#__PURE__*/React__default.createElement(ColorPickerWrapper, null, /*#__PURE__*/React__default.createElement(ColorPickerHeadWrapper, null, "Pick a Colour"), /*#__PURE__*/React__default.createElement(ColorPicker, {
    width: width,
    height: height,
    color: color,
    onChange: changeColor,
    hideRGB: true,
    hideHSV: true
  }), /*#__PURE__*/React__default.createElement(InputBase, {
    value: colorChange,
    onInput: function onInput(e) {
      return setColorChange(e.target.value);
    }
  }))));
};

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