import { useEffect, useState } from "react";
import { type HttpResponse, Upload } from "tus-js-client";
import { AUTH_USER_ID, CLAIM_NAME, ENDPOINT } from "../config";
import { useAttachmentStore } from "./use-attachment-store";
import { getCookie } from "./cookie";

export const useTus = () => {
  const { attachmentFileCode, setAttachmentFileCode } = useAttachmentStore(
    (state) => state,
  );

  const [file, setFile] = useState<File | null>(null);
  const [upload, setUpload] = useState<Upload | null>(null);
  const [response, setResponse] = useState<HttpResponse | null>(null);
  const [progress, setProgress] = useState<number>(0);

  const metadata = {
    filename: file?.name ?? "",
    filetype: file?.type ?? "",
    atflCd: attachmentFileCode,
  };

  const createUpload = () => {
    return new Upload(file!, {
      endpoint: `${ENDPOINT.ATTACH_SERVICE.TUS_UPLOAD}`,
      chunkSize: 10 * 1024 * 1024,
      headers: {
        [CLAIM_NAME]: getCookie(CLAIM_NAME) ?? "",
        [AUTH_USER_ID]: getCookie(AUTH_USER_ID) ?? "",
      },
      metadata,
      onError(error) {
        throw new Error(`Failed because: ${error}`);
      },
      onProgress(bytesUploaded, bytesTotal) {
        const percentage = ((bytesUploaded / bytesTotal) * 100).toFixed(2);
        setProgress(Number(percentage));
      },
      onAfterResponse(req, res) {
        const fileInfo = res.getHeader("X-File-Info");
        if (fileInfo === undefined || fileInfo === null) return;

        setAttachmentFileCode(JSON.parse(fileInfo)?.atflCd ?? "");
        setResponse(res);
      },
    });
  };

  useEffect(() => {
    if (!file) return;

    const upload = createUpload();
    upload.start();
    setUpload(upload);
  }, [file]);

  return {
    file,
    upload,
    response,
    progress,
    setFile,
  };
};