import { useState } from 'react'
import FileUpload from 'react-material-file-upload'
import {Box, Button, IconButton, Paper} from '@mui/material'
import { useNavigate } from '@tanstack/react-router'
import SettingsIcon from '@mui/icons-material/Settings';

export default function UploadPage() {
    const [files, setFiles] = useState<File[]>([])
    const fileTypes = ["pdf"];
    const navigate = useNavigate()

    return (
        <Box
            display="flex"
            flexDirection="column"
            alignItems="center"
            justifyContent="center"
            height="100vh"
            bgcolor="white"
        >
            <Box
                width="100%"
                maxWidth="1300px"
                display="flex"
                justifyContent="flex-end"
                px={2}
            >
                <IconButton onClick={() => navigate({ to: '/config' })}>
                    <SettingsIcon fontSize="large"/>
                </IconButton>
            </Box>
            <Paper
                elevation={3}
                sx={{
                    width: 900,
                    height: 500,
                    backgroundColor: '#eeeeee',
                    borderRadius: 4,
                    display: 'flex',
                    justifyContent: 'center',
                    alignItems: 'center',
                }}
            >
                <Box sx={{
                    height: '100%',
                    width: '100%',
                    maxWidth: '100%',
                    margin: '0px',
                    padding: '0px',
                    '& .MuiBox-root': {
                        display: 'flex',
                        flexDirection: 'column',
                        alignItems: 'center',
                        justifyContent: 'center',
                        border: 'none',
                        textAlign: 'center',
                    },
                }}>
                <FileUpload
                    value={files}
                    onChange={setFiles}
                    accept={`.${fileTypes.join(', .')}`}
                    title="Hier Dokument hinziehen"
                    buttonText="Datei auswählen"
                    sx={{
                        height: '100%',
                        width: '100%',
                        padding: '0px',
                        '& svg': {
                            color: '#9e9e9e',
                        },
                        '& .MuiOutlinedInput-notchedOutline': {
                            border: 'none',
                        },
                        '& .MuiButton-root': {
                            backgroundColor: '#9e9e9e',
                        },
                        '& .MuiTypography-root': {
                            fontSize: '1.25rem',
                            fontWeight: 500,
                            marginBottom: 1,
                        },
                    }}
                />
                </Box>
            </Paper>
            <Button
                variant="contained"
                sx={{
                    mt: 4,
                    backgroundColor: '#383838',
                }}
                disabled={files.length === 0}
                onClick={() => navigate({ to: '/extractedResult' })}
            >
                Kennzahlen extrahieren
            </Button>
        </Box>
    )
}