'use client';

import React, { useState, createContext, useContext, useEffect } from 'react';
import Uppy from '@uppy/core';
import AwsS3 from '@uppy/aws-s3';
import RemoteSources from '@uppy/remote-sources';
import { useAuth } from './components/auth';
import { companionUrl } from '@/lib/constants';


// Uppy is a challenging react integration. Following are some references
//   @see https://github.com/transloadit/uppy/issues/4727#issuecomment-1761118428


export const UppyContext = createContext(new Uppy());

export default function UppyProvider({
  children
}: {
  children: React.ReactNode
}) {
  const { authData } = useAuth();
  const [uppy] = useState(() => new Uppy(
      { 
        autoProceed: false,
        debug: true
      }
    )
    .use(RemoteSources, {
      companionUrl,
      sources: [
        'GoogleDrive',
        'Dropbox',
        'Url'
      ]
    })
    .use(AwsS3, {
      companionUrl,
      shouldUseMultipart: true,
      abortMultipartUpload: () => {}, // @see https://github.com/transloadit/uppy/issues/1197#issuecomment-491756118
      companionHeaders: {
        'authorization': `Bearer ${authData?.accessToken}`
      }
    })
  );

  

  return (
    <UppyContext.Provider value={uppy}>
      {children}
    </UppyContext.Provider>
  )
}