import { useEffect, useState } from "react";
import { useDataContext } from "../../common/contexts/data_context";
import { Route, TravelHistory } from "../domain/entities/travel_history";

import { useTranslation } from "react-i18next";
import { useGet } from "../../common/hooks/useGet";
export enum TravelHistorySection {
  ACTIVE = "Active Travels",
  PAST = "Past Travels",
}

interface SectionItem {
  type: string;
  title: string;
  data: Route[];
}

export const useGetTravelHistory = () => {
  const { travelRepository } = useDataContext();
  const [preparedData, setPreparedData] = useState<SectionItem[] | null>(null);
  const LANG = useTranslation();
  const callback = () => travelRepository!.getTravelHistory();
  const { data, requestStatus, refresh } = useGet<TravelHistory>(callback);
  //TODO: Cambiar la destructuración múltiple de pastTravels
  useEffect(() => {
    if (data) {
      const pastTravels = data.pastTravels;
      const activeTravels = data.activeTravel ? data.activeTravel : [];
      const preparedData = [
        {
          type: TravelHistorySection.ACTIVE,
          data: activeTravels,
          title: LANG.t("travelHistoryScreen.activeTravelsLabel"),
        },
        {
          type: TravelHistorySection.PAST,
          data: pastTravels,
          title: LANG.t("travelHistoryScreen.pastTravelsLabel"),
        },
      ];
      setPreparedData(preparedData);
    }
  }, [data]);

  return { travelHistory: preparedData, requestStatus, refresh };
};
