import { getControlValueByName } from 'domains/forms/selectors'
import { CurrentUpload } from 'domains/store/store.types'
import { useSelector } from 'react-redux'
import { useFileUploads } from './seamly-hooks'

const useSingleFileUpload = (formId, name) => {
  const fileList = useSelector((store) =>
    getControlValueByName(store, { formId, name }),
  )
  // This hook acts as a helper as the data model is built to handle multiple
  // file uploads but currently Seamly only supports single file uploads.
  // This hook HAS to be used inside the FormBoundary of the file upload.
  const { currentUploads } = useFileUploads()

  const hasFile = fileList && fileList.length > 0

  let uploadHandle: CurrentUpload['uploadHandle'] = null
  let hasServerError = false
  let progress = 0
  if (currentUploads && currentUploads.length > 0) {
    const currentUpload = currentUploads[0]
    uploadHandle = currentUpload.uploadHandle
    hasServerError = !!currentUpload.error
    progress = currentUpload.progress
  }

  return {
    hasFile,
    selectedFileName: hasFile ? fileList[0].name : '',
    uploadHandle,
    hasServerError,
    progress,
  }
}

export default useSingleFileUpload