import { fb as __rest, bU as Tooltip, fc as Progress, fd as IconComp, fe as Input, ff as CustomButton, fg as Alert, P as PropTypes, fh as __awaiter } from './index.esm2.js';
import { jsxs, jsx } from 'react/jsx-runtime';
import { useState } from 'react';
import { E } from './react-drag-drop-files.esm.esm.js';
import '@qubejs/core';
import 'react-dom';
import 'react-html-parser';
import 'react-router-dom';

const SQFileUploader = _a => {
  var {
      className = '',
      disabled,
      fileTypes = ['JPG', 'PNG', 'GIF', 'PDF', 'JPEG', 'DOC', 'DOCX', 'PPT', 'PPTX', 'RTF'],
      multiple = true,
      clearAll = false,
      onAction,
      errorMessage,
      label,
      uploadButtonText = 'Upload',
      clearButtonText = 'Clear',
      uploadOnChange = false,
      allowRename = true,
      onChange,
      uploadSuccessMessage,
      uploadFailedMessage,
      successMessageType = 'info',
      enableLoader = false,
      errorMessageType = 'warning',
      value
    } = _a,
    rest = __rest(_a, ["className", "disabled", "fileTypes", "multiple", "clearAll", "onAction", "errorMessage", "label", "uploadButtonText", "clearButtonText", "uploadOnChange", "allowRename", "onChange", "uploadSuccessMessage", "uploadFailedMessage", "successMessageType", "enableLoader", "errorMessageType", "value"]);
  const [file, setFile] = useState([]);
  const [fileNames, setFileNames] = useState([]);
  const [sucessCalled, setSuccessCalled] = useState(false);
  const [progress, setProgress] = useState(false);
  const [failedCalled, setFailedCalled] = useState(false);
  const handleChange = filenew => __awaiter(void 0, void 0, void 0, function* () {
    const takeOne = multiple ? filenew : [filenew];
    const listToBeAdded = [].filter.call(takeOne, i => file.filter(d => d.name === i.name).length === 0);
    if (listToBeAdded.length > 0) {
      const newFiles = [...(multiple ? file : []), ...listToBeAdded];
      yield setFile(newFiles);
      const newFileNames = [...fileNames, ...listToBeAdded.map(i => ({
        name: i.name
      }))];
      yield setFileNames(newFileNames);
      uploadOnChange && handleAction({
        files: newFiles
      });
    }
  });
  const handleDelete = filenew => {
    const idx = file.indexOf(filenew);
    file.splice(idx, 1);
    fileNames.splice(idx, 1);
    setFile([...file]);
    setFileNames([...fileNames]);
  };
  const success = data => {
    onChange && onChange({
      value: data,
      checkForAction: false
    });
    setSuccessCalled(true);
    setProgress(false);
    setFailedCalled(false);
  };
  const failed = () => {
    onChange && onChange({
      value: null,
      checkForAction: false
    });
    setSuccessCalled(false);
    setFailedCalled(true);
    setProgress(false);
  };
  const handleFileChange = (data, file, idx) => {
    const newFileNames = [...fileNames];
    newFileNames[idx] = {
      name: data.value
    };
    setFileNames(newFileNames);
  };
  const handleAction = obj => {
    setProgress(true);
    onAction && onAction({}, Object.assign(Object.assign({}, rest), {
      success,
      failed,
      data: {
        files: obj && obj.files || file,
        fileNames
      }
    }));
    setFile([]);
  };
  const handleClear = () => {
    setFile([]);
  };
  return jsxs("div", {
    className: `sq-file-uploader ${className}`,
    children: [label && jsx("label", {
      className: "sq-file-uploader__label",
      children: label
    }), jsx(Tooltip, {
      title: fileTypes.join(', ').toLowerCase(),
      children: jsx("span", {
        children: jsx(E, {
          disabled: disabled,
          multiple: multiple,
          fileOrFiles: file.length ? null : file,
          className: "sq-file-uploader__file",
          handleChange: handleChange,
          name: "file",
          types: fileTypes
        })
      })
    }), enableLoader && progress && jsx(Progress, {
      className: "tp-progress--active",
      style: "default"
    }), file && jsx("div", {
      className: "sq-file-uploader__list",
      children: file.map((file, idx) => {
        var _a;
        return jsxs("div", {
          title: file.name,
          className: "sq-file-uploader__file-item",
          children: [jsx("div", {
            className: "sq-file-uploader__file-icon",
            children: jsx(IconComp, {
              name: "file",
              size: "small"
            })
          }), jsxs("div", {
            className: "sq-file-uploader__file-name pt-2",
            children: [allowRename && jsx(Input, {
              helperText: file.name,
              label: "Name",
              type: "text",
              value: (_a = fileNames[idx]) === null || _a === void 0 ? void 0 : _a.name,
              onKeyPress: data => handleFileChange(data, file, idx)
            }), !allowRename && file.name]
          }), jsx("div", {
            className: "sq-file-uploader__file-delete",
            onClick: () => handleDelete(file),
            children: jsx(IconComp, {
              name: "close",
              size: "small",
              variant: "error"
            })
          })]
        }, file.name);
      })
    }), errorMessage && jsx("div", {
      className: "sq-error",
      children: errorMessage
    }), !uploadOnChange && jsx(CustomButton, {
      disabled: file.length === 0,
      variant: "outlined",
      onClick: handleAction,
      buttonText: uploadButtonText
    }), clearAll && jsx(CustomButton, {
      disabled: file.length === 0,
      variant: "outlined",
      onClick: handleClear,
      buttonText: clearButtonText
    }), uploadSuccessMessage && !progress && sucessCalled && jsx(Alert, {
      type: successMessageType,
      message: uploadSuccessMessage
    }), uploadFailedMessage && !progress && failedCalled && jsx(Alert, {
      type: errorMessageType,
      message: uploadFailedMessage
    })]
  });
};
SQFileUploader.propTypes = {
  className: PropTypes.string,
  uploadButtonText: PropTypes.string,
  clearButtonText: PropTypes.string,
  errorMessage: PropTypes.string,
  onChange: PropTypes.func,
  actionOnSelect: PropTypes.bool,
  clearAll: PropTypes.bool
};

export { SQFileUploader as default };
