"use client";

import { use } from "react";
import { TrailRegister } from "./TrailRegister";

type Walker = {
  user: {
    did: string;
    handle: string;
    avatar?: string;
  };
  isYou: boolean;
  key: string;
};

type Completion = {
  user: {
    did: string;
    handle: string;
    avatar?: string;
  };
  timestamp: Date;
  completionUri: string;
  isYou: boolean;
};

type Props = {
  mode: "walked" | "completed";
  walkers?: Promise<Walker[]>;
  completions?: Promise<Completion[]>;
  onDelete: (key: string) => void;
};

export function TrailRegisterDeferred({ mode, walkers, completions, onDelete }: Props) {
  let resolvedWalkers: Walker[];

  if (walkers) {
    resolvedWalkers = use(walkers);
  } else if (completions) {
    const resolvedCompletions = use(completions);
    resolvedWalkers = resolvedCompletions.map((c) => ({
      user: c.user,
      isYou: c.isYou,
      key: c.completionUri,
    }));
  } else {
    resolvedWalkers = [];
  }

  return <TrailRegister mode={mode} walkers={resolvedWalkers} onDelete={onDelete} />;
}
