import React, { useState } from 'react'

import { FilePicker } from '../components/FilePicker'
import { Padder } from '../components/Padder'
import { Button } from '../components/Button'
import { Dialog } from '../components/Dialog'

export const FileUploadExample = ({ fileMessage }) => {

    const [files, setFiles] = useState()
    const [dialogOpen, setDialogOpen] = useState(false)

    function submit() {
        console.log(files)

        const formData = new FormData();

        formData.append('avatar', files[0]);

        // Post form data.
    }

    return (
        <div>
            <Dialog
                content={
                    <div>
                        <FilePicker
                            setFiles={setFiles}
                            fileMessage={files ? files[0].name : null}
                            isFullWidth={true}
                        />
                    </div>
                }
                open={dialogOpen}
                close={() => { setDialogOpen(false); setFiles() }}
                title="Upload file"
                confirmMessage="upload"

            />

            <Button onClick={() => setDialogOpen(true)} appearance="primary">Upload file</Button>
        </div>
    );

}