import React from "react";
import OrganizationChart from "@dabeng/react-orgchart";
import MyNode from "./my-node";
import html2canvas from "html2canvas";
import { jsPDF } from "jspdf";
import PdfIcon from '../images/pdf.svg'
import Logo from '../images/logo-adib.png'
import '../style/bootstrap.min.css'
import '../style/tree_maker.css'
import Navbar from "../Components/Sidebar";
import { Redirect } from 'react-router-dom'
import { Button } from 'react-bootstrap'
import { PDFExport, savePDF } from "@progress/kendo-react-pdf";


export default class Home extends React.Component {
  constructor() {
    super();
    this.handleLoading = this.handleLoading.bind(this);
    
    this.pdfExportComponent = React.createRef(null)
    const messagesEndRef = React.createRef(null)
    this.inputRef = React.createRef();
    this.state = {
      tasks: [],
      level: "N1",
      group: "",
      sub_division: "",
      token: localStorage.getItem("token"),
      isLoading: false,
      department: '',
      Dept: []
    }
  }

  componentDidMount() {

    this.fetchtask()
  }

  //Fetch data to show Dept of Tree 

  fetchtask() {
    fetch('http://chartapi.imenso.co/api/getTreeData', {
      method: 'POST',
      headers: {
        "Accept": 'application/json',
        'Content-Type': 'application/json',
      },
      body: JSON.stringify({
        level: this.state.level,
        department: this.state.department,
        sub_division: this.state.sub_division,
        group: this.state.group,
      })
    })
      .then((response) => response.json())
      .then((responseJson) => {
        console.log(responseJson)
        this.setState({
          tasks: responseJson.data,
          department:""
          // department:responseJson.data.department 
        })
        console.log(this.state.tasks)
      })
      .catch((error) => {
        // reject(error);
      });
  }

  fetchDepartment() {
    fetch('http://chartapi.imenso.co/api/getDepartment', {
      method: 'POST',
      headers: {
        "Accept": 'application/json',
        'Content-Type': 'application/json',
      },
      body: JSON.stringify({
        sub_division: this.state.sub_division,
      })
    })
      .then((response) => response.json())
      .then((responseJson) => {
        this.setState({
          Dept: responseJson.department,
          department:''
        })
        console.log(this.state.department)
      })
      .catch((error) => {
        // reject(error);
      });
  }

  handleLevel(e) {
    this.setState({
      level: e
    }, () => {
      this.fetchtask();
    });
  }
  handleGroup(e) {
    this.setState({
      group: e
    }, () => {
      this.fetchtask();
    });
  }

  HandleSubDivision(e) {
    this.setState({
      sub_division: e
    }, () => {     
      this.fetchtask();
      this.fetchDepartment();
    });
  }

  HandleDepartment(e) {
    this.setState({
      department: e,
    }, () => {
      this.fetchtask();
    });
  }

  //PDF Function
  printDocument = () => {
    this.handleLoading() //called Loading Function Here
    html2canvas(this.inputRef.current).then((canvas) => {
      const imgData = canvas.toDataURL("image/.png");
      let pdf = new jsPDF("l", "mm", "a0");
      
      const imgProps = pdf.getImageProperties(imgData);
      const pdfWidth = pdf.internal.pageSize.getWidth();
      const pdfHeight = (imgProps.height * pdfWidth) / imgProps.width;

      pdf.addImage(imgData, 'JPEG', 0, 0, pdfWidth, pdfHeight);
      pdf.save("OrgChart.pdf");
    });
  };

  //Loading Function when Saving PDF current view
  handleLoading(e) {
    this.setState({
      isLoading: true
    }, () => {
      setTimeout(() => {
        this.setState({
          isLoading: false
        })
      }, 2000);
    });
  }

 

  render() {
    if (!this.state.token) {
      return <Redirect to="/" />
    }
    return (
      <React.Fragment>
        <section className="main bg-light">
          <div className="action-btn ">
            <div className="d-flex justify-content-end ">

              <div className="mr-4">
                <select

                  value={this.state.level}
                  onChange={(e) => this.handleLevel(e.target.value)}
                  className="form-control"
                  style={{ cursor: "pointer" }}
                >
                  <option value="N1">Select Level</option>
                  <option value="N2">n2</option>
                  <option value="N3">n3</option>
                  <option value="N4">n4</option>
                  <option value="N5">n5</option>
                </select>
              </div>

              <div className="mr-4">
                <select
                  value={this.state.sub_division}
                  onChange={(e) => this.HandleSubDivision(e.target.value)}
                  className="form-control"
                  style={{ cursor: "pointer" }}
                >
                  <option value="">Sub Division</option>
                  <option value="Sub_Division 1">Sub Division 1</option>
                  <option value="Sub_Division 2">Sub Division 2</option>
                </select>
              </div>
              <div className="mr-4">
                <select
                  value={this.state.department}
                  onChange={(e) => this.HandleDepartment(e.target.value)}
                  className="form-control"
                  style={{ cursor: "pointer" }}
                >
                  {
                    this.state.sub_division === '' 
                    ?
                    <option>Department</option> 
                    :
                    this.state.Dept.map((user, index) => (
                      <option  key={user.department_n4}>
                        {user.department_n4}
                      </option>
  
                    ))
                    }

                   
                </select>
              </div>
              <div>
                <Button
                  disabled={this.state.isLoading}
                  variant="danger"
                  id="btn"
                  onClick={!this.state.isLoading ? this.printDocument : null}
                >
                  <img src={PdfIcon} className="pdf-icon mr-2"
                  />
                  {this.state.isLoading ? 'Saving Pdf' : 'Export PDF'}
                </Button>

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

          <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>
          <div
            ref={this.inputRef}
          >
            <OrganizationChart

              datasource={this.state.tasks}
              chartClass="myChart"
              NodeTemplate={MyNode}
              // pan={true}
              zoom={true}
            />
          </div>
        </section>

      </React.Fragment>
    )
  }
}