import React, { useEffect } from "react";
import VehicleDetailComponent from "./vehicles-detail.page.component";
import { useQuery } from "@apollo/client";
import { useParams } from "react-router-dom";
import { QUERY_VEHICLE_BY_ID } from "../../graphql/vehicles.queries";
import LoadingSpinner from "../../components/loading-spinner/loading-spinner.component";
import AlertComponent from "../../components/alert/alert.component";
import { useTranslation } from "react-i18next";
import { addRecentItem, setBreadcrumbs, setSelectedHeader } from "../../redux/application/application.actions";
import { connect } from "react-redux";
import { CreateRecentItem } from "../../utils/create-recent-item";
import NotFound from "../../components/not-found/not-found.component";
import InstanceRenderManager from "../../utils/instanceRenderMgr";

const mapDispatchToProps = (dispatch) => ({
  setBreadcrumbs: (breadcrumbs) => dispatch(setBreadcrumbs(breadcrumbs)),
  addRecentItem: (item) => dispatch(addRecentItem(item)),
  setSelectedHeader: (key) => dispatch(setSelectedHeader(key))
});

export function VehicleDetailContainer({ setBreadcrumbs, addRecentItem, setSelectedHeader }) {
  const { vehId } = useParams();
  const { t } = useTranslation();

  const { loading, data, error, refetch } = useQuery(QUERY_VEHICLE_BY_ID, {
    variables: { id: vehId },
    fetchPolicy: "network-only",
    nextFetchPolicy: "network-only"
  });

  useEffect(() => {
    document.title = t("titles.vehicledetail", {
      app: InstanceRenderManager({
        imex: "$t(titles.imexonline)",
        rome: "$t(titles.romeonline)",
        promanager: "$t(titles.promanager)"
      }),
      vehicle:
        data && data.vehicles_by_pk
          ? `${(data.vehicles_by_pk && data.vehicles_by_pk.v_model_yr) || ""} ${
              (data.vehicles_by_pk && data.vehicles_by_pk.v_make_desc) || ""
            } ${(data.vehicles_by_pk && data.vehicles_by_pk.v_model_desc) || ""}`
          : ""
    });
    setSelectedHeader("vehicles");

    setBreadcrumbs([
      { link: "/manage/vehicles", label: t("titles.bc.vehicles") },
      {
        link: `/manage/vehicles/${vehId}`,
        label: t("titles.bc.vehicle-details", {
          vehicle:
            data && data.vehicles_by_pk
              ? `${(data.vehicles_by_pk && data.vehicles_by_pk.v_model_yr) || ""} ${
                  (data.vehicles_by_pk && data.vehicles_by_pk.v_make_desc) || ""
                } ${(data.vehicles_by_pk && data.vehicles_by_pk.v_model_desc) || ""}`
              : ""
        })
      }
    ]);

    if (data && data.vehicles_by_pk)
      addRecentItem(
        CreateRecentItem(
          vehId,
          "vehicle",
          `${data.vehicles_by_pk.v_vin || "N/A"} | ${
            data.vehicles_by_pk.v_model_yr || ""
          } ${data.vehicles_by_pk.v_make_desc || ""} ${data.vehicles_by_pk.v_model_desc || ""}`.trim(),
          `/manage/vehicles/${vehId}`
        )
      );
  }, [t, data, setBreadcrumbs, vehId, addRecentItem, setSelectedHeader]);

  if (loading) return <LoadingSpinner />;
  if (error) return <AlertComponent message={error.message} type="error" />;
  if (!data.vehicles_by_pk) return <NotFound />;
  return <VehicleDetailComponent vehicle={data.vehicles_by_pk} refetch={refetch} />;
}

export default connect(null, mapDispatchToProps)(VehicleDetailContainer);
