import React, { useState, useEffect, useRef } from 'react';
import {  Divider, Table, Popconfirm, Card, Tooltip, Switch,Input,Button,Tag,Row, Col, Drawer, Form, Select, DatePicker } from 'antd';
import Highlighter from 'react-highlight-words';
import { ColumnProps } from 'antd/lib/table';
import { AlertMessages } from '@gtpl/shared-utils/alert-messages';
import {CheckCircleOutlined,CloseCircleOutlined,RightSquareOutlined,EyeOutlined,EditOutlined,SearchOutlined } from '@ant-design/icons';
import { Link } from 'react-router-dom';
import {FreebiesServices} from '@gtpl/shared-services/canteen-management';
import { DepartmentService, HrmsEmpDetService } from '@gtpl/shared-services/masters';
import { DepartmentDto, HrmsEmployeeDetailsDto } from '@gtpl/shared-models/masters';
import { Excel } from "antd-table-saveas-excel";


import form from 'antd/lib/form';
import { EmployeeTokenConsumptionReportModel, empDeptRequest } from '@gtpl/shared-models/canteen-management';

export interface employeeReportProps{
}
export function employeeReport(
    props:employeeReportProps
){
  const [disable, setDisable] = useState<boolean>(false);
  const { RangePicker } = DatePicker;
  const searchInput = useRef(null);
  const [form] = Form.useForm();

  const [page, setPage] = React.useState(1); 
  const [empData, setEmpData] = useState<HrmsEmployeeDetailsDto[]>([]);
  const empService = new FreebiesServices();
  const service = new HrmsEmpDetService();

  const { Option } = Select;
  const departmentService = new DepartmentService();
  const [searchText, setSearchText] = useState('');
  const [searchedColumn, setSearchedColumn] = useState('');
  const [departmentData, setDepartmentData] = useState<DepartmentDto[]>([]);
  const [selectedEstimatedFromDate, setSelectedEstimatedFromDate] = useState(undefined);
  const [selectedEstimatedToDate, setSelectedEstimatedToDate] = useState(undefined);
  const [reportData, setReportData] = useState<any[]>([]);
  
  const EstimatedETDDate = (value) => {
    if (value) {
      const fromDate = new Date(value[0].format('YYYY-MM-DD'));
      const toDate = new Date(value[1].format('YYYY-MM-DD'));
      setSelectedEstimatedFromDate(fromDate)
      setSelectedEstimatedToDate(toDate)
    }
  }

  function handleSearch(selectedKeys, confirm, dataIndex) {
    confirm();
    setSearchText(selectedKeys[0]);
    setSearchedColumn(dataIndex);
  };

  
  function handleReset(clearFilters) {
    clearFilters();
    setSearchText('');
  };

  useEffect(() => {
    getAllActiveEmployees();
    getAllDepartments();
    getAllFreebies();
    getReportData();
  }, []);

  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 => {
      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 getAllActiveEmployees = () => {
    service.getAllActiveEmployees().then((res) => {
      if (res.status) {
        console.log(res.data)
        setEmpData(res.data);
      } else {
        if (res.intlCode) {
          AlertMessages.getErrorMessage(res.internalMessage);
        } else {
          AlertMessages.getErrorMessage(res.internalMessage);
        }
        setEmpData([]);
      }
    }).catch(err => {
      AlertMessages.getErrorMessage(err.message);
      setEmpData([]);
    })
  }

  const getAllFreebies = () => {
    empService.getAllFreebies().then((res) => {
      if (res.status) {
        console.log(res.data)
        setReportData(res.data);
      } else {
        if (res.intlCode) {
          AlertMessages.getErrorMessage(res.internalMessage);
        } else {
          AlertMessages.getErrorMessage(res.internalMessage);
        }
        setReportData([]);
      }
    }).catch(err => {
      AlertMessages.getErrorMessage(err.message);
      setReportData([]);
    })
  }

  const getReportData = () => {
    const emplId = form.getFieldValue('employeeId')
    const req = new empDeptRequest()
    req.employeeId = emplId;
    empService.getReportData(req).then((res) => {
      if (res.status) {
        console.log(res.data)
        setReportData(res.data);
      } else {
        if (res.intlCode) {
          AlertMessages.getErrorMessage(res.internalMessage);
        } else {
          AlertMessages.getErrorMessage(res.internalMessage);
        }
        setReportData([]);
      }
    }).catch(err => {
      AlertMessages.getErrorMessage(err.message);
      setReportData([]);
    })
  }

  const getAllDepartments = () => {
    departmentService.getAllActiveDepartment().then(res => {
      if (res.status) {
        setDepartmentData(res.data);
      } else {
        if (res.intlCode) {
          setDepartmentData([]);
          AlertMessages.getErrorMessage(res.internalMessage);
        } else {
          AlertMessages.getErrorMessage(res.internalMessage);
        }
      }
    }).catch(err => {
      setDepartmentData([]);
      AlertMessages.getErrorMessage(err.message);
    })
  }


  const onChange = (pagination, filters, sorter, extra) => {
    console.log('params', pagination, filters, sorter, extra);
  }
  const data = [
    {title: 'S No', dataIndex: 'sNo',render: (text, object, index) => { return i++; }},
    {title: 'Employee Code', dataIndex: 'employee_code'},
    {title: 'Employee Name', dataIndex: 'empName'},
    {title: 'Token Type', dataIndex: 'freebieCategory'},
    {title: 'Actual Count', dataIndex: 'originalCount'},
    {title: 'Available Count', dataIndex: 'availableCount'},
    {title: 'Start Time', dataIndex: 'startTiming'},
    {title: 'End Time', dataIndex: 'endTiming'},
    
  ];

  const columns: ColumnProps<any>[] = [
    {
      title: 'S No',
      dataIndex: 'sNo',
      // width: '70px',
      // fixed: 'left',
      // align: 'center',
      render: (text, object, index) => (page - 1) * 10 + (index + 1)
    },

    {
      title: 'Employee Name',
      dataIndex: 'empName',
      // width: '150px',
      // fixed: 'left',
      // align: 'center',
      sorter: (a, b) => a.empName.length - b.empName.length,
      sortDirections: ['descend', 'ascend'],
      ...getColumnSearchProps('empName'),
      
    },
   {
      title: 'Employee Code',
      dataIndex: 'employee_code',
      sorter: (a, b) => a.employee_code.length - b.employee_code.length,
      sortDirections: ['descend', 'ascend'],
      ...getColumnSearchProps('employee_code'),
      
    },
  
    // {
    //   title: 'Department',
    //   dataIndex: 'deptName',
    //   // width: '150px',
    //   sorter: (a, b) => a.deptName.length - b.deptName.length,

    //   sortDirections: ['descend', 'ascend'],
    //   ...getColumnSearchProps('deptName'),
      
    // },

    {
      title: 'Token Type',
      dataIndex: 'freebieCategory',
      // width: '150px',
      // fixed: 'left',
      // align: 'center',
      // sorter: (a, b) => a.freebieCategory?.localeCompare(b.freebieCategory),
      sorter: (a, b) => a.freebieCategory.length - b.freebieCategory.length,

      sortDirections: ['descend', 'ascend'],
      ...getColumnSearchProps('freebieCategory'),
      
    },
    {
       title : 'Actual Count',
       dataIndex :'originalCount'
    },
    {
      title : 'Available Count',
      dataIndex :'availableCount'
   },
    {
      title: 'Start Time',
      dataIndex: 'startTiming',
      // width: '150px',
      sorter: (a, b) => a.startTiming.length - b.startTiming.length,

      sortDirections: ['descend', 'ascend'],
      ...getColumnSearchProps('startTiming'),
      
    },
    {
      title: 'End Time',
      dataIndex: 'endTiming',
      // width: '150px',
      sorter: (a, b) => a.endTiming.length - b.endTiming.length,

      sortDirections: ['descend', 'ascend'],
      ...getColumnSearchProps('endTiming'),
      
    },
  ];

  const onReset = () => {
    form.resetFields();
    getReportData()
  }

  const exportedData = [];
  console.log(exportedData)
  const excelData = empData
  let i=1;
 

  const exportExcel = () => {
    const excel = new Excel();
    excel
      .addSheet('employee')
      .addColumns(data)
      .addDataSource(reportData, { str2num: true })
      .saveAs('Employee-Report.xlsx');
  }

    return (
        <Card
          title={<span style={{ color: 'white' }}>Employee Tokens Report</span>} extra={<Button onClick={() => { exportExcel(); }}>Get Excel</Button>}
          style={{ textAlign: 'center' }}
          headStyle={{ backgroundColor: '#69c0ff', border: 0 }}
        >
          <Form layout={"vertical"} form ={form} >
            <Row gutter={[24, 24]}>
              {/* <Col xs={{ span: 24 }} sm={{ span: 24 }} md={{ span: 6 }} lg={{ span: 6 }} xl={{ span: 6 }}>
                <Form.Item name="fromDate"
                  label="Date Range"
                  initialValue={undefined}
                  rules={[
                    {
                      required: true,
                      message: "select date range"
                    },
                  ]}>
                  <RangePicker onChange={EstimatedETDDate} />
                </Form.Item>
              </Col>
     */}
              <Col xs={{ span: 24 }} sm={{ span: 24 }} md={{ span: 6 }} lg={{ span: 6 }} xl={{ span: 4 }}>
                <Form.Item
                  name="employeeId"
                  label="Employee Name"
                  rules={[
                    {
                      required: false,
                      message: "Select valid Employee Name"
                    }
                  ]}>
                  <Select
                    showSearch
                    optionFilterProp="children"
                    filterOption={(input, option) => option.children.toLowerCase().indexOf(input.toLowerCase()) >= 0}
                    placeholder="Select Employee Name"
                    // onChange={}
                    allowClear
                    style={{ width: '100%' }}
                  >
                    {empData?.map(dropData => {
                      return <Option key={dropData.employeeId} value={dropData.employeeId}>{dropData.employeeName + '-' + dropData.employeeCode}</Option>;
                    })}
                  </Select>
                </Form.Item>
              </Col>
    
              {/* <Col xs={{ span: 24 }} sm={{ span: 24 }} md={{ span: 6 }} lg={{ span: 6 }} xl={{ span: 4 }}>
                <Form.Item
                  name="department"
                  label="Department"
                  rules={[
                    {
                      required: false,
                      message: "Select valid department"
                    }
                  ]}>
                  <Select
                    showSearch
                    optionFilterProp="children"
                    filterOption={(input, option) => option.children.toLowerCase().indexOf(input.toLowerCase()) >= 0}
                    placeholder="Select Department"
                    // onChange={}
                    allowClear
                    style={{ width: '100%' }}
                  >
                    {departmentData?.map(dropData => {
                      return <Option  value={dropData.deptId}>{dropData.deptName}</Option>;
                    })}
                  </Select>
                </Form.Item>
              </Col> */}
    
              <Col style={{ padding: '20px', marginTop: '30px' }}>
                <Button type="primary" style={{ marginRight: '4px' }} disabled={disable} onClick={() => getReportData()}>
                  Get Report
                </Button>
                <Button style={{ marginLeft: '5px' }} type="primary" htmlType="submit" onClick={onReset}> Reset </Button>
              </Col>
            </Row>
          </Form>
          <Table
            columns={columns}
            dataSource={reportData}
            // scroll={{ x: 1500, y: 500 }}
            bordered
            pagination={{
              onChange(current) {
                setPage(current);
              }
            }}
            onChange={onChange}
          />
        </Card>
      )

}
export default employeeReport;