import { fb as __rest, fv as SQIconButton, bU as Tooltip, fc as Progress, fd as IconComp, 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 = false,
      clearAll = false,
      onAction,
      errorMessage,
      label,
      uploadButtonText = 'Upload',
      clearButtonText = 'Clear',
      uploadOnChange = false,
      pathField = 'url',
      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", "pathField", "onChange", "uploadSuccessMessage", "uploadFailedMessage", "successMessageType", "enableLoader", "errorMessageType", "value"]);
  const [file, setFile] = 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);
      uploadOnChange && handleAction({
        files: newFiles
      });
    }
  });
  const handleDelete = filenew => {
    const idx = file.indexOf(filenew);
    file.splice(idx, 1);
    setFile([...file]);
  };
  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 handleAction = obj => {
    setProgress(true);
    onAction && onAction({}, Object.assign(Object.assign({}, rest), {
      success,
      failed,
      data: {
        files: obj && obj.files || file
      }
    }));
    setFile([]);
  };
  const handleClear = () => {
    setFile([]);
  };
  const removeImage = () => {
    onChange && onChange({
      value: null,
      checkForAction: false
    });
  };
  return jsxs("div", {
    className: `sq-image-uploader ${className}`,
    children: [label && jsx("label", {
      className: "sq-image-uploader__label",
      children: label
    }), jsxs("div", {
      className: "sq-image-uploader__container",
      children: [value && value[pathField] && jsxs("div", {
        className: "sq-image-uploader__image-preview",
        children: [jsx("img", {
          src: value[pathField]
        }), jsx(SQIconButton, {
          title: 'Remove',
          className: "sq-image-uploader__image-preview-close",
          iconName: 'close',
          onClick: removeImage
        })]
      }), jsx("div", {
        className: "sq-image-uploader__image-placeholder",
        children: jsx(Tooltip, {
          title: fileTypes.join(', ').toLowerCase(),
          children: jsx("span", {
            children: jsx(E, {
              disabled: disabled,
              multiple: multiple,
              fileOrFiles: file.length ? null : file,
              className: "sq-image-uploader__file",
              handleChange: handleChange,
              name: "file",
              types: fileTypes
            })
          })
        })
      }), enableLoader && progress && jsx(Progress, {
        className: "tp-progress--active",
        style: "default"
      }), file && jsx("div", {
        className: "sq-image-uploader__list",
        children: file.map(file => {
          return jsxs("div", {
            title: file.name,
            className: "sq-image-uploader__file-item",
            children: [jsx("div", {
              className: "sq-image-uploader__file-icon",
              children: jsx(IconComp, {
                name: "file",
                size: "small"
              })
            }), jsx("div", {
              className: "sq-image-uploader__file-name",
              children: file.name
            }), jsx("div", {
              className: "sq-image-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 };
