jest.mock("../../Contexts/UserContext");
jest.mock("../../Contexts/StatusContext");
jest.mock("../../../services/fleetsAPI");

import React from "react";
import {
  render,
  act,
} from "@testing-library/react";
import { UserProvider, setToken } from "../../Contexts/UserContext";
import { StatusProvider } from "../../Contexts/StatusContext";
import { TEST_AUTH_OBJECT_FISKER } from "../../../utils/testing";
import UpdateFleetVehicles from "./UpdateFleetVehicles";
import fleetsAPI from "../../../services/fleetsAPI";

jest.mock('@material-ui/core/FormControl', () => {
  const React = require('react');
  return () => <div data-testid="mock-form-control" />;
});

jest.mock('@material-ui/core/FormControlLabel', () => {
  const React = require('react');
  return () => <div data-testid="mock-form-control-label" />;
});

jest.mock('@material-ui/core/FormGroup', () => {
  const React = require('react');
  return () => <div data-testid="mock-form-group" />;
});

jest.mock('@material-ui/core/FormLabel', () => {
  const React = require('react');
  return () => <div data-testid="mock-form-label" />;
});

jest.mock('@material-ui/core/Checkbox', () => {
  const React = require('react');
  return () => <div data-testid="mock-checkbox" />;
});

jest.mock('@material-ui/core/Radio', () => {
  const React = require('react');
  return () => <div data-testid="mock-radio" />;
});

jest.mock('@material-ui/core/RadioGroup', () => {
  const React = require('react');
  return () => <div data-testid="mock-radio-group" />;
});

jest.mock('@material-ui/core/TextField', () => {
  const React = require('react');
  return () => <div data-testid="mock-text-field" />;
});

describe("BulkActions/UpdateFleetVehicles", () => {
  beforeAll(() => {
    setToken(TEST_AUTH_OBJECT_FISKER);
  });

  it("makes request add vehicle to one fleet and remove from another", async () => {
    // const add = jest.spyOn(fleetsAPI, "addFleetVehicles");
    const remove = jest.spyOn(fleetsAPI, "deleteFleetVehicles");
    const ref = React.createRef();

    render(
      <StatusProvider>
        <UserProvider>
          <UpdateFleetVehicles
            ref={ref}
            ids={["TESTVIN123456789a", "TESTVIN123456789b", "TESTVIN123456789c"]}
            idCSV=""
            fleet="US-WEST"
          />
        </UserProvider>
      </StatusProvider>
    );

    await act(async () => ref.current.submit());
    // expect(add).toHaveBeenCalled();
    expect(remove).toHaveBeenCalled();
  });
});
