"use strict";

var _interopRequireWildcard = require("@babel/runtime/helpers/interopRequireWildcard");

var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");

Object.defineProperty(exports, "__esModule", {
  value: true
});
exports.default = void 0;

var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));

var _react = _interopRequireWildcard(require("react"));

var _classnames = _interopRequireDefault(require("classnames"));

var _constants = require("../../constants");

var _utils = require("../utils");

var _Text = _interopRequireDefault(require("../Text"));

var _Button = _interopRequireDefault(require("../Button"));

var _Translate = _interopRequireDefault(require("../Translate"));

var _enUS = _interopRequireDefault(require("./locale/en-US"));

// Copyright 1999-2020. Plesk International GmbH. All rights reserved.
const generateId = () => Math.random().toString(36).slice(2);
/**
 * `InputFile` component is used for browsing and choosing a file from the local disk.
 * @since 3.2.0
 */


const InputFile = ({
  baseClassName = "".concat(_constants.CLS_PREFIX, "input-file"),
  className,
  onChange,
  name,
  disabled = false,
  locale,
  testId,
  ...props
}) => {
  const [file, setFile] = (0, _react.useState)();
  const [id, setId] = (0, _react.useState)(generateId());
  const [hasFocus, setFocus] = (0, _react.useState)(false);
  const [isFocusScheduled, setFocusScheduled] = (0, _react.useState)(false);
  const inputRef = (0, _react.useRef)(null);

  const updateFile = nextFile => {
    setFile(nextFile);
    setId(generateId());
    (0, _utils.safeInvoke)(onChange, nextFile);
  };

  const handleChange = e => {
    if (e.target.files && e.target.files[0]) {
      updateFile(e.target.files[0]);
      setFocusScheduled(true);
    }
  };

  const handleReset = () => {
    updateFile(undefined);
  };

  const handleFocus = () => {
    setFocus(true);
  };

  const handleBlur = () => {
    setFocus(false);
  };

  (0, _react.useEffect)(() => {
    if (isFocusScheduled && inputRef.current) {
      inputRef.current.focus();
      setFocusScheduled(false);
    }
  }, [isFocusScheduled]);
  return /*#__PURE__*/_react.default.createElement("span", (0, _extends2.default)({
    className: (0, _classnames.default)(baseClassName, className)
  }, props), /*#__PURE__*/_react.default.createElement(_Button.default, {
    className: "".concat(baseClassName, "__button"),
    "data-test": testId && "".concat(testId, "--browse-button"),
    disabled: disabled,
    component: "label",
    state: hasFocus ? 'focused' : undefined
  }, !disabled && /*#__PURE__*/_react.default.createElement("input", {
    "data-id": id,
    key: id,
    type: "file",
    name: name,
    onChange: handleChange,
    className: "".concat(baseClassName, "__input"),
    ref: inputRef,
    "data-test": testId && "".concat(testId, "--file-input"),
    onFocus: handleFocus,
    onBlur: handleBlur
  }), /*#__PURE__*/_react.default.createElement(_Translate.default, {
    namespace: "InputFile",
    content: "browseButton",
    translators: locale,
    fallback: _enUS.default.browseButton
  })), file && /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement(_Text.default, {
    truncate: true,
    nowrap: true,
    className: "".concat(baseClassName, "__name"),
    "data-test": testId && "".concat(testId, "--file-name"),
    intent: disabled ? 'muted' : undefined
  }, file.name), /*#__PURE__*/_react.default.createElement(_Button.default, {
    icon: "cross-mark",
    ghost: true,
    onClick: handleReset,
    "data-test": testId && "".concat(testId, "--reset-button"),
    disabled: disabled
  })));
};

var _default = InputFile;
exports.default = _default;