import React, { useEffect, useState } from 'react';
import { Link, useLocation } from 'react-router-dom';
import { Button, Card, Descriptions, Table } from "antd";
import { RequestService } from '../../../../../../shared-services/vms/src/lib/request.service';
import { AlertMessages } from '@gtpl/shared-utils/alert-messages';
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 moment from 'moment';



export interface VisitorDetailedViewProps {

}

export const VisitorDetailedView = (
  props: VisitorDetailedViewProps
) => {
  const [previewdata, setPreviewData] = useState<RequestFormDto>(null);
  let location = useLocation();
  console.log(location, "location")
  const { state }: any = useLocation();
  console.log(state, "state")
  let { id } = state ? state : { id: '' };
  let { loc } = state ? state : { loc: '' };
  console.log(id, "*")
  const service = new RequestService();

  useEffect(() => {
    console.log(id, '$$')
    getDetailedView(id);

  }, [id])

  const getDetailedView = (requestId: number) => {
    const req = new RequestById(requestId)
    service.getReqIdPreviewData(req).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)

    })
  }

  const tableColumns: any = [

    {
      title: 'created time',
      dataIndex: 'created_at',
      width: 130,
      align: 'center',
      render: (value, record) => {
        return <span>
          {record.created_at ? moment(record.created_at).format('YYYY-MM-DD') : '-'}
        </span>
      }
    },
    {
      title: 'Requests Count',
      dataIndex: 'no_of_visitors',
      width: 130,
      align: 'center',
    },
    {
      title: 'HOD Status',
      dataIndex: 'hod_status',
      width: 130,
      align: 'center',
    },
    {
      title: 'HR Status',
      dataIndex: 'hr_status',
      width: 130,
      align: 'center',
    }
  ]


  return (
    <Card title={<span style={{ color: 'white' }}>Visitor Detailed View</span>}
      style={{ textAlign: 'center' }} headStyle={{ backgroundColor: '#69c0ff', border: 0 }}>

      <Descriptions>
        <Descriptions.Item label="Requisition Code"> {previewdata?.requestId} </Descriptions.Item>
        <Descriptions.Item label="Visitor Name"> {`${previewdata?.visitorName.slice(0, previewdata.visitorName.length)}`} </Descriptions.Item>
        <Descriptions.Item label="Visitor Email"> {previewdata?.visitorEmail} </Descriptions.Item>
        <Descriptions.Item label="Mobile Number"> {previewdata?.visitorMobileNumber} </Descriptions.Item>
        <Descriptions.Item label="Check-In Date"> {moment(previewdata?.visitorArrivalDate).format("YYYY-MM-DD HH:mm:ss")} </Descriptions.Item>
        <Descriptions.Item label="Check-Out Date"> {moment(previewdata?.visitorDepartureDate).format("YYYY-MM-DD HH:mm:ss")} </Descriptions.Item>
        <Descriptions.Item label="Whom to Meet"> {previewdata?.whomMeet} </Descriptions.Item>
        <Descriptions.Item label="Department"> {previewdata?.department} </Descriptions.Item>
        <Descriptions.Item label="Purpose Of Visit"> {previewdata?.purposeOfVisit}  </Descriptions.Item>

      </Descriptions>
      <br></br>
      <Card title={<span style={{ color: 'white' }}>Past Information</span>}
      style={{ textAlign: 'center' }} headStyle={{ backgroundColor: '#69c0ff', border: 0 }}></Card>
      <Table
        columns={tableColumns}
        dataSource={previewdata?.pastTransactios}
        scroll={{ x: true }}
        bordered />
        <br></br>
      <Link to={loc}> <Button type="primary" style={{ float: 'right' }}> Back </Button></Link>
    </Card>

  );

}

export default VisitorDetailedView;