import React, { Component } from 'react'
import '@shopify/polaris/styles.css';
import '../../custom.css';
import '@shopify/polaris/bootstrap.css';
import '@shopify/polaris/datatable.css';
import {Link} from 'react-router-dom';
import '@shopify/polaris/datatable';
import $ from 'jquery';
import jQuery from 'jquery';
import Griddle from 'griddle-react';
import {Page, Card, Badge, Button, Layout, FormLayout, TextField, DisplayText, Select, Pagination} from '@shopify/polaris';
// import NavBar from '../Navbar'
var thisclass = '';
var employessData = [];
export default class Employeestable extends Component {
    state = { parentChecked: '', vuid: '', stateReady: false}
    constructor(props){
        super(props);
        var result = '';
        this.state = {

        };
        thisclass = this;
        this.addlocalid = this.addlocalid.bind(this);
      }
    componentDidMount(){
        employessData = thisclass.props.data;

        thisclass.setState({
            stateReady: true
        })


        var self = this;
        $('#mytableEmp').dataTable({
            "columnDefs": [
                { "width": "20px", "targets": 0 }
            ],
            "pagingType": "numbers",
            "bAutoWidth": false,
            "bDestroy": true,
            "fnDrawCallback": function() {
                self.forceUpdate();
            }
        });
        $('#checkboxhead').removeAttr('area-sort').removeClass('sorting_asc');
        $(".checkAllCBEmp").click(function () {
            $('#mytableEmp tbody input[type="checkbox"]').prop('checked', this.checked);
        });

        $("#searchtabletb").on("keyup", function() {
            var value = $(this).val();
            value = value.toLowerCase();
            console.log(value);
            $("#mytableEmp tr").each(function(index) {
                if (index != 0) {
                    var row = $(this);

                    var id = row.find("td").text();
                    id = id.toLowerCase();
                    if (id.indexOf(value) === -1) {
                        $(this).hide();
                    }
                    else {
                        $(this).show();
                    }
                }
            });
        });



    }
  render () {

    return (


                <table className="table table-stripped" id="mytableEmp">
                  <thead>
                    <tr className="table-head-row">
                      <th id="checkboxhead" className="firsttd">
                        <div className="round-cb">
                            <input type="checkbox" id="cb1_emp" className="checkAllCBEmp" />
                            <label htmlFor="cb1_emp"></label>
                        </div>
                      </th>
                      <th>Title</th>
                      <th>Type</th>
                      <th>Created on</th>
                      <th>From</th>
                      <th>To</th>
                      <th>Processed</th>
                      <th>Amount</th>
                      <th>Status</th>
                      <th id="detailarrowhead" className="lasttd"></th>
                    </tr>
                  </thead>
                  <tbody>
                  {
                    this.state.stateReady ?
                        employessData.map((heading, index) => {
                        return(<tr role="row" className="tablerow" key={index}>
                          <td className="firsttd">
                            <div className="round-cb">
                                <input type="checkbox" value="cb1" id={heading.userId} />
                                <label htmlFor={heading.userId}></label>
                            </div>
                          </td>
                          <td>

                            <div className="emp-avatar">
                                <img src={heading.profile_picture} />
                            </div>

                            <div className="emp-title-div">
                             <div className="emp-title">
                               <div>
                                 {heading.name}
                               </div>
                             </div>
                           </div>
                          </td>
                          <td>c</td>
                          <td>Texto 2</td>
                          <td>Texto 2</td>
                          <td>Texto 2</td>
                          <td>Texto 2</td>
                          <td>Texto 2</td>
                          <td><span className="badge badge-red">Rejected</span></td>
                          <td className="lasttd"><Link to="/emp-profile" className="table-details-btn" onClick={() => {this.addlocalid(heading.userId)}}>View User</Link></td>
                        </tr>)
                    })
                    :
                    ""
                  }



                  </tbody>
                </table>

    )
  }
}