import React, {Component} from "react";
import VerifiedIcon from "../../Images/verified.png";
import NotVerifiedIcon from "../../Images/nveified.png";
import MainIcon from "../../Images/grades.png"
import axios from "axios";
import * as configs from "../../Config/config";
export default class ALResults extends Component{

    constructor(props) {
        super(props);

        this.state = {
            studentID:'',
            streams: ['Commerce stream', 'Physical Science Stream ', 'Biological Science Stream', 'Technology Stream', 'Art Stream'],
            subjects: ['Economics', 'Geography', 'Business statistics', 'Business Studies',
                'Accounting', 'Logic & Scientific Method', 'History of India', 'History of Europe', 'History of Modern World',
                'English', 'French', 'German', 'Agricultural Science', 'Mathematics', 'Political Science', 'Combined Mathematics', 'Information & Communication Technology'],
            resultsVerified : false,
            year:'',
            stream: '',
            sub01:'',
            sub02:'',
            sub03:'',
            sub01Result:'',
            sub02Result:'',
            sub03Result:'',
            gEng:'',
            CGTest:'',
            selectedFile: null,

        };

        this.onFileChange = this.onFileChange.bind(this);
        this.onFileUpload = this.onFileUpload.bind(this);
        this.onChangeYear = this.onChangeYear.bind(this);
        this.onChangeStream = this.onChangeStream.bind(this);
        this.onChangeSubject01 = this.onChangeSubject01.bind(this);
        this.onChangeSubject02 = this.onChangeSubject02.bind(this);
        this.onChangeSubject03 = this.onChangeSubject03.bind(this);
        this.onChangeSubject01Result = this.onChangeSubject01Result.bind(this);
        this.onChangeSubject02Result = this.onChangeSubject02Result.bind(this);
        this.onChangeSubject03Result = this.onChangeSubject03Result.bind(this);
        this.onChangeGenEng = this.onChangeGenEng.bind(this);
        this.onChangeComGenTest = this.onChangeComGenTest.bind(this);
        this.onSubmitResults = this.onSubmitResults.bind(this);
        this.onChangeSID = this.onChangeSID.bind(this);
    }


    onChangeYear(e){
        this.setState({
            year: e.target.value
        });
    }
    onChangeStream(e) {
        this.setState({
            stream: e
        });
    }
    onChangeSubject01(value) {

        this.setState({
            sub01: value
        })
    }
    onChangeSubject02(value) {

        this.setState({
            sub02: value
        })
    }
    onChangeSubject03(value) {

        this.setState({
            sub03: value
        })
    }
    onChangeSubject01Result(e) {

        this.setState({
            sub01Result: e.target.value
        })
    }
    onChangeSubject02Result(e) {

        this.setState({
            sub02Result: e.target.value
        })
    }
    onChangeSubject03Result(e) {

        this.setState({
            sub03Result: e.target.value
        })
    }
    onChangeGenEng(e){
        this.setState({
            gEng: e.target.value
        });
    }

    onChangeComGenTest(e){
        this.setState({
            CGTest: e.target.value
        });
    }

    onChangeSID(e){
        this.setState({
            studentID: e.target.value
        });
    }
    onSubmitResults(e){

        //let student_id = '60fc1aaf718c264214061846';
        let Subject = {
            [this.state.sub01] : this.state.sub01Result,
            [this.state.sub02] : this.state.sub02Result,
            [this.state.sub03] : this.state.sub03Result,
        }

        const newResult = {
            student_id:this.state.studentID,
            year:this.state.year,
            stream:this.state.stream,
            Subjects:Subject,
            subject01:this.state.sub01,
            subject02:this.state.sub02,
            subject03:this.state.sub03,
            subject01Result:this.state.sub01Result,
            subject02Result:this.state.sub02Result,
            subject03Result:this.state.sub03Result,
            generalEnglish:this.state.gEng,
            commonGeneralTest:this.state.CGTest,
            image:'',
        }

        console.log(newResult);
        axios.post(configs.BASE_URL + '/studentResults/add', newResult)
            .then(res =>{

            })
    }


