import { gql, useApolloClient, useMutation } from "@apollo/client";
import ButtonSubmit from "device-agnostic-ui/ButtonSubmit.mjs";
import Code from "device-agnostic-ui/Code.mjs";
import Fieldset from "device-agnostic-ui/Fieldset.mjs";
import Textbox from "device-agnostic-ui/Textbox.mjs";
import React from "react";

const SINGLE_UPLOAD_MUTATION = gql`
  mutation singleUpload($file: Upload!) {
    singleUpload(file: $file) {
      id
    }
  }
`;

export function UploadBlob() {
  const [name, setName] = React.useState("");
  const [content, setContent] = React.useState("");
  const [singleUploadMutation, { loading }] = useMutation(
    SINGLE_UPLOAD_MUTATION
  );
  const apolloClient = useApolloClient();

  const onNameChange = ({ target: { value } }) => setName(value);
  const onContentChange = ({ target: { value } }) => setContent(value);
  const onSubmit = (event) => {
    event.preventDefault();

    const file = new Blob([content], { type: "text/plain" });
    file.name = `${name}.txt`;

    singleUploadMutation({ variables: { file } }).then(() => {
      apolloClient.resetStore();
    });
  };

  return (
    <form onSubmit={onSubmit}>
      <Fieldset
        legend={
          <>
            File name (without <Code>.txt</Code>)
          </>
        }
      >
        <Textbox
          placeholder="Name"
          required
          value={name}
          onChange={onNameChange}
        />
      </Fieldset>
      <Fieldset legend="File content">
        <Textbox
          type="textarea"
          placeholder="Content"
          required
          value={content}
          onChange={onContentChange}
        />
      </Fieldset>
      <ButtonSubmit loading={loading}>Upload</ButtonSubmit>
    </form>
  );
}