import React, { useEffect, useRef, useState } from 'react';
import { Button, Card, Col, Divider, Form, Input, Modal, Row, Tabs } from 'antd';
import Table, { ColumnProps } from 'antd/lib/table';
import{SearchOutlined,UndoOutlined}from '@ant-design/icons';
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 Link from 'antd/lib/typography/Link';
import { Redirect } from 'react-router-dom';
import Highlighter from 'react-highlight-words';
import Search from 'antd/lib/transfer/search';
import FormItem from 'antd/lib/form/FormItem';
import { DatePicker } from 'antd';
import { RequestById } from 'libs/shared-models/vms/src/lib/request-form/request.request';

export interface PagesVisitorManagementVisitorComponentsVisitorApprovalHodGridProps { }
export const PagesVisitorManagementVisitorComponentsVisitorApprovalHodGrid = (
    props: PagesVisitorManagementVisitorComponentsVisitorApprovalHodGridProps
) => {  
    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 [expiredData, setExpiredData] = useState<any[]>([]);
    const [requestId ,setRequestId] = useState(0);
    const [filtersData, setFiltersData]=useState(0);
    const [activeTab,setActiveTab] = useState('1');
    const { Search } = Input;
    let pathToredirect = '/detailed-view';

    useEffect(() => {
        getAllData();
        getExpiredRequests();
       // walkinApprovedData();
    },[])

    // const walkinApprovedData = () => {
    //   service.getAllRequests().then( res => {
    //     if(res.status) {
    //       res.data.map((e)=>{
    //         if(e.visitType == 'Walk-in') {
    //           const req = new RequestFormDto(e.requestId,e.visitType,e.employeeName,e.employeeCode,e.department,e.visitorName,e.visitorCard,e.visitorEmail,e.visitorMobileNumber,e.aadharNumber,e.visitorAddress,e.visitorArrivalDate,e.visitorDepartureDate,e.purposeOfVisit,e.whomMeet,e.transportation,e.vehicleNumber,e.driverName,LeaveApprovalStatusEnum.APPROVED,e.statusByHr,e.rejectionReason,e.createdUser,true,e.updatedUser,e.versionFlag) 
    //           service.updateStatusHod(req)
    //         }
    //       })
    //     }
    //   })
    // }

    const getAllData = () => {
        service.getAllRequests().then(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){
              setRequestData(res.data)
              if(res.data[0].statusByHod == LeaveApprovalStatusEnum.APPROVED){
                setActiveTab("2")
              }else if(res.data[0].statusByHod == LeaveApprovalStatusEnum.OPEN){
                setActiveTab("1")
              }else if(res.data[0].statusByHod == LeaveApprovalStatusEnum.REJECTED) {
                setActiveTab("3")
              }else {
                setActiveTab("4")
              }
              AlertMessages.getSuccessMessage("Request retrieved successfully")
          }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)
    }
    // function getColumnSearchProps(arg0: string): ColumnProps<any> {
    //     throw new Error('Function not implemented.');}
    //     const goToSaleDetailView = (saleOrderId: number,poNumber:string) => {
    //         setSaleId(saleOrderId);
    //         set(poNumber);
    //         console.log(saleOrderId);
    //       }
    // console.log(requestData,"************")

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

        })
    }
    // const onReset = () => {
    //   form.resetFields();
    //   setSearchText('');
    //   setReqData(filtersData);
    // }
    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{
          hodRejection(data);
          setShowpopup(false);
         }
      }

    const hodApproval = (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,LeaveApprovalStatusEnum.APPROVED,values.statusByHr,values.rejectionReason,values.createdUser,true,values.updatedUser,values.versionFlag)
        service.updateStatusHod(req).then(res => {
            if(res.status){
                getAllData();
                AlertMessages.getSuccessMessage("Approved SuccessFully")
            }else{
                AlertMessages.getErrorMessage(res.internalMessage)
            }
        })
    }

    const hodRejection = (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,LeaveApprovalStatusEnum.REJECTED,values.statusByHr,form.getFieldValue('rejectionReason'),values.createdUser,true,values.updatedUser,values.versionFlag,);
        setShowpopup(true);
        service.updateStatusHod(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")
        getByDate(selectedDate)
      }
    }

    const getByDate = (req) => {
      service.getByDate(req).then(res => {
        if(res.status) {
          setRequestData(res.data);
          AlertMessages.getSuccessMessage(res.internalMessage)
        } else {
          AlertMessages.getErrorMessage(res.internalMessage)
        }
      })
    }

    const onReset= () => {
      form.resetFields();
      setRequestData([])
      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)},`.trimRight(',')} */}
                      {/* {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: 'Department',
            //     dataIndex: 'department',
            //     width: 150,
            //     align: 'center'
            // },
             {
                title: 'Purpose Of Visit',
                dataIndex: 'purposeOfVisit',
                width: 130,
                align: 'left'
            },
            {
                title:'Mobile Number',
                dataIndex:'visitorMobileNumber',
                width:130,
                align:'left'
                
            },
            {
                title:'Whom To Meet',
                dataIndex:'whomMeet',
                width:130,
                align:'left',
                
            },
            {
                title: 'Status By HR',
                dataIndex: 'statusByHr',
                width:130,
                align:'center'
            }

        ];
        const actionColumns: ColumnProps<any>[] = [
            {
                title: 'Action',
                dataIndex: 'statusByHod',
                align: 'center',
                width: 180,
                render: (statusByHod, rowData) => (
                    <span>
                        {rowData.statusByHod ?
                            <span>
                                <Button type="primary" shape="round" size="small" onClick={()=>hodApproval(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:'/hod-approval'}}} /> : null}

        <Card title={<span style={{ color: 'white' }}>HOD-Approval For Visitors</span>}
            style={{ textAlign: 'center' }} headStyle={{ backgroundColor: '#69c0ff', border: 0 }}  >
            {/* <FormItem>
              <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%' }}>
            <Search
      placeholder=" search by Id"
      allowClear
      enterButton="Search"
      size="large"
      onSearch={onSearch}
      onChange={onClick}
      
      </Col>
      
    </FormItem> */}
    
            {/* <Button type='primary' block onClick={()=>searchData()}>Get</Button> */}
            <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.statusByHod == LeaveApprovalStatusEnum.OPEN).length)}</span>}
                 >
                    <Table
                        rowKey={record => record.requestId}
                        columns={tableColumns('1')}
                        dataSource={requestData.filter(rec => rec.statusByHod == 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.statusByHod == LeaveApprovalStatusEnum.APPROVED).length)}</span>}
                >
                    <Table
                        rowKey={record => record.requestId}
                        columns={tableColumns("2")}
                        dataSource={requestData.filter(rec => rec.statusByHod == 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.statusByHod == LeaveApprovalStatusEnum.REJECTED).length)}</span>}
                >
                    <Table
                        rowKey={record => record.requestId}
                        columns={tableColumns("2")}
                         dataSource={requestData.filter(rec => rec.statusByHod == 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={{
                            onChange(current) {
                                setPage(current);
                            }
                        }}
                        onChange={onChange}
                        bordered />
                </TabPane>
            </Tabs>
            <Modal
        className='qr-container'
        key={'modal' + Date.now()}
        width={'95%'}
        
        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={() => {{ hodRejection }}}
          >
            <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 PagesVisitorManagementVisitorComponentsVisitorApprovalHodGrid;