import React, { useRef, useState } from 'react';
import './DragUpload.css';

export default function DragUpload() {
  const [files, setFiles] = useState([]);
  const [over, setOver] = useState(false);
  const fileRef = useRef(null);

  const addFiles = (flist) => {
    Array.prototype.forEach.call(flist, (f) => {
      const id = 'f' + Date.now() + Math.random().toString(36).slice(2, 6);
      const item = { id, name: f.name, progress: 0, done: false, thumb: '' };
      if (/^image\//.test(f.type) && f.size < 2 * 1024 * 1024) {
        const reader = new FileReader();
        reader.onload = (e) => setFiles((fs) => fs.map((x) => (x.id === id ? { ...x, thumb: e.target.result } : x)));
        reader.readAsDataURL(f);
      }
      setFiles((fs) => [...fs, item]);
      const t = setInterval(() => {
        setFiles((fs) =>
          fs.map((x) => {
            if (x.id !== id) return x;
            const p = Math.min(100, x.progress + Math.random() * 22);
            return { ...x, progress: p, done: p >= 100 };
          })
        );
        setFiles((fs) => {
          if (fs.find((x) => x.id === id && x.progress >= 100)) clearInterval(t);
          return fs;
        });
      }, 220);
    });
  };

  const remove = (id) => setFiles((fs) => fs.filter((x) => x.id !== id));

  return (
    <div className="aa-upload">
      <div
        className={'aa-upload-drop' + (over ? ' is-over' : '')}
        onClick={() => fileRef.current.click()}
        onDragOver={(e) => { e.preventDefault(); setOver(true); }}
        onDragLeave={() => setOver(false)}
        onDrop={(e) => { e.preventDefault(); setOver(false); addFiles(e.dataTransfer.files); }}
      >
        <span className="aa-upload-icon">⬆️</span>
        <div className="aa-upload-hint">将文件拖到此处，或 <b>点击选择</b></div>
      </div>
      <input ref={fileRef} type="file" multiple style={{ display: 'none' }} onChange={(e) => { addFiles(e.target.files); e.target.value = ''; }} />
      <div className="aa-upload-list">
        {files.map((it) => (
          <div key={it.id} className="aa-upload-item">
            <div className="aa-upload-thumb">{it.thumb ? <img src={it.thumb} alt="" /> : '文件'}</div>
            <div className="aa-upload-meta">
              <div className="aa-upload-name">{it.name}</div>
              <div className="aa-upload-bar"><i style={{ width: it.progress + '%' }} /></div>
            </div>
            <div className="aa-upload-status">{it.done ? '已完成' : Math.round(it.progress) + '%'}</div>
            <button className="aa-upload-del" onClick={() => remove(it.id)}>×</button>
          </div>
        ))}
      </div>
    </div>
  );
}