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"
import axios from 'axios'

const ClassNotes = () => {
    const [file, setFile] = useState([])
    const [isProcess, setIsProcess] = useState(false)
    const [isFilePicked, setIsFilePicked] = useState(false)
    const [pdfData, setPdfData] = useState("")
    const [pdfDownloadStatus,setPdfDownloadStatus] = useState(false)

    const fileSelectedHandler = (file) => {
        // console.log('diff data', diffWordsData);
        setFile(file);
        setIsFilePicked(true)
        setPdfDownloadStatus(false)
        // dispatch({ type: SET_FILE_PICKED, file });
    };

    const fileUploadHandler = async () => {
        setIsProcess(true);
        const fd = new FormData();
        fd.append('video', file[0], file[0].name);
        try {
            const videoUploadResponse = await axios.post('http://127.0.0.1:1100/short_note', fd, {
                onUploadProgress: (ProgressEvent) => {
                    console.log('Upload Progress: ', Math.round((ProgressEvent.loaded / ProgressEvent.total) * 100), '%');
                },
                responseType: 'blob'
            });

            //Create a Blob from the PDF Stream
            const responseFile = new Blob(
                [videoUploadResponse.data],
                { type: 'application/pdf' })


            //Build a URL from the file
            const fileURL = URL.createObjectURL(responseFile);
            setPdfDownloadStatus(true)
            window.open(fileURL);
            setIsProcess(false);
            setPdfData(videoUploadResponse.data)


            // axios(`${apiURL}/pdf`, {
            //     method: 'GET',
            //     responseType: 'blob' //Force to receive data in a Blob Format
            // })
            // .then(response => {
            // //Create a Blob from the PDF Stream
            //     const file = new Blob(
            //       [response.data], 
            //       {type: 'application/pdf'});
            // //Build a URL from the file
            //     const fileURL = URL.createObjectURL(file);
            // //Open the URL on new Window
            //     window.open(fileURL);
            // })
            // .catch(error => {
            //     console.log(error);
            // });



            console.log(pdfData.length > 0)



        } catch (error) {
            // setIsProcess(false);
        }
    };

    return (
        <div className="background-material">
            <Grid container direction="column" alignItems="center" spacing={2} style={{ marginTop: "1rem" }}>
                <Grid item xs={2}>

                    <DropZone fileSelectedHandler={fileSelectedHandler} isFilePicked={isFilePicked} file={file} />
                </Grid>
                <Grid item >
                    {!pdfDownloadStatus ? <LoadingButton
                        // sx={{textTransform:'none'}}
                        size="large"
                        // color="primary"
                        onClick={() => fileUploadHandler()}
                        // onClick={handleClick}
                        // loading={true}
                        // loadingPosition="start"
                        color="primary"
                        variant="contained"
                    >
                        Process Video
                    </LoadingButton> :
                        <LoadingButton
                            // sx={{textTransform:'none'}}
                            size="large"
                            // color="primary"
                            onClick={() => fileUploadHandler()}
                            // onClick={handleClick}
                            // loading={true}
                            // loadingPosition="start"
                            color="secondary"
                            variant="contained"
                        >
                            Download PDF
                        </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;