import { Upload, Button } from 'antd'
import { UploadOutlined } from '@ant-design/icons'
import { useState } from 'react'
import { upload } from  './factory'

export default function UploadForm({url, accept, onUploadStart, onUploadComplete, onUploadError}) {  
  const [fileList, setfileList] = useState([])

  const handleFileSend = async (values) => {
    if(onUploadStart)
      onUploadStart()
    try {
      const formData = new FormData()
      fileList.forEach((val) => {
        formData.append("files", val.originFileObj);
      });
      await upload(url, formData)
    } catch(error) {
      if(onUploadError)
      onUploadError(error)
    } finally {
      setfileList([])
      if(onUploadComplete)
        onUploadComplete()
    }
  }

  const isSendButtonEnabled = fileList.length > 0
  return(
    <div style={{display: 'flex'}}>
      <Upload 
        name ="file"
        fileList={fileList}
        accept={accept}
        onChange={(props) => setfileList(props.fileList)}>
        <Button icon={<UploadOutlined/>}>Загрузить файл</Button>
      </Upload>
      <Button type="primary"
        disabled={!isSendButtonEnabled}
        style={{marginLeft: '10px', display:isSendButtonEnabled?'':'none'}}
        onClick={handleFileSend}>
        Отправить
      </Button>
    </div>
  )
}