import React, { useRef, useState, useEffect } from 'react';
import { makeStyles, Typography, Card, CardContent, Divider } from '@material-ui/core';
import { FileType } from './FileType';
import { FluentButton } from '../UI/inputs/buttons/FluentButton';
import { formatBytes } from '../utilities/uploader/formatBytes';
const useStyles = makeStyles((theme) => ({
    avatarImage: {
        width: 200,
        height: 200,
        borderRadius: 100,
        border: '3px solid',
        borderColor: theme.palette.primary.main,
        marginTop: -3,
        marginLeft: -3
    },
    image: {
        width: 300,
        height: '100%',
        border: '2px solid',
        borderColor: theme.palette.primary.main,
        marginTop: -3,
        marginLeft: -3
    },
    instruction: {
        display: 'flex',
        alignContent: 'center',
        justifyContent: 'center'
    },
    icon: {
        display: 'flex',
        justifyContent: 'center'
    },
    avatarIcon: {
        display: 'flex',
        justifyContent: 'center',
        marginTop: '35%'
    },
    previewCard: {
        maxWidth: 500
    },
    action: {
        marginTop: theme.spacing(1),
        marginBottom: theme.spacing(1),
        display: 'flex',
        flexDirection: 'row'
    },
    divider: {
        marginTop: theme.spacing(1)
    },
    initialInstruction: {
        marginLeft: theme.spacing(2),
        marginTop: theme.spacing(0.5)
    }
}));
const FileUpload = (props) => {
    const [file, setFile] = useState();
    const [previewUrl, setPreviewUrl] = useState();
    const [isValid, setIsValid] = useState(false);
    const [fileType, setFileType] = useState();
    const [fileName, setFileName] = useState();
    const [fileSize, setFileSize] = useState();
    const [fileDate, setFileDate] = useState();
    const { id, onInput, accept, errorText } = props;
    const classes = useStyles();
    const filePickerRef = useRef();
    useEffect(() => {
        if (!file) {
            return;
        }
        const fileReader = new FileReader();
        fileReader.onload = () => {
            setPreviewUrl(fileReader.result);
        };
        fileReader.readAsDataURL(file);
    }, [file]);
    const pickedHandler = (event) => {
        let pickedFile = event.target.files[0];
        let fileIsValid = isValid;
        // console.log('ETF', event.target.files[0].name);
        setFileName(event.target.files[0].name);
        setFileSize(event.target.files[0].size);
        // setFileDate(event.target.files[0].lastModifiedDate.toString());
        const str = event.target.files[0].name.split('.')[1];
        // console.log('STR', str);
        setFileType(str);
        if (event.target.files && event.target.files.length === 1) {
            const pickedFile = event.target.files[0];
            setFile(pickedFile);
            setIsValid(true);
        }
        else {
            setIsValid(false);
            fileIsValid = false;
        }
        onInput(id, pickedFile, fileIsValid);
    };
    const pickFileHandler = () => {
        filePickerRef.current.click();
        if (file && file !== previewUrl) {
            reset();
        }
    };
    const reset = () => {
        const fileReader = new FileReader();
        fileReader.onload = () => {
            setPreviewUrl(fileReader.result);
        };
        fileReader.readAsDataURL(file);
    };
    return (React.createElement(Card, { className: classes.previewCard, variant: "outlined" }, React.createElement(CardContent, null, React.createElement("div", { className: classes.formControl }, React.createElement("input", { id: id, ref: filePickerRef, style: { display: 'none' }, type: "file", accept: accept, onChange: pickedHandler }), React.createElement("div", { className: classes.imageUpload }, !previewUrl && (React.createElement("div", { className: classes.action }, React.createElement("div", { className: classes.action }, React.createElement(FluentButton, { type: "button", variant: "contained", color: "secondary", onClick: pickFileHandler }, "Select Fil"), React.createElement("div", { className: classes.initialInstruction }, React.createElement(Typography, { variant: "caption" }, "Click 'Select File' to upload a file from your compute"))))), previewUrl && (React.createElement(React.Fragment, null, React.createElement("div", { className: classes.imagePreview }, React.createElement(FileType, { fileType: fileType, image: previewUrl, fileName: fileName, size: formatBytes(fileSize), lastModifiedDate: fileDate })), React.createElement("div", { className: classes.divider }, React.createElement(Divider, null))))), !isValid && React.createElement(Typography, null, errorText, " ")))));
};
export default FileUpload;
//# sourceMappingURL=FileUpload.js.map