import { useState } from "react";
import { Button, FormField } from "@edr/ui-common";

import TrackingTimeline from "../../components/tracking/TrackingTimeline";
import { useTracking } from "../../hooks/useTracking";

const TrackingPage = () => {
  const [consignmentId, setConsignmentId] = useState("");
  const [activeId, setActiveId] = useState("");
  const { data, isFetching } = useTracking(activeId);

  return (
    <div className="flex max-w-2xl flex-col gap-4">
      <h1 className="text-2xl font-semibold text-gray-900">Tracking</h1>
      <div className="flex items-end gap-3">
        <FormField
          label="Consignment ID"
          value={consignmentId}
          onChange={(event) => setConsignmentId(event.target.value)}
          placeholder="UUID"
        />
        <Button onClick={() => setActiveId(consignmentId)}>Look up</Button>
      </div>
      {isFetching ? (
        <div className="text-sm text-gray-500">Loading…</div>
      ) : (
        <TrackingTimeline events={data ?? []} />
      )}
    </div>
  );
};

export default TrackingPage;
