// import TimeAgo from 'javascript-time-ago'
// import de from 'javascript-time-ago/locale/de'
// import {useEffect, useState} from "react";

import classNames from "../../../util/classNames";

export default function ProgressIndicator(props: {first?: boolean, id: string, name: string, arrival: Date, delay?: number}) {
  // const [timeUntil, setTimeUntil] = useState<string>("");
  //
  // useEffect(() => {
  //   // Setup TimeAgo
  //   TimeAgo.addDefaultLocale(de);
  //   const timeAgo = new TimeAgo('de-DE')
  //
  //   const update = () => {
  //     setTimeUntil(timeAgo.format(new Date(), {future: true}));
  //   }
  //
  //   setInterval(update, 1000);
  //   update();
  // }, []);

  return (
      <li className={`relative ${!(props.first ?? false) ? "-mt-3.5" : "-mt-2"} text-sm text-zinc-300`} key={props.id}>
        <div className={"flex flex-row gap-4"}>
          <div className={"w-20 flex flex-row justify-center"}>
            <div className="w-[.25rem] h-6 -mb-5 bg-zinc-400" aria-hidden="true" />
          </div>
          <div className={"flex-1"}></div>
        </div>

        <div className="relative flex flex-row items-center gap-4">
          <div className={"w-20 flex flex-row justify-center"}>
            <span className="h-[2.6rem] flex items-center" aria-hidden="true">
              <span className="relative z-10 w-[1.5rem] h-[1.5rem] flex items-center justify-center bg-zinc-400 rounded-full">
                <span className="h-[1rem] w-[1rem] bg-zinc-900 rounded-full" />
              </span>
            </span>
          </div>

          <div className={"flex-1"}>
            {props.name}
          </div>

          <div className={classNames("tabular-nums", props.delay ? "text-red-400" : "text-zinc-300")}>
            {props.delay ? (
              <span className={"text-red-400"}>
                (+{props.delay})&nbsp;&nbsp;
              </span>
            ) : null}
            {renderTime(props.arrival)}
          </div>
        </div>
      </li>
  )
}

const renderTime = (date: Date) => {
  return `${date.getHours().toString().padStart(2, "0")}:${date.getMinutes().toString().padStart(2, "0")} Uhr`
}