"use strict";

var _interopRequireWildcard = require("@babel/runtime/helpers/interopRequireWildcard");

var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");

Object.defineProperty(exports, "__esModule", {
  value: true
});
exports["default"] = ColorPicker;

var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));

var _react = _interopRequireWildcard(require("react"));

var _propTypes = _interopRequireDefault(require("prop-types"));

// Style
var classes = {};
/* istanbul ignore next */

if (typeof window !== 'undefined') classes = require("./style.module.scss");

function ColorPicker(props) {
  var hexRegex = /^#([0-9a-f]{3}|[0-9a-f]{6})$/i;

  var _useState = (0, _react.useState)('#ffffff'),
      _useState2 = (0, _slicedToArray2["default"])(_useState, 2),
      color = _useState2[0],
      setColor = _useState2[1];

  (0, _react.useEffect)(function () {
    if (props.color) {
      var validHex = hexRegex.exec(props.color);
      if (validHex) setColor(validHex[0]);
    }
  }, [props.color]);

  var handleChange = function handleChange(event) {
    setColor(event.target.value);
    if (typeof props.onChange === 'function') props.onChange(event);
  };

  return /*#__PURE__*/_react["default"].createElement("label", {
    className: [classes.ColorPicker, props.className, "Input Input_".concat(props.size)].join(' ')
  }, /*#__PURE__*/_react["default"].createElement("div", {
    className: classes['ColorPicker-Wrapper']
  }, /*#__PURE__*/_react["default"].createElement("input", {
    className: classes['ColorPicker-Input'],
    onChange: handleChange,
    type: "color",
    value: color
  })), /*#__PURE__*/_react["default"].createElement("div", {
    className: classes['ColorPicker-Value']
  }, color));
}

ColorPicker.propTypes = {
  color: _propTypes["default"].string,
  onChange: _propTypes["default"].func,
  size: _propTypes["default"].oneOf(['lg', 'md', 'sm'])
};
ColorPicker.defaultProps = {
  className: '',
  size: 'md'
};