import { formatSize, formatTransferProgress, type TransferState } from '@/lib/format';
import styles from './TransferProgress.module.css';

interface Props {
  state: TransferState & { sentBytes?: number; totalBytes?: number };
  /** 排队中或上传中的文件可以取消 */
  onCancel?: () => void;
}

/** 文件上传的进度:一行状态文字,一条进度条,可取消 */
export function TransferProgress({ state, onCancel }: Props) {
  const queued = state.phase === 'queued';
  const detail = state.sentBytes !== undefined && state.totalBytes ? `${formatSize(state.sentBytes)} / ${formatSize(state.totalBytes)}` : '';
  return <div className={styles.transfer} role="status">
    <div className={styles.line}>
      <span>{formatTransferProgress(state)}</span>
      {detail && !queued ? <small>{detail}</small> : null}
      {onCancel ? <button type="button" className={styles.cancel} onClick={onCancel}>取消</button> : null}
    </div>
    {queued ? null : <progress max={1} value={state.progress} aria-label="上传进度" />}
  </div>;
}