import React, { useState, useEffect } from 'react';
import PropTypes from 'prop-types';
import classes from './style.module.scss';

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

  var _useState = useState('#ffffff'),
      color = _useState[0],
      setColor = _useState[1];

  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 React.createElement(
    'label',
    { className: [classes.ColorPicker, props.className, 'Input Input_' + props.size].join(' ') },
    React.createElement(
      'div',
      { className: classes['ColorPicker-Wrapper'] },
      React.createElement('input', { className: classes['ColorPicker-Input'], onChange: handleChange, type: 'color', value: color })
    ),
    React.createElement(
      'div',
      { className: classes['ColorPicker-Value'] },
      color
    )
  );
}

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

ColorPicker.defaultProps = {
  className: '',
  size: 'md'
};