import React from 'react'
import Logo from '../images/logo-adib.png'
import axios from 'axios';
import '../style/bootstrap.min.css'
import '../style/tree_maker.css'
import { Redirect } from 'react-router';
import Navbar from '../Components/Sidebar';
import { ProgressBar, Button, Form } from 'react-bootstrap';

class Dashboard extends React.Component {
  constructor() {
    super();
    this.state = {
      error: "",
      fileupload: '',
      isLoading: false,
      uploadPercentage: 0,
      selectedFile: '',
      token: localStorage.getItem("token"),
      data: [],
      message: "",
      value: ''
      
    }
    this.handleInputChange = this.handleInputChange.bind(this);
  }

  handleInputChange(event) {
    this.upload()
    this.setState({
      selectedFile: event.target.files[0],
      value: event.target.value,
      message: "",
     
    })
  }

  componentDidMount() {
    this.fetchtask()
  }

  upload() {
    if (!this.state.selectedFile) {
      this.setState({
        message: "Please Select File",   
      })
    }
    else {
      this.submit() 
      this.setState({
        message:this.state.message
      })
      
    }
  }

  submit() {
    const data = new FormData()
    data.append('file', this.state.selectedFile)

    console.warn(this.state.selectedFile);

    let url = "http://chartapi.imenso.co/api/upload";
    const options = {
      onUploadProgress: (progressEvent) => {
        const { loaded, total } = progressEvent;
        let percent = Math.floor((loaded * 100) / total)
        console.log(`${loaded}kb of ${total}kb | ${percent}%`);

        if (percent < 100) {
          this.setState({
            uploadPercentage: percent,
          
          })
          this.fetchtask()
        }
      }
    }

    axios.post(url, data, options, { // receive two parameter endpoint url ,form data 
    })
      .then(res => {
        console.log(res);
        this.setState({
          selectedFile: res.data.url,
          uploadPercentage: 100,
          message: res.data.message
        },
          () => {
            setTimeout(() => {
              this.setState({
                uploadPercentage: 0,
                selectedFile:'',             
              })
              this.fetchtask()
              this.handleClear()
            }, 1000);
          })
      })
  }

  async fetchtask() {
    const url = "http://chartapi.imenso.co/api/getData";
    const response = await fetch(url);
    const data = await response.json();

    this.setState({
      data: data,
      
    })
  }

  handleClear() {
    this.setState({
      selectedFile: '',
      fileInputKey: Date.now(),
      message:this.state.message
    });
  }

  render() {
    if (!this.state.token) {
      return <Redirect to="/" />
    }
    const { uploadPercentage } = this.state;

    return (
      <React.Fragment>
        <section className="main bg-light">
          <div >
            <div className="">
              <div className="container-fluid">
                <div className="d-flex justify-content-between align-items-center">
                  <div className="d-flex align-items-center">
                    <Navbar />
                    <div className="brand-logo mr-3">
                      <img src={Logo} alt="logo" />
                    </div>
                    <h1 className="mb-0 border-left pl-3">Organisation Chart </h1>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </section>

        <div className="container mt-4">
          <div className="col-12 w-4 alert alert-secondary justify-content-between">
            <div className="custom-file justify-content-center" style={{ width: "400px" }}>
              <div className="d-flex justify-content-center">
              <input type="file" className="form-control profile-pic-uploader" style={{ minWidth: "230px" }} key={this.state.fileInputKey} onChange={this.handleInputChange} />
                <Button size="sm" style={{height:"38px",marginLeft:'50px'}} variant="info" onClick={() => this.upload()} > Upload! </Button >
              </div>
              <div style={{ color: "red" }}>{this.state.message}</div>
              <div style={{marginTop:"10px"}}>
              { uploadPercentage > 0 && <ProgressBar now={uploadPercentage} active label={`${uploadPercentage}%`} /> }
              </div>
            </div>
            
          </div>
          <div className="col-12 mt-5" onChange={() => this.handleTable()}>
            <table className="table table-striped">
              <thead className>
                <tr>
                  <th>Id</th>
                  <th>Date</th>
                  <th>FileName</th>
                </tr>
              </thead>
              <tbody>
                {this.state.data.map((user, index) => (

                  <tr key={index}>
                    <td>{index + 1}</td>                 
                    <td>{user.file_name}</td>
                    <td>{user.date_and_time}</td>
                  </tr>
                ))}
              </tbody>
            </table>
          </div>
        </div>
      </React.Fragment>
    );
  }
}

export default Dashboard