farmcontrol-ui/src/components/Dashboard/common/FileUpload.jsx

import { Upload, Button, Flex, Typography, Space, Progress, Card } from 'antd'
import PropTypes from 'prop-types'
import { ApiServerContext } from '../context/ApiServerContext'
import UploadIcon from '../../Icons/UploadIcon'
import { useContext, useState, useEffect } from 'react'
import ObjectSelect from './ObjectSelect'
import FileList from './FileList'
import PlusIcon from '../../Icons/PlusIcon'
import { LoadingOutlined } from '@ant-design/icons'

const { Text } = Typography

const FileUpload = ({
  value,
  onChange,
  multiple = true,
  defaultPreviewOpen = false,
  showPreview = true,
  showInfo
}) => {
  const { uploadFile } = useContext(ApiServerContext)
  const [uploading, setUploading] = useState(false)
  const [uploadProgress, setUploadProgress] = useState(0)

  // Track current files using useState
  const [currentFiles, setCurrentFiles] = useState(() => {
    if (multiple) {
      return Array.isArray(value) ? value : []
    } else {
      return value || null
    }
  })

  // Update currentFiles when value prop changes
  useEffect(() => {
    if (multiple) {
      setCurrentFiles(Array.isArray(value) ? value : [])
    } else {
      setCurrentFiles(value || null)
    }
  }, [value, multiple])

  // Track if there are no items in the list
  const [hasNoItems, setHasNoItems] = useState(false)

  // Track the selected file from ObjectSelect
  const [selectedFile, setSelectedFile] = useState(null)

  // Update hasNoItems when currentFiles changes
  useEffect(() => {
    const noItems = multiple
      ? !currentFiles ||
        !Array.isArray(currentFiles) ||
        currentFiles.length === 0
      : !currentFiles
    setHasNoItems(noItems)
  }, [currentFiles, multiple])

  const handleFileUpload = async (file) => {
    try {
      setUploading(true)
      const uploadedFile = await uploadFile(file, {}, (progress) => {
        setUploadProgress(progress)
      })
      setUploading(false)
      if (uploadedFile) {
        if (multiple) {
          // For multiple files, add to existing array
          const newFiles = [...currentFiles, uploadedFile]
          setCurrentFiles(newFiles)
          onChange(newFiles)
        } else {
          // For single file, replace the value
          setCurrentFiles(uploadedFile)
          onChange(uploadedFile)
        }
      }
    } catch (error) {
      console.error('File upload failed:', error)
    }
    return false // Prevent default upload behavior
  }

  // Handle adding selected file to the list
  const handleAddSelectedFile = () => {
    if (selectedFile) {
      if (multiple) {
        // For multiple files, add to existing array
        const newFiles = [...currentFiles, selectedFile]
        setCurrentFiles(newFiles)
        onChange(newFiles)
      } else {
        // For single file, replace the value
        setCurrentFiles(selectedFile)
        onChange(selectedFile)
      }
      // Clear the selection
      setSelectedFile(null)
    }
  }

  return (
    <Flex gap={'small'} vertical>
      {hasNoItems && uploading == false ? (
        <Flex gap={'small'} align='center'>
          <Space.Compact style={{ flexGrow: 1 }}>
            <ObjectSelect
              type={'file'}
              value={selectedFile}
              onChange={setSelectedFile}
            />
            <Button
              icon={<PlusIcon />}
              onClick={handleAddSelectedFile}
              disabled={!selectedFile}
            />
          </Space.Compact>
          <Text style={{ whiteSpace: 'nowrap' }} type='secondary'>
            or
          </Text>
          <Upload
            beforeUpload={handleFileUpload}
            showUploadList={false}
            multiple={multiple}
          >
            <Button style={{ width: '100%' }} icon={<UploadIcon />}>
              Upload
            </Button>
          </Upload>
        </Flex>
      ) : null}
      {uploading == true ? (
        <Card styles={{ body: { padding: '10px 15px' } }}>
          <Flex gap={'small'} align='center'>
            <Text>Uploading...</Text>
            {uploadProgress > 0 ? (
              <>
                {uploadProgress >= 0 && uploadProgress < 100 ? (
                  <>
                    <Progress
                      percent={uploadProgress}
                      showInfo={false}
                      style={{ width: '100px', flexGrow: 1 }}
                      status='active'
                    />
                    <Text>{uploadProgress}%</Text>
                  </>
                ) : null}
                {uploadProgress == 100 ? <LoadingOutlined /> : null}
              </>
            ) : null}
          </Flex>
        </Card>
      ) : null}
      <FileList
        files={currentFiles}
        multiple={multiple}
        editing={true}
        showInfo={showInfo || false}
        showPreview={showPreview}
        defaultPreviewOpen={defaultPreviewOpen}
        onChange={(updatedFiles) => {
          setCurrentFiles(updatedFiles)
        }}
      />
    </Flex>
  )
}

FileUpload.propTypes = {
  value: PropTypes.oneOfType([PropTypes.object, PropTypes.array]),
  onChange: PropTypes.func,
  multiple: PropTypes.bool,
  showPreview: PropTypes.bool,
  showInfo: PropTypes.bool,
  defaultPreviewOpen: PropTypes.bool
}

export default FileUpload