import _extends from "@babel/runtime/helpers/extends";
// Copyright 1999-2020. Plesk International GmbH. All rights reserved.
import React, { useState, useRef, useEffect } from 'react';
import classNames from 'classnames';
import { CLS_PREFIX } from '../../constants';
import { safeInvoke } from '../utils';
import Text from '../Text';
import Button from '../Button';
import Translate from '../Translate';
import localeFallback from './locale/en-US';

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(CLS_PREFIX, "input-file"),
  className,
  onChange,
  name,
  disabled = false,
  locale,
  testId,
  ...props
}) => {
  const [file, setFile] = useState();
  const [id, setId] = useState(generateId());
  const [hasFocus, setFocus] = useState(false);
  const [isFocusScheduled, setFocusScheduled] = useState(false);
  const inputRef = useRef(null);

  const updateFile = nextFile => {
    setFile(nextFile);
    setId(generateId());
    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);
  };

  useEffect(() => {
    if (isFocusScheduled && inputRef.current) {
      inputRef.current.focus();
      setFocusScheduled(false);
    }
  }, [isFocusScheduled]);
  return /*#__PURE__*/React.createElement("span", _extends({
    className: classNames(baseClassName, className)
  }, props), /*#__PURE__*/React.createElement(Button, {
    className: "".concat(baseClassName, "__button"),
    "data-test": testId && "".concat(testId, "--browse-button"),
    disabled: disabled,
    component: "label",
    state: hasFocus ? 'focused' : undefined
  }, !disabled && /*#__PURE__*/React.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.createElement(Translate, {
    namespace: "InputFile",
    content: "browseButton",
    translators: locale,
    fallback: localeFallback.browseButton
  })), file && /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(Text, {
    truncate: true,
    nowrap: true,
    className: "".concat(baseClassName, "__name"),
    "data-test": testId && "".concat(testId, "--file-name"),
    intent: disabled ? 'muted' : undefined
  }, file.name), /*#__PURE__*/React.createElement(Button, {
    icon: "cross-mark",
    ghost: true,
    onClick: handleReset,
    "data-test": testId && "".concat(testId, "--reset-button"),
    disabled: disabled
  })));
};

export default InputFile;