import React, { useState } from 'react';
import './style/classNotes.css';
import DropZone from './DropZone';
import LoadingButton from '@mui/lab/LoadingButton'
import Grid from "@mui/material/Grid"

const ClassNotes = () => {
    const [file, setFile] = useState([])

    const fileSelectedHandler = (file) => {
        // console.log('diff data', diffWordsData);
        setFile(file);
        // dispatch({ type: SET_FILE_PICKED, file });
    };
    return (
        <div className="background-material">
            <Grid container direction="column" alignItems="center" spacing={2} style={{marginTop:"1rem"}}>
                <Grid item xs={2}>

                    <DropZone fileSelectedHandler={fileSelectedHandler} />
                </Grid>
                <Grid item >
                    <LoadingButton

                        size="large"
                        color="primary"
                        // onClick={() => fileUploadHandler()}
                        // onClick={handleClick}
                        // loading={isProcess}
                        loadingPosition="start"
                        variant="contained"
                        fullWidth
                    >
                        Process Video
                    </LoadingButton>

                </Grid>
            </Grid>
            {/* <div className="container mt-4 shadow p-3 mb-5 bg-body rounded">
                    <div>
                        <p3>UPLOAD THE VIDEO</p3>
                        <div className="container mt-4 p-3 mb-5 bg-body rounded color input">
                            <form
                                className="row g-3">
                                <div className="form-group files">
                                    <input
                                        type="file"
                                        className="form-control"
                                        id="lessonURL"
                                        name="lessonURL"

                                        multiple=""
                                        required
                                    />
                                </div>

                                <div className="row g-3">
                                    <button className="button2-submit button-submit">UPLOAD</button>
                                </div>
                            </form>
                        </div>
                    </div>
                </div> */}
        </div>
    );
}

export default ClassNotes;