import React, { useEffect, useState } from "react"
import { Card, Divider , Row, Col, Descriptions} from 'antd';
import { } from '@ant-design/icons';
import logo from './schemax.jpg';
import Barcode from 'react-barcode';
import { RequestService } from "libs/shared-services/vms/src/lib/request.service";
import { RequestById } from "libs/shared-models/vms/src/lib/request-form/request.request";
import { RequestFormDto } from "libs/shared-models/vms/src/lib/request-form/request.dto";
import { AlertMessages } from "@gtpl/shared-utils/alert-messages";
import moment from "moment";
import { Redirect, useLocation, useParams } from "react-router-dom";
//import pdfViewer from 'pdf-viewer';

export interface VisitorCardProps {
  id:number;
};

export function VisitorCard(props: VisitorCardProps) {
  console.log(props)
  const { id } = props;
 const [barcode, setBarcode] = useState<string>(null);
 const [previewdata, setPreviewData] = useState<RequestFormDto>(null);
 const service = new RequestService();
//  const { state }: any = useLocation();
//  let {id } = state ? state : { id: ''};

 
 
 useEffect(()=> {
  console.log('comig here');
  console.log(id);
  console.log('comig here 11111');
  generateBarcode(id);
  getDetailes(id);
 },[]);

 const generateBarcode = (id) => {
  setBarcode(id);
 }
 
 const getDetailes = (id: number) => {
  service.getPassById(id).then(res => {
      if(res.status) {
        console.log(res.data,"****")
          setPreviewData(res.data[0]);
          AlertMessages.getSuccessMessage(res.internalMessage)
      } else{
          AlertMessages.getErrorMessage(res.internalMessage)
          
      }
  }).catch(err => {
    AlertMessages.getErrorMessage(err.message)
    
  })
}
  return (
    <>
    <div style={{padding:'10%', marginLeft:'20%'}}>
      <Card style={{width: 500}}>
        <Row>
          <Col >
            <img src={logo} alt="schemax" width={60} height={67}/>
          </Col>
          <Col style={{marginLeft:'30%',marginTop:'5%', fontSize:'200%'}}>Visitor Pass</Col>
        </Row>
        <Row style={{marginLeft:'50%', fontSize:'150%'}}>
          Id: {`${id}`}
        </Row>
        <Divider/>
        <Descriptions>
          <Descriptions.Item span={2}><b style={{fontSize:'150%'}}>{`${previewdata?.visitorName.slice(0,previewdata.visitorName.length)}`}</b></Descriptions.Item>
          <Descriptions.Item label="Phone" >{previewdata?.visitorMobileNumber}</Descriptions.Item>
          <Descriptions.Item label="Department" span={2}>{previewdata?.department} </Descriptions.Item>
          <Descriptions.Item label="To Meet" >{previewdata?.whomMeet}</Descriptions.Item>
          <Descriptions.Item label="Validity" span={3}>{`${moment(previewdata?.visitorArrivalDate).format("YYYY-MM-DD")} to ${moment(previewdata?.visitorDepartureDate).format("YYYY-MM-DD")}`}</Descriptions.Item>
        </Descriptions>
        <div style={{textAlign:'center'}}>
          <Barcode value={barcode} height={30} />
        </div>
        
      </Card>
      
    </div>
    </>
  );
}

export default VisitorCard;