    onFileChange = event => {

        // Update the state
        this.setState({ selectedFile: event.target.files[0] });

    };

    onFileUpload = () => {

        // Create an object of formData
        const formData = new FormData();

        // Update the formData object
        formData.append(
            "myFile",
            this.state.selectedFile,
            this.state.selectedFile.name
        );

        // Details of the uploaded file
        console.log(this.state.selectedFile);

        // Request made to the backend api
        // Send formData object
        //axios.post("api/uploadfile", formData);
    };

    fileData = () => {

        if (this.state.selectedFile) {

            return (
                <div>
                    <h6>File Details:</h6>
                    <p>File Name: {this.state.selectedFile.name}</p>
                    <p>File Type: {this.state.selectedFile.type}</p>
                    <p>
                        Last Modified:{" "}
                        {this.state.selectedFile.lastModifiedDate.toDateString()}
                    </p>

                </div>
            );
        } else {
            return (
                <div>
                    <br />
                    <h6>Choose before Pressing the Upload button</h6>
                </div>
            );
        }
    };
    render() {
        return(
            <div>
                <div className="app-page-title">
                    <div className="page-title-wrapper">
                        <div className="page-title-heading">
                            <div className="page-title-icon">
                                <img src={MainIcon} style={{width:'40px', height:'40px'}}/>
                            </div>
                            <div>
                                <h3>Student A/Level Results</h3>
                            </div>
                        </div>
                    </div>
                </div>

                <div className="main-card mb-3 card" style={{padding:'30px'}}>
                    <div className="row" style={{padding:'10px'}}>

                        <div className="col">
                            <span style={{float:'right'}}>{this.state.resultsVerified == true ?
                                <h5 style={{color:'Blue'}}>Verified</h5> :
                                <h5 style={{color:'Red'}}>Not Verified</h5>}</span>

                        </div>
                        <div className="col-1" >
                            {this.state.resultsVerified == true ?
                            <img src={VerifiedIcon} style={{width:'20px', height:'20px'}}/> :
                                <img src={NotVerifiedIcon} style={{width:'20px', height:'20px'}}/> }
                        </div>

                    </div>
                    <div className="row">

                    </div>
                    <div className="row" style={{padding:'5px'}}>
                        <div className="col-2">
                            <span style={{float:'right'}}>StudentID (Temporary)</span>
                        </div>
                        <div className="col">
                            <input type="text" id="password" className="form-control" placeholder="s_id" onChange={this.onChangeSID} required/>

                        </div>
                        <div className="col">

                        </div>
                        <div className="col">

                        </div>
                    </div>
                    <div className="row" style={{padding:'5px'}}>
                        <div className="col-2">
                            <span style={{float:'right'}}>Year</span>
                        </div>
                        <div className="col">
                            <input type="text" id="password" className="form-control" placeholder="A/L Batch(Year)" onChange={this.onChangeYear} required/>

                        </div>
                        <div className="col">

                        </div>
                        <div className="col">

                        </div>
                    </div>
                    <div className="row" style={{padding:'5px'}}>
                        <div className="col-2">
                            <span style={{float:'right'}}>Stream</span>
                        </div>
                        <div className="col">
                            <select className="form-control" style={{width: '100%'}}
                                    onChange={e => this.onChangeStream(e.target.value)}>
                                <option value="" disabled selected>Select Stream</option>
                                {this.state.streams.map((dis) => <option key={dis}
                                                                         value={dis}>{dis}</option>)}
                            </select>
                        </div>
                        <div className="col">

                        </div>
                        <div className="col">

                        </div>
                    </div>
                    <div className="row" style={{padding:'5px'}}>
                        <div className="col-2">
                            <span style={{float:'right'}}>Subject 01</span>
                        </div>
                        <div className="col">
                            <select className="form-control" style={{width: '100%'}}
                                    onChange={e => this.onChangeSubject01(e.target.value)}>
                                <option value="" disabled selected>Select Subject</option>
                                {this.state.subjects.map((dis) => <option key={dis}
                                                                         value={dis}>{dis}</option>)}
                            </select>
                        </div>
                        <div className="col-1">
                            <span>Result</span>
                        </div>
                        <div className="col">
                            <input type="text" id="subj01" className="form-control" placeholder="result"
                                  style={{width:'30%'}} onChange={this.onChangeSubject01Result} required/>
                        </div>
                    </div>
                    <div className="row" style={{padding:'5px'}}>
                        <div className="col-2">
                            <span style={{float:'right'}}>Subject 02</span>
                        </div>
                        <div className="col">
                            <select className="form-control" style={{width: '100%'}}
                                    onChange={e => this.onChangeSubject02(e.target.value)}>
                                <option value="" disabled selected>Select Subject</option>
                                {this.state.subjects.map((dis) => <option key={dis}
                                                                          value={dis}>{dis}</option>)}
                            </select>
                        </div>
                        <div className="col-1">
                            <span>Result</span>
                        </div>
                        <div className="col">
                            <input type="text" id="subj02" className="form-control" placeholder="result"
                                   style={{width:'30%'}} onChange={this.onChangeSubject02Result} required/>
                        </div>
                    </div>
                    <div className="row" style={{padding:'5px'}}>
                        <div className="col-2">
                            <span style={{float:'right'}}>Subject 03</span>
                        </div>
                        <div className="col">
                            <select className="form-control" style={{width: '100%'}}
                                    onChange={e => this.onChangeSubject03(e.target.value)}>
                                <option value="" disabled selected>Select Subject</option>
                                {this.state.subjects.map((dis) => <option key={dis}
                                                                          value={dis}>{dis}</option>)}
                            </select>
                        </div>
                        <div className="col-1">
                            <span>Result</span>
                        </div>
                        <div className="col">
                            <input type="text" id="subj03" className="form-control" placeholder="result"
                                   style={{width:'30%'}} onChange={this.onChangeSubject03Result} required/>
                        </div>
                    </div>
                    <div className="row" style={{padding:'5px'}}>
                        <div className="col-2">
                            <span style={{float:'right'}}>General English</span>
                        </div>
                        <div className="col">
                            <input type="text" id="subj01" className="form-control" placeholder="result"
                                   style={{width:'30%'}} onChange={this.onChangeGenEng} required/>
                        </div>
                        <div className="col-1">

                        </div>
                        <div className="col">

                        </div>
                    </div>
                    <div className="row" style={{padding:'5px'}}>
                        <div className="col-2">
                            <span style={{float:'right'}}>Common General Test</span>
                        </div>
                        <div className="col">
                            <input type="text" id="subj01" className="form-control" placeholder="result"
                                   style={{width:'30%'}} onChange={this.onChangeComGenTest} required/>
                        </div>
                        <div className="col-1">

                        </div>
                        <div className="col">

                        </div>
                    </div>
                    <div className="row" style={{padding:'5px'}}>
                        <div className="col-2">
                            <span style={{float:'right'}}>Upload the image of result sheet</span>
                        </div>
                        <div className="col-4">
                            <input type="file"  className="form-control"
                                   style={{width:'100%'}} onChange={this.onFileChange}/>
                        </div>
                        <div className="col">
                            {/*<button className="btn btn-primary" style={{width:'50%',marginTop: '0px',  backgroundColor: '#8C8C8C', borderColor: '#216E9B', float:'left'}}*/}
                            {/*        onClick={this.onFileUpload}>Upload</button>*/}
                        </div>
                        <div className="col">

                        </div>
                    </div>
                    <div className="row">
                        <div className="col-2">

                        </div>
                        <div className="col">
                            {this.fileData()}
                        </div>
                        <div className="col">

                        </div>

                    </div>

                    <div className="row" style={{margin : '20px'}}>
                        <div className="col">
                            <button className="btn btn-primary" style={{width:'30%',marginTop: '0px',  backgroundColor: '#265077', borderColor: '#216E9B'}}
                                    onClick={this.onSubmitResults}>Submit Results</button>
                        </div>
                    </div>
                </div>
            </div>
        )
    }
}