import React ,{ PureComponent } from 'react';
import { Col, Container, Row,Button,ButtonToolbar,Breadcrumb,
  BreadcrumbItem,
  Card,
  CardBody,
  CardHeader,
  CardTitle,FormGroup,
  Label,
  CustomInput

  } from 'reactstrap';
import { Link } from "react-router-dom";
import Header from "../../components/Header";
import HeaderTitle from "../../components/HeaderTitle";
import * as myConstClass from '../../constant.js';
import $ from 'jquery';
import { ValidatorForm, TextValidator } from 'react-material-ui-form-validator';
import { toastr } from "react-redux-toastr";
import {
    AvForm,
    AvField,
    AvGroup,
    AvInput,
    AvFeedback,
    AvRadioGroup,
    AvRadio,
    AvCheckboxGroup,
    AvCheckbox
  } from "availity-reactstrap-validation";

  
class Attendance extends PureComponent {
    constructor(props) {//alert('in..');
    super(props);
    //this.googleTranslateElementInit = this.googleTranslateElementInit.bind(this);
    this.state = {
      
      user_id:'',
      posts: [],
      branch:[],
      codes:[],
      checkIn:[],
      checkOut:[],
      empData:[],
      formData: {
        check_in: '',
        check_out: '',
        middlename: '',
        lastname: '',
        email:'',
        

    },
    submitted: false,
    }
    //this.handleSubmit = this.handleSubmit.bind(this);
  }


  
  componentDidMount(){

   //     window.googleTranslateElementInit = this.googleTranslateElementInit;
  //     const google = window.google;
  // const script = document.createElement("script");
  // script.src = "//translate.google.com/translate_a/element.js?cb=googleTranslateElementInit";
  // script.async = true;
  // document.body.appendChild(script);  

    const answer_array = this.props.location.pathname.split('/');
    if(answer_array['3']){

  fetch(myConstClass.BASE_URL+'attendance/getEmpAttendanceInfo/'+answer_array['3'])
  .then(response => response.json())
  .then(response =>{this.setState({empData: response})}).catch(err => console.log(err)) 

   fetch(myConstClass.BASE_URL+'attendance/getAttendanceInfo/'+answer_array['3'])
  .then(response => response.json())
  .then(response =>{
    
    let i=1;  
    // response.forEach(element => {
      
      let cin = response.checkin_radius_check;
      if(cin.includes("Out")){
        response.checkin_radius_check=<div style={{color:"red"}}>{cin}</div>;
      } else {
        response.checkin_radius_check=<div style={{color:"green"}}>{cin}</div>;
      }
      
      let cout = response.checkout_radius_check;
      if(cout.includes("Out")){
        response.checkout_radius_check=<div style={{color:"red"}}>{cout}</div>;
      } else {
        response.checkout_radius_check=<div style={{color:"green"}}>{cout}</div>;
      }
    //  i++;
    // });



    this.setState({formData: response})}).catch(err => console.log(err))  

   fetch(myConstClass.BASE_URL+'attendance/getCheckInLocationInfo/'+answer_array['3'])
  .then(response => response.json())
  .then(response =>{this.setState({checkIn: response})}).catch(err => console.log(err))

   fetch(myConstClass.BASE_URL+'attendance/getCheckOutLocationInfo/'+answer_array['3'])
   .then(response => response.json())
   .then(response =>{this.setState({checkOut: response})}).catch(err => console.log(err)) 

    }
  }
  googleTranslateElementInit () {
    // / eslint-disable no-new /
    const google = window.google;
      new google.translate.TranslateElement({pageLanguage: 'en'}, 'google_translate_element_1');
    new window.google.translate.TranslateElement({pageLanguage: 'pt', layout: window.google.translate.TranslateElement.FloatPosition.TOP_LEFT}, 'google_translate_element_1')
  }

//   componentWillMount(){
//     const answer_array = this.props.location.pathname.split('/');
//     if(answer_array['3']){
//     fetch(myConstClass.BASE_URL+'attendance/getCheckInLocationInfo/'+answer_array['3'])
//     .then(response => response.json())
//     .then(response =>{this.setState({checkIn: response})}).catch(err => console.log(err)) 
  
//     fetch(myConstClass.BASE_URL+'attendance/getCheckOutLocationInfo/'+answer_array['3'])
//     .then(response => response.json())
//     .then(response =>{this.setState({checkOut: response})}).catch(err => console.log(err)) 
//   }
// }




render() {
    const {formData,checkIn,checkOut,empData} = this.state;
    var is_biometics=localStorage.getItem('hr_emp_biomatrics');

//  console.log('empData');
//  console.log(empData);
//  console.log('empData');

			  
    const heading = formData.employee_id;
    // const check_in = `https://alpha.workzoneplus.com/backend/uploads/checkinout images/`+formData.employee_id+'/'+formData.check_in_image;
    // const check_out = `https://alpha.workzoneplus.com/backend/uploads/checkinout images/`+formData.employee_id+'/'+formData.check_out_image;
    
    const check_in = `https://beta.workzoneplus.com/backend/uploads/checkinout images/`+formData.employee_id+'/'+formData.check_in_image;
    const check_out = `https://beta.workzoneplus.com/backend/uploads/checkinout images/`+formData.employee_id+'/'+formData.check_out_image;
    
    
    // const check_in = `http://localhost/workzone/backend/uploads/checkinout images/`+formData.employee_id+'/'+formData.check_in_image;
    // const check_out = `http://localhost/workzone/backend/uploads/checkinout images/`+formData.employee_id+'/'+formData.check_out_image;
    const file_link = 'https://www.google.com/maps/search/?api=1&query='+checkIn.location_lat+','+checkIn.location_long;
    const file_link_out = 'https://www.google.com/maps/search/?api=1&query='+checkOut.location_lat+','+checkOut.location_long;
    // const Ava  = `https://alpha.workzoneplus.com/img/check_img.png`;
    // const location = `https://alpha.workzoneplus.com/img/location-map.png`;
    // const location = `https://alpha.workzoneplus.com/img/pin.png`;
      
    // console.log(formData.checkout_radius_check);
    const Ava  = `https://beta.workzoneplus.com/img/check_img.png`;
    const location = `https://beta.workzoneplus.com/img/pin.png`;
    
    const checkIn_dist =   checkIn.check_in_dist; 
    const checkIn_radius_status =  checkIn.checkin_radius_check;
    let checkIn_check;
    if(checkIn_radius_status == 1){
      checkIn_check = "True";
    }  else {
      checkIn_check = "False";
    }
    const checkOut_dist =   checkOut.check_out_dist; 
    const checkOut_radius_status =  checkOut.checkout_radius_check;
    let checkOut_check;
    if(checkOut_radius_status == 1){
      checkOut_check = "True";
    }  else {
      checkOut_check = "False";
    }

    const emp =empData.first_name+' '+empData.last_name+' '+'('+empData.employee_id+')';
    let card;
    let check_out_details;
    if(checkOut.clock_out == ''){
      check_out_details= <h4>Check out details are Not Available</h4>;
    } else {
      check_out_details=  <Row>
      <Col md={3} lg={3}>
      <h3>
     Check-out Details 
      </h3>
      </Col>
    
      <Col md={3} lg={3}>
     <h5> Out-Time : {checkOut.clock_out} </h5>
      {/* <img src={check_out}  style={{width: '160px',height:'100px'}}/><br /><br/> */}
      </Col>
      
      <Col md={3} lg={3}>
      <h5>Get Location</h5>  <a target="_blank"  href={file_link_out}><img src= {location} style={{width: '25px',height:'32px'}}/></a> 
      <br/>  <br/>
      <h5>Check-Out Distance : </h5>
      <h5>Check-Out Radius Check  : </h5>
      {is_biometics=='true'? <h5>Liveness Percentage  : </h5>:''}
      {is_biometics=='true'?<h5>Matching Percentage  : </h5>:''} 
      </Col>
      <Col md={3} lg={3}>
      {/* <h5>Get Image</h5>  <a target="_blank"  href={check_out}><img src= {Ava}  style={{width: '33px',height:'32px'}} /></a> */}
      { formData.check_out_image!=''
        ?
        <h5>Get Image</h5> :''
    }
      { formData.check_out_image!=''
        ?
      <a target="_blank"  href={check_out}><img src= {Ava}  style={{width: '33px',height:'32px'}} /></a>
    :<h5> Done By Organization Qr code
    </h5>}
     
      <br/> <br/>
       {checkOut_dist}<br/>
      {checkOut_check}<br/>
      {is_biometics=='true'?formData.liveness_percentage:''}<br/>
      {is_biometics=='true'?formData.matching_percentage:''}
       </Col>
      
      </Row>;
    }

  
    if(checkIn.location_lat == '-' && checkIn.location_long == '-'){
      card =   <CardBody><Row>
      <Col md={12} lg={12}>
        <h4>This entry is generated by Admin</h4>
      <hr/>
      </Col>
      </Row><br/><br/><br/><br/></CardBody>;
    } else {

                


      card =  <CardBody>
      <Row>
      <Col md={12} lg={12}>
      <h3 className="page-title">View Check-In/ Check-Out Images for {emp} 
         </h3>     
        <h4>Total Work: { formData.total_work}</h4>
      <hr/>
      </Col>
      </Row>
    

      <Row>
        <Col md={3} lg={3}>
          <h4>Checkin Radius Check:</h4>
        </Col>
        <Col md={3} lg={3}>
          <h4>{ formData.checkout_radius_check}</h4>
        </Col>
        <Col md={3} lg={3}>
          <h4>Checkout Radius Check:</h4>
        </Col>
        <Col md={3} lg={3}>
          <h4>{ formData.checkout_radius_check}</h4>
        </Col>
      </Row><hr/><br/>

      <Row>
      <Col md={3} lg={3}>
      <h3>
     Check-In Details
      </h3>
      </Col>
      <Col md={3} lg={3}>
     <h5>In-Time : {checkIn.clock_in} </h5>
      {/* <img src={check_in}  style={{width: '160px',height:'100px'}}/><br /><br/> */}
      </Col>
      <Col md={3} lg={3}>
      <h5>Get Location</h5>  <a target="_blank"  href={file_link}><img src= {location} style={{width: '25px',height:'32px'}}/></a> 
       <br/><br/>
       <h5>Check-In Distance : </h5>
       <h5>Check-In Radius Check  : </h5>
       {is_biometics=='true'?<h5>Liveness Percentage  : </h5>:''}
      {is_biometics=='true'?<h5>Matching Percentage : </h5>:''}
       </Col>
       <Col md={3} lg={3}>
       { formData.check_in_image!=''
        ?
        <h5>Get Image</h5> :''
    }
       { formData.check_in_image!=''
        ?
      <a target="_blank"  href={check_in}><img src= {Ava}  style={{width: '33px',height:'32px'}} /></a>
    :<h5>   Done By Organization Qr code
    </h5>}
       {/* <h5>Get Image</h5>  <a target="_blank"  href={check_in}><img src= {Ava}  style={{width: '33px',height:'32px'}}/></a> */}
       <br/>  <br/>
        {checkIn_dist} <br/>
       {checkIn_check}<br/>
       {is_biometics=='true'?formData.liveness_percentage:''}<br/>
       {is_biometics=='true'?formData.matching_percentage:''}
       
       </Col>
      </Row><br/><hr/><br/>
      {check_out_details}
      <Row>
      <Col md={3} lg={3}>
          <h3>Attendance Notes:</h3>
        </Col>
        <Col md={3} lg={3}>
          <h5>{ formData.attendanceNotes}</h5>
        </Col>
      </Row>
       {/* <Row>
      <Col md={3} lg={3}>
      <h3>
     Check-out Details 
      </h3>
      </Col>   
      <Col md={3} lg={3}>
     <h5> Out-Time : {checkOut.clock_out} </h5>
      </Col>    
      <Col md={3} lg={3}>
      <h5>Get Location</h5>  <a target="_blank"  href={file_link_out}><img src= {location} style={{width: '25px',height:'32px'}}/></a> 
      </Col>
      <Col md={3} lg={3}>
      <h5>Get Image</h5>  <a target="_blank"  href={check_out}><img src= {Ava}  style={{width: '33px',height:'32px'}} /></a>
       </Col>     
      </Row> */}
      <hr/>
      </CardBody>;
    }
    // const location = `http://localhost/fap/img/location-map.png`;
    return (
        <Container fluid>
        <Header><div  id="google_translate_element_1" ></div><br/>
          <HeaderTitle>View</HeaderTitle>
          <Breadcrumb>
            <BreadcrumbItem>
              <Link to="/dashboard">Dashboard</Link>
            </BreadcrumbItem>
            <BreadcrumbItem>
              <Link to="/attendance/listing">Attendance Listing</Link>
            </BreadcrumbItem>
            <BreadcrumbItem active>View</BreadcrumbItem>
          </Breadcrumb>
        </Header>      
      <Row>
        <Col md={12}>
          {/* <h3 className="page-title">View CheckIn/ CHeckOut Images
         </h3>        */}
        </Col>
       
      </Row>
      <Row>
      <Col md={12} lg={12}>
      <Card>
      {card}
        </Card>
        </Col>
      </Row>
    </Container>)
  }





}

export default Attendance;