import type {Transfer} from '../types'
import {formatBytes} from '../util'

type Props = {
  transfers: Transfer[]
}

export function TransferList({transfers}: Props) {
  if (transfers.length === 0) return null

  // newest first
  const ordered = [...transfers].reverse()

  return (
    <div className="panel">
      <h2 className="panel-title">Transfers</h2>
      <ul className="transfer-list">
        {ordered.map(t => (
          <li key={t.id} className="transfer">
            <div className="transfer-head">
              <span className="transfer-dir">{t.dir === 'out' ? '⬆' : '⬇'}</span>
              <span className="transfer-name" title={t.fileName}>
                {t.fileName}
              </span>
              <span className="transfer-meta">
                {formatBytes(t.size)} · {t.dir === 'out' ? 'to' : 'from'}{' '}
                {t.peerName}
              </span>
              <span className="transfer-pct">
                {t.done ? '✓' : `${Math.round(t.percent * 100)}%`}
              </span>
            </div>
            <div className="progress">
              <div
                className={`progress-bar ${t.done ? 'done' : ''}`}
                style={{width: `${Math.round(t.percent * 100)}%`}}
              />
            </div>
          </li>
        ))}
      </ul>
    </div>
  )
}