import _getOr from "lodash/fp/getOr";
import _noop from "lodash/fp/noop";
import React, { useCallback, useState } from 'react';
import PropTypes from 'prop-types';
import { NovaLineBusinessCircleView as PreviewIcon, NovaLineContentEditionPencil2 as PencilIcon } from '@coorpacademy/nova-icons';
import Provider, { GetSkinFromContext } from '../provider';
import InputPreview from './input-preview';
import style from './style.css';
const InputHtml = (props, legacyContext) => {
  const {
    value = '',
    onChange = _noop
  } = props;
  const [text, setText] = useState(value);
  const [preview, setPreview] = useState(true);
  const handleChange = useCallback(e => {
    const _value = e.target.value;
    setText(_value);
    onChange(_value);
  }, [onChange]);
  const handlePreview = useCallback(e => {
    e.preventDefault();
    setPreview(!preview);
  }, [preview, setPreview]);
  const skin = GetSkinFromContext(legacyContext);
  const mediumColor = _getOr('#999999', 'common.medium', skin);
  const {
    title,
    placeholder,
    error,
    description,
    disabled
  } = props;
  const className = error ? style.error : style.defaultStyle;
  const iconContent = !preview ? /*#__PURE__*/React.createElement(PreviewIcon, {
    style: {
      color: mediumColor
    },
    height: 16
  }) : /*#__PURE__*/React.createElement(PencilIcon, {
    style: {
      color: mediumColor
    },
    height: 16
  });
  return /*#__PURE__*/React.createElement("div", {
    className: className
  }, /*#__PURE__*/React.createElement("label", null, /*#__PURE__*/React.createElement("span", {
    className: style.title
  }, `${title} `), /*#__PURE__*/React.createElement("div", {
    className: style.contentWrapper
  }, /*#__PURE__*/React.createElement(InputPreview, {
    title: title,
    text: text,
    placeholder: placeholder,
    onChange: handleChange,
    disabled: disabled,
    preview: preview,
    className: style.input
  })), /*#__PURE__*/React.createElement("span", {
    "data-testid": preview ? 'pencil-icon' : 'preview-icon',
    className: style.toggle,
    onClick: handlePreview
  }, iconContent)), /*#__PURE__*/React.createElement("div", {
    className: style.description
  }, description));
};
InputHtml.propTypes = process.env.NODE_ENV !== "production" ? {
  title: PropTypes.string,
  placeholder: PropTypes.string,
  disabled: PropTypes.bool,
  value: PropTypes.string,
  error: PropTypes.string,
  onChange: PropTypes.func,
  description: PropTypes.string
} : {};
InputHtml.contextTypes = {
  skin: Provider.childContextTypes.skin
};
export default InputHtml;
//# sourceMappingURL=index.js.map