import LoadingSpinner from "../loading-spinner/loading-spinner.component";
import AlertComponent from "../alert/alert.component";
import { Timeline } from "antd";
import { useTranslation } from "react-i18next";
import { DateTimeFormatter } from "../../utils/DateFormatter";

export default function ScheduleExistingAppointmentsList({ existingAppointments }) {
  const { t } = useTranslation();
  if (existingAppointments.loading) return <LoadingSpinner />;
  if (existingAppointments.error) return <AlertComponent title={existingAppointments.error.message} type="error" />;

  return (
    <div>
      {t("appointments.labels.priorappointments")}
      <Timeline
        items={
          existingAppointments.data
            ? existingAppointments.data.appointments.map((item) => ({
                key: item.id,
                color: item.canceled ? "red" : item.arrived ? "green" : "blue",
                children: (
                  <>
                    {item.canceled
                      ? t("appointments.labels.cancelledappointment")
                      : item.arrived
                        ? t("appointments.labels.arrivedon")
                        : t("appointments.labels.scheduledfor")}
                    <DateTimeFormatter>{item.start}</DateTimeFormatter>
                  </>
                )
              }))
            : []
        }
      />
    </div>
  );
}
