"use strict";

var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
Object.defineProperty(exports, "__esModule", {
  value: true
});
exports.default = void 0;
var _react = 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"));
var _jsxRuntime = require("react/jsx-runtime");
// Copyright 1999-2023. 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 = _ref => {
  let {
    baseClassName = `${_constants.CLS_PREFIX}input-file`,
    className,
    onChange,
    name,
    disabled = false,
    locale,
    testId,
    accept,
    ...props
  } = _ref;
  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__*/(0, _jsxRuntime.jsxs)("span", {
    className: (0, _classnames.default)(baseClassName, className),
    ...props,
    children: [/*#__PURE__*/(0, _jsxRuntime.jsxs)(_Button.default, {
      className: `${baseClassName}__button`,
      "data-test": testId && `${testId}--browse-button`,
      disabled: disabled,
      component: "label",
      state: hasFocus ? 'focused' : undefined,
      children: [!disabled && /*#__PURE__*/(0, _jsxRuntime.jsx)("input", {
        "data-id": id,
        type: "file",
        name: name,
        onChange: handleChange,
        className: `${baseClassName}__input`,
        ref: inputRef,
        "data-test": testId && `${testId}--file-input`,
        onFocus: handleFocus,
        onBlur: handleBlur,
        accept: accept
      }, id), /*#__PURE__*/(0, _jsxRuntime.jsx)(_Translate.default, {
        namespace: "InputFile",
        content: "browseButton",
        translators: locale,
        fallback: _enUS.default.browseButton
      })]
    }), file && /*#__PURE__*/(0, _jsxRuntime.jsxs)(_jsxRuntime.Fragment, {
      children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_Text.default, {
        truncate: true,
        nowrap: true,
        className: `${baseClassName}__name`,
        "data-test": testId && `${testId}--file-name`,
        intent: disabled ? 'muted' : undefined,
        children: file.name
      }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_Button.default, {
        icon: "cross-mark",
        ghost: true,
        onClick: handleReset,
        "data-test": testId && `${testId}--reset-button`,
        disabled: disabled
      })]
    })]
  });
};
var _default = exports.default = InputFile;