// @ts-check

import { gql } from "@apollo/client/core";
import { useApolloClient } from "@apollo/client/react/hooks/useApolloClient.js";
import { useMutation } from "@apollo/client/react/hooks/useMutation.js";
import { createElement as h } from "react";

const CRIAR_DOCUMENTO = gql`
  mutation CriarDocumento($arquivo: [Upload!]!, $input: CreateDocumentoInput!) {
    criarDocumento(arquivo: $arquivo, input: $input) {
      id
    }
  }
`;

export default function CriarDocumento() {
  const [multipleUploadMutation] = useMutation(CRIAR_DOCUMENTO);
  const apolloClient = useApolloClient();

  /** @type {import("react").ChangeEventHandler<HTMLInputElement>} */
  function onChange({ target: { validity, files } }) {
    if (validity.valid && files && files[0]) {
      multipleUploadMutation({
        variables: {
          arquivo: Array.from(files),
          input: {
            modeloId: 26,
            fluxoId: 33,
          },
        },
      }).then(() => {
        apolloClient.resetStore();
      });
    }
  }

  return h("input", { type: "file", multiple: true, required: true, onChange });
}