import _slicedToArray from "@babel/runtime/helpers/esm/slicedToArray";
import React, { useState } from "react";
import TextField from "@material-ui/core/TextField";
import { makeStyles } from "@material-ui/core/styles";
import isEmpty from "lodash/isEmpty";
var useStyles = makeStyles({
  textField: {
    marginLeft: 8
  }
});
export default (function (_ref) {
  var value = _ref.value,
      onChange = _ref.onChange;
  var c = useStyles();

  var _useState = useState(value || ""),
      _useState2 = _slicedToArray(_useState, 2),
      newValue = _useState2[0],
      setNewValue = _useState2[1];

  var onBlur = function onBlur() {
    if (!isEmpty(newValue) && newValue !== "unnamed") {
      onChange(newValue);
      setNewValue(newValue);
    } else {
      setNewValue(value);
    }
  };

  return /*#__PURE__*/React.createElement(TextField, {
    className: c.textField,
    label: "File Name",
    variant: "outlined",
    size: "small",
    InputProps: {
      inputProps: {
        style: {
          color: "#000"
        }
      }
    },
    onBlur: onBlur,
    onKeyDown: function onKeyDown(e) {
      if (e.key === "Enter") {
        e.preventDefault();
        e.stopPropagation();
        e.target.blur();
      }
    },
    onKeyPress: function onKeyPress(e) {
      e.stopPropagation();
    },
    onChange: function onChange(e) {
      setNewValue(e.target.value);
    },
    value: newValue || ""
  });
});