'use strict';

exports.__esModule = true;
exports.default = ColorPicker;

var _react = require('react');

var _react2 = _interopRequireDefault(_react);

var _propTypes = require('prop-types');

var _propTypes2 = _interopRequireDefault(_propTypes);

var _styleModule = require('./style.module.scss');

var _styleModule2 = _interopRequireDefault(_styleModule);

function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }

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

  var _useState = (0, _react.useState)('#ffffff'),
      color = _useState[0],
      setColor = _useState[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 _react2.default.createElement(
    'label',
    { className: [_styleModule2.default.ColorPicker, props.className, 'Input Input_' + props.size].join(' ') },
    _react2.default.createElement(
      'div',
      { className: _styleModule2.default['ColorPicker-Wrapper'] },
      _react2.default.createElement('input', { className: _styleModule2.default['ColorPicker-Input'], onChange: handleChange, type: 'color', value: color })
    ),
    _react2.default.createElement(
      'div',
      { className: _styleModule2.default['ColorPicker-Value'] },
      color
    )
  );
}

ColorPicker.propTypes = process.env.NODE_ENV !== "production" ? {
  color: _propTypes2.default.string,
  onChange: _propTypes2.default.func,
  size: _propTypes2.default.oneOf(['lg', 'md', 'sm'])
} : {};

ColorPicker.defaultProps = {
  className: '',
  size: 'md'
};
module.exports = exports['default'];