// Copyright 1999-2023. Plesk International GmbH. All rights reserved.

import { 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';
import { jsx as _jsx } from "react/jsx-runtime";
import { jsxs as _jsxs } from "react/jsx-runtime";
import { Fragment as _Fragment } from "react/jsx-runtime";
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 = `${CLS_PREFIX}input-file`,
    className,
    onChange,
    name,
    disabled = false,
    locale,
    testId,
    accept,
    ...props
  } = _ref;
  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__*/_jsxs("span", {
    className: classNames(baseClassName, className),
    ...props,
    children: [/*#__PURE__*/_jsxs(Button, {
      className: `${baseClassName}__button`,
      "data-test": testId && `${testId}--browse-button`,
      disabled: disabled,
      component: "label",
      state: hasFocus ? 'focused' : undefined,
      children: [!disabled && /*#__PURE__*/_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__*/_jsx(Translate, {
        namespace: "InputFile",
        content: "browseButton",
        translators: locale,
        fallback: localeFallback.browseButton
      })]
    }), file && /*#__PURE__*/_jsxs(_Fragment, {
      children: [/*#__PURE__*/_jsx(Text, {
        truncate: true,
        nowrap: true,
        className: `${baseClassName}__name`,
        "data-test": testId && `${testId}--file-name`,
        intent: disabled ? 'muted' : undefined,
        children: file.name
      }), /*#__PURE__*/_jsx(Button, {
        icon: "cross-mark",
        ghost: true,
        onClick: handleReset,
        "data-test": testId && `${testId}--reset-button`,
        disabled: disabled
      })]
    })]
  });
};
export default InputFile;