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

export default function JobsCreateVehicleInfoContainer({ form }) {
  const [state] = useContext(JobCreateContext);
  const { loading, error, data } = useQuery(SEARCH_VEHICLE_BY_VIN, {
    variables: { vin: `%${state.vehicle.search}%` },
    skip: !state.vehicle.search,
  });

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

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