import { useQuery } from "@apollo/client";
import React, { 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 message={error.message} type="error" />;

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