import React, { useMemo } from 'react';
import PropTypes from 'prop-types';
import ButtonLink from '../../atom/button-link';
import Loader from '../../atom/loader';
import Provider from '../../atom/provider';
import style from './style.css';
const BrandCreateForm = (props, context) => {
  const {
    title,
    subtitle,
    description,
    field,
    onSubmit,
    submitValue,
    isPending,
    isModified
  } = props;
  const {
    translate
  } = context;
  const waitMessage = translate('Wait_creation');
  const wrapperClass = isModified || isPending || field.error ? style.modifiedWrapper : style.wrapper;
  const fieldClass = field.error ? style.error : style.defaultStyle;
  const disabled = isPending || !isModified;
  const {
    onChange
  } = field;
  const handleChange = useMemo(() => e => onChange(e.target.value), [onChange]);
  const actionView = isPending ? /*#__PURE__*/React.createElement("div", null, /*#__PURE__*/React.createElement("div", {
    className: style.wait
  }, waitMessage), /*#__PURE__*/React.createElement("div", {
    className: style.loading
  }, /*#__PURE__*/React.createElement(Loader, null))) : /*#__PURE__*/React.createElement("div", null, /*#__PURE__*/React.createElement(ButtonLink, {
    type: "primary",
    "data-name": "brand_create_submit_button",
    usage: "submit",
    customStyle: {
      display: 'inline-block',
      width: 'fit-content'
    },
    disabled: disabled,
    label: submitValue
  }));
  return /*#__PURE__*/React.createElement("div", {
    className: wrapperClass
  }, /*#__PURE__*/React.createElement("div", {
    className: style.header
  }, /*#__PURE__*/React.createElement("h1", null, title)), /*#__PURE__*/React.createElement("form", {
    className: style.content,
    onSubmit: onSubmit
  }, /*#__PURE__*/React.createElement("h2", null, subtitle), /*#__PURE__*/React.createElement("div", {
    className: style.description
  }, description), /*#__PURE__*/React.createElement("div", {
    className: fieldClass
  }, /*#__PURE__*/React.createElement("label", null, /*#__PURE__*/React.createElement("input", {
    type: "text",
    maxLength: "40",
    "data-name": "brand_create_text_input",
    placeholder: field.placeholder,
    defaultValue: field.value,
    onInput: handleChange
  }), field.label)), actionView));
};
BrandCreateForm.contextTypes = {
  translate: Provider.childContextTypes.translate
};
BrandCreateForm.propTypes = process.env.NODE_ENV !== "production" ? {
  title: PropTypes.string.isRequired,
  subtitle: PropTypes.string.isRequired,
  description: PropTypes.string.isRequired,
  field: PropTypes.shape({
    placeholder: PropTypes.string.isRequired,
    label: PropTypes.string.isRequired,
    onChange: PropTypes.func.isRequired,
    error: PropTypes.string,
    value: PropTypes.string
  }).isRequired,
  onSubmit: PropTypes.func.isRequired,
  submitValue: PropTypes.string.isRequired,
  isPending: PropTypes.bool,
  isModified: PropTypes.bool
} : {};
export default BrandCreateForm;
//# sourceMappingURL=index.js.map