import { useQuery } from "@apollo/client/react";
import { useContext } from "react";
import { SEARCH_VEHICLES } from "../../graphql/vehicles.queries";
import JobCreateContext from "../../pages/jobs-create/jobs-create.context";
import AlertComponent from "../alert/alert.component";
import JobsCreateVehicleInfoComponent from "./jobs-create-vehicle-info.component";

export default function JobsCreateVehicleInfoContainer({ form }) {
  const [state] = useContext(JobCreateContext);
  const { loading, error, data } = useQuery(SEARCH_VEHICLES, {
    variables: { search: `%${state.vehicle.search}%` },
    skip: !state.vehicle.search,
    fetchPolicy: "network-only",
    nextFetchPolicy: "network-only"
  });

  if (error) return <AlertComponent title={error.message} type="error" />;

  return <JobsCreateVehicleInfoComponent loading={loading} vehicles={data ? data.search_vehicles : null} form={form} />;
}
