import _noop from "lodash/fp/noop";
import React, { useMemo } from 'react';
import PropTypes from 'prop-types';
import getClassState from '../../util/get-class-state';
import style from './style.css';
const InputColor = props => {
  const {
    title,
    name,
    placeholder,
    value,
    defaultValue,
    onChange = _noop,
    error,
    description,
    modified = false
  } = props;
  const inlineStyle = {
    backgroundColor: value
  };
  const handleChange = useMemo(() => e => onChange(e.target.value), [onChange]);
  const className = getClassState(style.defaultStyle, style.modified, style.error, modified, error);
  return /*#__PURE__*/React.createElement("div", {
    className: className
  }, /*#__PURE__*/React.createElement("label", null, /*#__PURE__*/React.createElement("span", {
    className: style.title
  }, `${title} `), /*#__PURE__*/React.createElement("input", {
    type: "text",
    name: name,
    className: style.input,
    placeholder: placeholder,
    defaultValue: defaultValue,
    value: value,
    onInput: handleChange,
    onChange: _noop
  }), /*#__PURE__*/React.createElement("span", {
    className: style.preview,
    style: inlineStyle
  })), /*#__PURE__*/React.createElement("div", {
    className: style.description
  }, description));
};
InputColor.propTypes = process.env.NODE_ENV !== "production" ? {
  title: PropTypes.string.isRequired,
  name: PropTypes.string,
  placeholder: PropTypes.string.isRequired,
  defaultValue: PropTypes.string,
  value: PropTypes.string,
  error: PropTypes.string,
  onChange: PropTypes.func,
  description: PropTypes.string,
  modified: PropTypes.bool
} : {};
export default InputColor;
//# sourceMappingURL=index.js.map