import React from 'react';
import { useDropzone } from 'react-dropzone';
import Typography from '@mui/material/Typography';
import Box from '@mui/material/Box';
import Grid from '@mui/material/Grid';
import AttachFileIcon from '@mui/icons-material/AttachFile';
import { useDispatch, useSelector } from 'react-redux';


import VideoFileOutlinedIcon from '@mui/icons-material/VideoFileOutlined';

function DropZone(props) {
    const { fileSelectedHandler,isFilePicked,file } = props;
    const diffWordsData = useSelector((state) => state.diffwords);
    const { acceptedFiles, getRootProps, getInputProps } = useDropzone({
        accept: {
            'video/*': ['mp4']
        },
        maxFiles: 1,
        onDrop: (files) => fileSelectedHandler(files)
    });

    const formatBytes = (bytes, decimals = 2) => {
        if (bytes === 0) return '0 Bytes';

        const k = 1024;
        const dm = decimals < 0 ? 0 : decimals;
        const sizes = ['Bytes', 'KB', 'MB', 'GB', 'TB', 'PB'];
        const i = Math.floor(Math.log(bytes) / Math.log(k));

        return parseFloat((bytes / k ** i).toFixed(dm)) + sizes[i];
    };

    // const files = acceptedFiles.map((file) => {
    //     fileSelectedHandler(file);
    //     // dispatch({ type: SET_FILE_PICKED, file });
    //     // console.log('Hello');
    //     return (
    //         <li key={file.path}>
    //             {file.path} - {formatBytes(file.size)}
    //         </li>
    //     );
    // });
    return (
        <section className="container" >
            <div
                {...getRootProps({ className: 'dropzone' })}
                style={{
                    border: '3px dashed rgba(128, 128, 128, .3)',
                    padding: !isFilePicked ? ' 100px 150px 100px 150px' :' 30px 150px 30px 150px' ,
                    backgroundColor: 'white'
                }}
            >
                <input {...getInputProps()} />
                {!isFilePicked && (
                <>
                    <center>
                        <AttachFileIcon sx={{ fontSize: '60px' }} style={{ color: 'grey', opacity: 0.3 }} />
                    </center>

                    <Typography textAlign="center" variant="h4" style={{ color: 'grey', opacity: 0.3 }}>
                        Drag and drop  or click to select Videos
                    </Typography>
                </>
                 )} 

                <aside>
                    {isFilePicked && (
                        <div
                            style={{
                                border: '3px dashed rgba(128, 128, 128, .3)',
                                padding: ' 10px 150px 10px 150px',
                                backgroundColor: 'white'
                            }}
                        >
                            <Grid container direction="column" justifyContent="center" alignItems="center">
                                <Grid item>
                                    <VideoFileOutlinedIcon color="primary" sx={{ fontSize: '150px' }} />
                                </Grid>
                                <Grid item>
                                    <Typography variant="h4" sx={{ color: 'grey', opacity: 0.5 }}>
                                        {file[0].name}- {formatBytes(file[0].size)}
                                    </Typography>
                                </Grid>
                            </Grid>
                        </div>
                    )}
                </aside>
            </div>
        </section>
    );
}

export default DropZone;
