import React, { PureComponent } from 'react';
import axios from 'axios';

import PDF from '../../Images/pdficon.png';
import PW from '../../Images/pptxicon.png';


interface UploadState {
    recentImage: any;
    caption: string;
    uploadedImageUrl: string;
    uploadedImage: any;
    imagename: string;
    filetype :string,
    lessonname:string,
    lessonno: any,
    filename :string
};

class UploadPage extends PureComponent<{}, UploadState> {
    constructor(props: {}) {
        super(props);

        this.state = {
            recentImage: {},
            caption: '',
            uploadedImageUrl: '',
            uploadedImage: {},
            imagename : '',
            filetype: '',
            lessonname:'',
            lessonno:'',
            filename:''
        };
    }

    componentDidMount = () => {
        this.fetchRecent();
    }
    componentDidUpdate=()=> {
        this.fetchRecent();
    }

    fetchRecent = () => {
        axios.get('http://localhost:5000/recent')
            .then((response) => {
                this.setState({
                    filename: response.data.filename,
                    lessonname :response.data.lessonname,
                    lessonno :response.data.lessonno
                });
            })
            .catch(err => alert('Error: ' + err));


        //let str = this.state.filename;

        //
        // if (str.includes(".pdf")) {
        //     this.setState({
        //         imagename: PDF,
        //         filetype : ".pdf"
        //     });
        // }else if (str.includes(".pptx")) {
        //     this.setState({
        //         imagename: PW,
        //         filetype :".pptx"
        //     });
        // }
    }

    uploadImage = () => {
        if (!this.state.caption.trim() || !this.state.uploadedImage.name) {
            return alert('Caption or file is missing');
        }

        let formData = new FormData();
        formData.append('caption', this.state.caption);
        formData.append('file', this.state.uploadedImage);
        formData.append('lessonno', this.state.lessonno);
        formData.append('lessonname', this.state.lessonname);

        axios.post('http://localhost:5000/', formData)
            .then((response) => {
                response.data.success ? alert('File successfully uploaded') : alert('File already exists');
                this.fetchRecent();
            })
            .catch(err => alert('Error: ' + err));
    }

    render() {
        return (
            <div className="UploadPage">
                <div className="Recent">
                    <div className="container text-left">
                        <div className="col-10" >
                            <hr />

                    <div className="row">
                        <div className="col-sm-6">
                            <label>Lesson name: </label>
                            <div style={{padding: '0px'}}>
                                <input type="text" required className="form-control"
                                       onChange={event => this.setState({ lessonname: event.target.value })}
                                       value={this.state.lessonname}/>
                            </div>
                        </div>

                        <div className="col-sm-6">
                            <label>Lesson no: </label>
                            <div style={{padding: '0px'}}>
                                <input type="text" required className="form-control"
                                       onChange={event => this.setState({ lessonno: event.target.value })}
                                       value={this.state.lessonno}/>
                            </div>
                        </div>
                    </div>

                    <div className="row">
                        <div className="col-sm-6">
                            <label>Lesson caption: </label>
                            <div style={{padding: '0px'}}>
                                <input
                                    type="text"
                                    className="form-control"
                                    placeholder="Enter caption..."
                                    onChange={event => this.setState({ caption: event.target.value })}
                                    value={this.state.caption}
                                />
                            </div>
                        </div>

                        <div className="col-sm-6">
                            <label>Upload file: </label>
                            <div style={{padding: '0px'}}>
                                <input
                                    type="file"
                                    className="Upload__Input"
                                    onChange={(event: any) => {
                                        this.setState({
                                            uploadedImageUrl: URL.createObjectURL(event.target.files[0]),
                                            uploadedImage: event.target.files[0],
                                        })
                                    }}
                                />
                            </div>


                        </div>
                    </div>



                    <div className="row">

                        <div className="col-sm-12">
                            <button  type ="submit" value ="Submit"
                                    className = "btn btn-block btn-success mt-3" onClick={this.uploadImage}>  ADD
                            </button>
                        </div>
                    </div>

                            <br/><br/>
                            <div className="border">
                                <div style={{margin: "15px"}}>
                                    <h5 className="text-center"> Recent Upload File </h5>
                                    <p className="text-center"> File type :  (.pdf) <img  src={PDF} alt="upload-image" style={{width:'30px'}}/> </p>
                                    <p className="text-center"> Lesson No: 1  {this.state.lessonno} </p>
                                    <p className="text-center"> Lesson Name:  Accounting{this.state.lessonname} </p>


                                </div>

                            </div>

                </div>

<br/><br/>


                    </div></div>
            </div>

        );
    }
}

export default UploadPage;

