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}
        />
    );
}