import { forwardRef, useImperativeHandle } from "react";
import { useStatusContext } from "../../Contexts/StatusContext";
import { useUserContext } from "../../Contexts/UserContext";
import vehiclesAPI from "../../../services/vehiclesAPI";

export default forwardRef(({
  ids,
  idCSV,
}, ref) => {
  const { setMessage } = useStatusContext();
  const { token: { idToken: { jwtToken: token } } } = useUserContext();

  useImperativeHandle(ref, () => ({
    async submit() {
      return vehiclesAPI
        .flashpackVersionBulkUpdate(ids, token)
        .then((data) => {
          if (data.error) {
            setMessage(`${data.error}: ${data.message}`);
          } else if (ids.length === 1) {
            setMessage(`Updating flashpack number for ${ids[0]}`);
          } else {
            setMessage(`Updating flashpack numbers for ${ids.length} cars`);
          }
        });
    },
  }));

  return (
    <div>
      <p>
        You are updating flashpack numbers for the following VINs: {idCSV}.
      </p>
    </div>
  );
});