import React, { useState } from 'react';
import {
  FiFile,
  FiFileText,
  FiImage,
  FiMusic,
  FiVideo,
  FiX,
} from 'react-icons/fi';
import styles from './index.module.scss';

interface UploadImagerProps {
  onFileSelect?: (files: File[]) => void;
  multiple?: boolean;
  accept?: string;
  title?: string;
}

const UploadImager: React.FC<UploadImagerProps> = ({
  onFileSelect,
  multiple = false,
  accept = '*',
  title = 'Upload Files',
}) => {
  const [files, setFiles] = useState<
    Array<{ file: File; progress: number; id: string }>
  >([]);

  const getFileIcon = (type: string) => {
    if (type.startsWith('image/')) return <FiImage size={24} />;
    if (type.startsWith('video/')) return <FiVideo size={24} />;
    if (type.startsWith('audio/')) return <FiMusic size={24} />;
    if (type.startsWith('text/')) return <FiFileText size={24} />;
    if (type.includes('pdf')) return <FiFileText size={24} />;
    return <FiFile size={24} />;
  };

  const handleFileSelect = (event: React.ChangeEvent<HTMLInputElement>) => {
    const selectedFiles = Array.from(event.target.files || []);

    // Create new files with unique IDs
    const newFiles = selectedFiles.map((file) => ({
      file,
      progress: 0,
      id: Math.random().toString(36).substring(7),
    }));

    // Add new files to state
    setFiles((prevFiles) => [...prevFiles, ...newFiles]);

    // Start progress simulation for each new file
    newFiles.forEach((fileObj) => {
      const interval = setInterval(() => {
        setFiles((prevFiles) => {
          const updatedFiles = [...prevFiles];
          const fileIndex = updatedFiles.findIndex((f) => f.id === fileObj.id);

          if (fileIndex !== -1) {
            if (updatedFiles[fileIndex].progress < 100) {
              updatedFiles[fileIndex].progress += 10;
            } else {
              clearInterval(interval);
            }
          } else {
            clearInterval(interval);
          }

          return updatedFiles;
        });
      }, 300);
    });

    if (onFileSelect) {
      onFileSelect(selectedFiles);
    }
  };

  const removeFile = (id: string) => {
    setFiles((prev) => prev.filter((file) => file.id !== id));
  };

  return (
    <div className={styles.uploadImager}>
      <div className={styles.dropZone}>
        <input
          type="file"
          onChange={handleFileSelect}
          multiple={multiple}
          accept={accept}
          id="file-upload"
        />
        <label htmlFor="file-upload" className={styles.uploadLabel}>
          <img src="/images/icons/uploader-icon.png" alt="" />
          <span>{title}</span>
        </label>
      </div>

      {files.length > 0 && (
        <div className={styles.fileList}>
          {files.map((fileObj) => (
            <div key={fileObj.id} className={styles.fileItem}>
              <div className={styles.fileInfo}>
                {getFileIcon(fileObj.file.type)}
                <span className={styles.fileName}>{fileObj.file.name}</span>
                <button
                  className={styles.removeBtn}
                  onClick={() => removeFile(fileObj.id)}
                >
                  <FiX size={18} />
                </button>
              </div>
              <div className={styles.progressWrapper}>
                <div
                  className={styles.progressBar}
                  style={{ width: `${fileObj.progress}%` }}
                />
                <span className={styles.progressText}>{fileObj.progress}%</span>
              </div>
            </div>
          ))}
        </div>
      )}
    </div>
  );
};

export default UploadImager;