import React, { useEffect, useRef, useState } from 'react';
import { Button, Card, Col, Divider, Form, Input, Modal, Row, Tabs,DatePicker } from 'antd';
import Table, { ColumnProps } from 'antd/lib/table';
import {RequestService} from '../../../../../../shared-services/vms/src/lib/request.service';
import { AlertMessages } from '@gtpl/shared-utils/alert-messages';
import { RequestFormDto } from 'libs/shared-models/vms/src/lib/request-form/request.dto';
import { LeaveApprovalStatusEnum } from '@gtpl/shared-models/common-models';
import moment from 'moment';
import { Redirect } from 'react-router-dom';
import{SearchOutlined,UndoOutlined}from '@ant-design/icons';
import Highlighter from 'react-highlight-words';
import Link from 'antd/lib/typography/Link';
import Search from 'antd/lib/transfer/search';
import { RequestById } from 'libs/shared-models/vms/src/lib/request-form/request.request';
import { RequestReport } from 'libs/shared-models/vms/src/lib/request-form/report.dto';
export interface PagesVisitorManagementVisitorComponentsVisitorApprovalHRGridProps {}
export const PagesVisitorManagementVisitorComponentsVisitorApprovalHRGrid=(
  props: PagesVisitorManagementVisitorComponentsVisitorApprovalHRGridProps
  )=> {
    const {RangePicker} = DatePicker;
    const [form] = Form.useForm();
    const [page, setPage] = React.useState(1);
    const [searchText, setSearchText] = useState('');
    const[searchedColumn,setSearchedColumn]=useState('');
    const searchInput = useRef(null);
    const { TabPane } = Tabs;
    const service = new RequestService()
    const [requestData , setRequestData ] = useState<any[]>([]);
    const [data,setData] = useState<any[]>([]);
    const [showpopup, setShowpopup] = useState<boolean>(false);
    const [activeTab,setActiveTab] = useState('1');
    const [requestId ,setRequestId] = useState(0);
    const [expiredData, setExpiredData] = useState<any[]>([]);

    const { Search } = Input;
    let pathToredirect = '/detailed-view';


    useEffect(() => {
      getAllData();
      getExpiredRequests();

  },[])

  const getAllData = () => {
    let fromDate = form.getFieldValue('Date')?(moment(form.getFieldValue('Date')[0]).format("YYYY-MM-DD")): null;
    let toDate = form.getFieldValue('Date')?(moment(form.getFieldValue('Date')[1]).format("YYYY-MM-DD")): null;
    // let fdate = form.getFieldValue('Date')[0]
    // let tdate = form.getFieldValue('Date')[1]
    //  let fromDate = moment(fdate).format("YYYY-MM-DD");
    //  let toDate = moment(tdate).format("YYYY-MM-DD");
    const req = new RequestReport(fromDate,toDate)
    console.log(req,"req")
      service.getHodApprovedRequests(req).then(res => {
        console.log(res,"res")
          if(res.status){
              setRequestData(res.data)
              
              AlertMessages.getSuccessMessage(res.internalMessage)
          }else{
              AlertMessages.getErrorMessage(res.internalMessage)
          }

      })

  }
    const searchById = (id: number) => {
      const req = new  RequestById(id);
      service.getReqIdPreviewData(req).then(res => {
          if(res.status){
            if(res.data[0].statusByHod == LeaveApprovalStatusEnum.APPROVED) {

              setRequestData(res.data)
            
              if(res.data[0].statusByHr == LeaveApprovalStatusEnum.APPROVED){
                setActiveTab("2")
              }else if(res.data[0].statusByHr == LeaveApprovalStatusEnum.OPEN){
                setActiveTab("1")
               }else if(res.data[0].statusByHr == LeaveApprovalStatusEnum.REJECTED) {
                setActiveTab("3")
              }
              AlertMessages.getSuccessMessage(res.internalMessage)
            } else {
              AlertMessages.getErrorMessage('Requisition Id not found')
            }     
          }else{
              AlertMessages.getErrorMessage(res.internalMessage)
          }

      })

  }

  const getExpiredRequests = () => {
    service.getExpiredRequestsHr().then(res => {
        if(res.status){
            setExpiredData(res.data);
            AlertMessages.getSuccessMessage(res.internalMessage)
        }else{
            AlertMessages.getErrorMessage(res.internalMessage)
        }

    })
}

  const onSearch = (value) => {
    searchById(value)
  }
  function handleSearch(selectedKeys, confirm, dataIndex) {
    confirm();
    setSearchText(selectedKeys[0]);
    setSearchedColumn(dataIndex);
  };
function handleReset(clearFilters) {
    clearFilters();
    setSearchText('');
  };

const DetailView = (requestId:number) => {
    setRequestId(requestId)
}

const getColumnSearchProps = (dataIndex: string) => ({
  filterDropdown: ({ setSelectedKeys, selectedKeys, confirm, clearFilters }) => (
    <div style={{ padding: 8 }}>
      <Input
        ref={searchInput}
        placeholder={`Search ${dataIndex}`}
        value={selectedKeys[0]}
        onChange={e => setSelectedKeys(e.target.value ? [e.target.value] : [])}
        onPressEnter={() => handleSearch(selectedKeys, confirm, dataIndex)}
        style={{ width: 188, marginBottom: 8, display: 'block' }}
      />
      <Button
        type="primary"
        onClick={() => handleSearch(selectedKeys, confirm, dataIndex)}
        icon={<SearchOutlined />}
        size="small"
        style={{ width: 90, marginRight: 8 }}
      >
        Search
      </Button>
      <Button onClick={() => handleReset(clearFilters)} size="small" style={{ width: 90 }}>
        Reset
      </Button>
    </div>
        ),
        filterIcon: filtered => (
          <SearchOutlined type="search" style={{ color: filtered ? '#1890ff' : undefined }} />
        ),
        onFilter: (value, record) =>
          record[dataIndex]
            ? record[dataIndex]
              .toString()
              .toLowerCase()
              .includes(value.toLowerCase())
            : false,
        onFilterDropdownVisibleChange: visible => {
          console.log(searchInput.current);
          if (visible) { setTimeout(() => searchInput.current.select()); }
        },
        render: text =>
          text ? (
            searchedColumn === dataIndex ? (
              <Highlighter
                highlightStyle={{ backgroundColor: '#ffc069', padding: 0 }}
                searchWords={[searchText]}
                autoEscape
                textToHighlight={text.toString()}
              />
            ) : text
          ): null
    
      });
      const handlesubmit = () => {
        
    if(form.getFieldValue('rejectionReason') == null)
    {
     return AlertMessages.getInfoMessage("Rejection reason must be filled")
    }else{
     hrRejection(data);
     setShowpopup(false);
    }
 }  

  const hrApproval = (values) => {
    const req = new RequestFormDto(values.requestId,values.visitType,values.employeeName,values.employeeCode,values.department,values.visitorName,values.visitorCard,values.visitorEmail,values.visitorMobileNumber,values.aadharNumber,values.visitorAddress,values.visitorArrivalDate,values.visitorDepartureDate,values.purposeOfVisit,values.whomMeet,values.transportation,values.vehicleNumber,values.driverName,values.statusByHod,LeaveApprovalStatusEnum.APPROVED,values.rejectionReason,values.createdUser,true,values.updatedUser,values.versionFlag)
    service.updateStatusHr(req).then(res => {
        if(res.status){
            getAllData();
            AlertMessages.getSuccessMessage("Approved SuccessFully")
        }else{
            AlertMessages.getErrorMessage(res.internalMessage)
        }
    })
}

const hrRejection = (values) => {
    const req = new RequestFormDto(values.requestId,values.visitType,values.employeeName,values.employeeCode,values.department,values.visitorName,values.visitorCard,values.visitorEmail,values.visitorMobileNumber,values.aadharNumber,values.visitorAddress,values.visitorArrivalDate,values.visitorDepartureDate,values.purposeOfVisit,values.whomMeet,values.transportation,values.vehicleNumber,values.driverName,values.statusByHod,LeaveApprovalStatusEnum.REJECTED,form.getFieldValue('rejectionReason'),values.createdUser,true,values.updatedUser,values.versionFlag)
    setShowpopup(true);
    service.updateStatusHr(req).then(res => {
        if(res.status){
            getAllData();
            AlertMessages.getSuccessMessage("Rejected SuccessFully")
        }else{
            AlertMessages.getErrorMessage(res.internalMessage)
        }
    })
}

  const searchData = () => {
    console.log(form.getFieldValue('requestId'),"id")
    if(form.getFieldValue('requestId') !== undefined) {
      searchById(form.getFieldValue('requestId'))
    } else {
      const fromDate = form.getFieldValue('Date')?(moment(form.getFieldValue('Date')[0]).format("YYYY-MM-DD")): null;
      const toDate = form.getFieldValue('Date')?(moment(form.getFieldValue('Date')[1]).format("YYYY-MM-DD")): null;
      const selectedDate={fromDate,toDate};
      console.log(selectedDate,"date")
      getAllData()
    }
  }

  // const getByDate = (req) => {
  //   service.getHodApprovedRequests().then( res => {
  //     setRequestData([])
  //     if (res.status) {
  //       res.data.map((e)=>{
  //         if(e.visitorArrivalDate == req.fromDate || e.visitorDepartureDate == req.toDate) {
  //           setRequestData([...requestData,e]);
  //            AlertMessages.getSuccessMessage("Data retrieved succesfully")
  //         } else {
  //           AlertMessages.getErrorMessage("Data not found");
  //         }
  //       })
  //       // setRequestData(res.data.filter(rec => rec.visitorArrivalDate == req.fromDate ||  rec.visitorDepartureDate == req.toDate))
  //       // AlertMessages.getSuccessMessage("report retrieved succesfully")
  //     } else {
  //       AlertMessages.getErrorMessage(res.internalMessage)
  //     }
  //   })
  // }

  const onReset = () => {
    form.resetFields();
    getAllData();
  }
    
    const tableColumns = (key) => {
      const columns: ColumnProps<any>[] = [
      {
        title: 'S.No',
        key: 'sno',
        width: '30px',
        responsive: ['sm'],
        render: (text, object, index) => (page - 1) * 10 + (index + 1)
      },
      {
        title: 'Requisition ID',
        dataIndex: 'requestId',
        width: 130,
        align: 'left',
        ...getColumnSearchProps('requestId'),
        render: (text, record) => {
          return <>

           <Link onClick={e => DetailView(record.requestId)}>{record.requestId}</Link>
          </>
        },
      },
      {
        title: `Visitor's Name`,
        dataIndex: 'visitorName',
        width: 130,
        align: 'left',
        render: (value,record) => {
          return <>
          {record.visitorName.toString()}
            {/* {`${record.visitorName[0]}+ ${record.visitorName.length-1}`} */}
            {/* {`${record.visitorName.slice(0,record.visitorName.length)},`} */}
            {/* {record.visitorName[record.visitorName.length-1]} */}
            
          </>
      }
      

      },
      {
        title: 'Check-In Date',
                dataIndex: 'visitorArrivalDate',
                width: 150,
                align: 'left',
                render: (value, record) => {
                    return <span>
                      {record.visitorArrivalDate ? moment(record.visitorArrivalDate).format('YYYY-MM-DD HH:mm:ss') : '-'}
                    </span>
                  }
      },
      {
        title: 'Check-out Date',
                dataIndex: 'visitorDepartureDate',
                width: 150,
                align: 'left',
                render: (value, record) => {
                    return <span>
                      {record.visitorDepartureDate ? moment(record.visitorDepartureDate).format('YYYY-MM-DD HH:mm:ss') : '-'}
                    </span>
                  }
      },{
        title: 'Purpose Of Visit',
                dataIndex: 'purposeOfVisit',
                width: 150,
                align: 'left'
      },{
        title:'Mobile Number',
        dataIndex:'visitorMobileNumber',
        width:150,
        align:'left'
    },
  {
      title:'Whom To Meet',
      dataIndex:'whomMeet',
      width:150,
      align:'left'
  }
      
    ];
      const actionColumns: ColumnProps<any>[] = [
        {
            title: 'Action',
            dataIndex: 'statusByHr',
            align: 'center',
            width: 180,
            render: (statusByHr, rowData) => (
                <span>
                    {rowData.statusByHr ?
                        <span>
                            <Button type="primary" shape="round" size="small" onClick={()=>hrApproval(rowData)}>
                                Approve
                            </Button>
                            <Divider type="vertical" />
                            <Button type="primary" shape="round" size="small" danger onClick={() => {
                              setData(rowData)
                              setShowpopup(true)
                            }}>
                                Reject
                            </Button>
                        </span> :
                        <span> </span>
                    }
                </span>
            ),
        },
    ];
    if (key === "1") {
        return [...columns, ...actionColumns];
    } else {
        return [...columns]
    }
    }
    const onChange = (pagination, filters, sorter, extra) => {
        console.log('params', pagination, filters, sorter, extra);
    }
    const onClick= (val) => {
      console.log(val,"val")
    }

    return (
      <>
      {(requestId) ? <Redirect to={{pathname:'/detailed-view', state:{id:requestId,loc:'/hr-approval'}}} /> : null}
        <Card title={<span style={{ color: 'white' }}>HR-Approval For Visitors</span>}
        style={{ textAlign: 'center' }} headStyle={{ backgroundColor: '#69c0ff', border: 0 }}  >
          <Form  form={form} layout={'vertical'} style={{ padding: '0px' }}>
            <Row>
            <Col xs={{ span: 24 }} sm={{ span: 24 }} md={{ span: 5, offset: 1 }} lg={{ span: 5, offset: 1 }} xl={{ span: 5, offset: 1 }} style={{ margin: '1%' }}>
              <Form.Item name="Date">
                <RangePicker />
              </Form.Item>
            </Col>
      <Col style={{margin:'1%'}}>
      <Form.Item name="requestId" >
        <Input placeholder="Search By Requisition Id" width={150}/>
      </Form.Item>
      </Col>
      <Col style={{margin:'1%'}}>
                <Button icon={<SearchOutlined />} block type="primary" onClick={() => searchData()} style={{ marginRight: 2, width: 100 }}>Search</Button>
            </Col>
      <Col style={{ margin: '1%' }}>
            <Button
              icon={<UndoOutlined />}
              onClick={() => onReset()}
            >
              Reset
            </Button>
            </Col>
            </Row>
            </Form>
        <br></br>
        <Tabs type={'card'} tabPosition={'top'}  onChange={(key)=>{setActiveTab(key)}} activeKey={activeTab}>
        <TabPane key="1"
         tab={<span style={{ color: "#bfbfbf" }}>{'Open: ' + (requestData.filter(rec => rec.statusByHr == LeaveApprovalStatusEnum.OPEN).length)}</span>}
        >
      <Table
      rowKey={record => record.requestId}
      columns={tableColumns('1')}
      dataSource={requestData.filter(rec => rec.statusByHr == LeaveApprovalStatusEnum.OPEN)}
      scroll={{ x: true }}
      pagination={{
        onChange(current) {
            setPage(current);
        }
    }}
    onChange={onChange}
    bordered />
        </TabPane>
        <TabPane key="2"
        tab={<span style={{ color: "#52c41a" }}>{'Approved: ' + (requestData.filter(el => el.statusByHr == LeaveApprovalStatusEnum.APPROVED).length)}</span>}
        >
        <Table
      rowKey={record => record.requestId}
      columns={tableColumns("2")}
      dataSource={requestData.filter(rec => rec.statusByHr == LeaveApprovalStatusEnum.APPROVED)}
      scroll={{ x: true }}
      pagination={{
        onChange(current) {
            setPage(current);
        }
    }}
    onChange={onChange}
    bordered />
        </TabPane>
        <TabPane key="3"
         tab={<span style={{ color: "#f5222d" }}>{'Rejected: ' + (requestData.filter(el => el.statusByHr == LeaveApprovalStatusEnum.REJECTED).length)}</span>}
        >
       <Table
      rowKey={record => record.requestId}
      columns={tableColumns("2")}
      dataSource={requestData.filter(rec => rec.statusByHr == LeaveApprovalStatusEnum.REJECTED)}
      scroll={{ x: true }}
      pagination={{
        onChange(current) {
            setPage(current);
        }
    }}
    onChange={onChange}
    bordered />
        </TabPane>
        <TabPane key="4"
                  tab={<span style={{ color: "#bfbfbf" }}>{'Expired: ' + (expiredData.length)}</span>}
                >
                    <Table
                        rowKey={record => record.requestId}
                        columns={tableColumns("2")}
                         dataSource={expiredData}
                        scroll={{ x: true }}
                        pagination={{
                            showSizeChanger : true,
                            onChange(current) {
                                setPage(current);
                            }
                        }}
                        onChange={onChange}
                        bordered />
                </TabPane>
      </Tabs>
      <Modal
        className='qr-container'
        key={'modal' + Date.now()}
        width={'95%'}
        closable= {true}
        style={{ top: 30, alignContent: 'right' }}
        visible={showpopup}
        footer={[
          <Button type="primary" htmlType="submit" onClick={() => handlesubmit()}>
            Submit
          </Button>,
          <Button key="back" onClick={() => { setShowpopup(false) }}>
            Cancel
          </Button>,
        ]}
        title={<React.Fragment>
        </React.Fragment>}
      >
        <div>
          <Form form={form}
            name="control-hooks"
            layout="vertical"
            onFinish={() => {{ hrRejection }}}
          >
            <Col xs={{ span: 24 }} sm={{ span: 24 }} md={{ span: 4 }} lg={{ span: 4 }} xl={{ span: 8 }}>
              <Form.Item
                name="rejectionReason"
                label="Reason"

                rules={[
                  {
                    required: true,
                    message: 'rejectionReason required'
                  },
                 
                ]}>

                <Input />
              </Form.Item>
            </Col>
          </Form>
        </div>
      </Modal>
    </Card>
    </>
  );
}
export default PagesVisitorManagementVisitorComponentsVisitorApprovalHRGrid;