import { formatSize } from '@/lib/format';
import { useShareSession } from '@/store/shareSession';
import { Button } from '@/ui/Button';
import { titleOf } from '@/features/item/summary';
import { Tile } from '@/features/item/Tile';
import styles from './DraftRow.module.css';

/** 草稿里的一行:可以移除。只在草稿阶段存在 */
export function DraftRow({ id }: { id: string }) {
  const item = useShareSession((s) => s.byId[id]);
  const removeItem = useShareSession((s) => s.removeItem);
  if (!item) return null;

  const receiving = item.state.kind === 'receiving' ? item.state.progress : null;
  const size = item.kind === 'file' ? item.size : new Blob([item.text]).size;

  return (
    <li className={styles.row}>
      <Tile item={item} />
      <span className={styles.text}>
        <span className={styles.title}>{titleOf(item)}</span>
        <span className={styles.sub}>{formatSize(size)}{receiving !== null ? ` · 传输中 ${Math.round(receiving * 100)}%` : ''}</span>
        {receiving !== null ? (
          <span className={styles.bar} role="progressbar" aria-valuenow={Math.round(receiving * 100)}>
            <span className={styles.fill} style={{ width: `${Math.round(receiving * 100)}%` }} />
          </span>
        ) : null}
      </span>
      <Button variant="ghost" icon="close" label="移除" onClick={() => void removeItem(id)} />
    </li>
  );
}