import { AttendanceMonthRequest, MonthAttnDataModel, ShiftAttendanceRequest } from "@gtpl/shared-models/hrms";
import { Input, Button, Space, Form, Row, Col, Select, Card, DatePicker } from "antd";
import Table, { ColumnProps } from "antd/lib/table";
import React, { useState, useRef, useEffect } from "react";
import { SearchOutlined } from '@ant-design/icons';
import Highlighter from 'react-highlight-words';
import { AttendanceService } from "@gtpl/shared-services/hrms";
import { AlertMessages } from "@gtpl/shared-utils/alert-messages";
import { Excel } from 'antd-table-saveas-excel';
import { IExcelColumn } from "antd-table-saveas-excel/app";
import { DepartmentDto, HrmsEmployeeDetailsDto, HrmsEmployeeRequest, PlantsDropDown } from "@gtpl/shared-models/masters";
import { DepartmentService, HrmsEmpDetService, UnitcodeService } from '@gtpl/shared-services/masters';
import moment from "moment";

/* eslint-disable-next-line */

export const MiscellaneousReportGrid = () => {


  const attendanceService = new AttendanceService;
  const employeeService = new HrmsEmpDetService();
  const [reportData, setReportData] = useState<any[]>([]);
  const [searchText, setSearchText] = useState('');
  const [searchedColumn, setSearchedColumn] = useState('');
  const searchInput = useRef(null);
  const [page, setPage] = React.useState(1);
  const [filtersData, setFiltersData] = useState<any[]>([]);
  const [selectedFromDate, setSelectedFromDate] = useState(undefined);
  const [selectedToDate, setSelectedToDate] = useState(undefined);
  const [employeeData, setEmployeeData] = useState<HrmsEmployeeDetailsDto[]>([]);
  const [form] = Form.useForm();
  const { Option } = Select;
  const { RangePicker } = DatePicker;
  useEffect(() => {
    getAllActiveEmployees();
  }, []);


  const getAllActiveEmployees = () => {
    employeeService.getAllActiveEmployees().then(res => {
      if (res.status) {
        const filteredEmployees = res.data.filter(employee => employee.employeeType === 'Salaried Form');
        setEmployeeData(filteredEmployees);
        // setEmployeeData(res.data);
      } else {
        if (res.intlCode) {
          setEmployeeData([]);
          AlertMessages.getErrorMessage(res.internalMessage);
        } else {
          AlertMessages.getErrorMessage(res.internalMessage);
        }
      }
    }).catch(err => {
      setEmployeeData([]);
      AlertMessages.getErrorMessage(err.message);
    })
  }

  const getAttendanceData = () => {
    const req = new ShiftAttendanceRequest(selectedFromDate, selectedToDate, '', form.getFieldValue('employeeId'));
    attendanceService.getLateAndEarlyEntryEmployees(req).then(res => {
      setReportData([]);
      if (res.status) {
        setReportData(res.data);
        setFiltersData(res.data);
      } else {
        setReportData([]);
        setFiltersData([]);
        AlertMessages.getErrorMessage(res.internalMessage);
        return false;
      }
    }).catch(err => {
      setReportData([]);
      setFiltersData([]);
      AlertMessages.getErrorMessage(err.message);
    })
  }

  const EstimatedDate = (value) => {
    if (value) {
      const fromDate = new Date(value[0].format('YYYY-MM-DD'));
      const toDate = new Date(value[1].format('YYYY-MM-DD'));
      setSelectedFromDate(fromDate);
      setSelectedToDate(toDate);
    } else {
      setSelectedFromDate(null);
      setSelectedToDate(null);
    }
  }


  const getColumnSearchProps = dataIndex => ({
    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 }}
        >
          Get Report
        </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

  });

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

  const onReset = () => {
    form.resetFields();
    setReportData([]);
  }
  const onFocus = () => {
    console.log('focus');
  }

  const onSearch = (val) => {
    console.log('search:', val);
  }

  const onBlur = () => {
    console.log('blur');
  }

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

  const onChange = (pagination, filters, sorter, extra) => {
    console.log('params', pagination, filters, sorter, extra);
  }



  const columns: ColumnProps<any>[] = [
    {
      title: 'S.No',
      width: 55,
      fixed: 'left',
      render: (text, object, index) => (page - 1) * 10 + (index + 1)

    },
    {
      title: 'Employee Code',
      dataIndex: 'employeeCode',
      fixed: 'left',
      width: 110,
      ...getColumnSearchProps('employeeCode'),
      sorter: (a, b) => a.employeeCode.length - b.employeeCode.length,
      sortDirections: ['descend', 'ascend'],
    },
    {
      title: 'Employee Name',
      dataIndex: 'employeeName',
      width: 115,
      sorter: (a, b) => a.employeeName.length - b.employeeName.length,
      sortDirections: ['descend', 'ascend'],
      fixed: 'left',
      ...getColumnSearchProps('employeeName'),
    },

    {
      title: 'Date',
      dataIndex: 'attendanceDate',
      fixed: 'left',
      render: (text) => moment(text).format('YYYY-MM-DD')
      // ...getColumnSearchProps('attendanceDate'),
      // sorter: (a, b) => a.attendanceDate.length - b.attendanceDate.length,
      // sortDirections: ['descend', 'ascend'],

    },
    {
      title: 'Status',
      dataIndex: 'present_status',
    },
    {
      title: 'Shift',
      dataIndex: 'shift',
    },
    {
      title: 'In Time',
      dataIndex: 'inTime',
      render: (text: any, record: any) => {
        return record.inTime ? moment(record.inTime).format('HH:mm:ss') : 'NIP';
      },
    },
    {
      title: 'Out Time',
      dataIndex: 'outTime',
      render: (text: any, record: any) => {
        return record.inTime ? moment(record.outTime).format('HH:mm:ss') : 'NOP';
      },
    },
    {
      title: 'Late Entry',
      dataIndex: 'lateEntry',
      sorter: (a, b) => a.lateEntry?.length - b.lateEntry?.length,
      sortDirections: ['descend', 'ascend'],
    },
    {
      title: 'Early Exit ',
      dataIndex: 'earlyExit',
      sorter: (a, b) => a.earlyExit?.length - b.earlyExit?.length,
      sortDirections: ['descend', 'ascend'],
    },
  ];

  let i = 1;
  const exceldata = [

    {
      title: 'S No', dataIndex: 'sNo', render: (text, object, index) => {
        return index + 1
      },
      width: 60,

    },

    {
      title: 'Employee Code',
      dataIndex: 'employeeCode',
      render: (text: any, record: any) => {
        return record.employeeCode ? record.employeeCode : '-';
      },
    },
    {
      title: 'Employee Name',
      dataIndex: 'employeeName',
      render: (text: any, record: any) => {
        return record.employeeName ? record.employeeName : '-';
      },
    },
    {
      title: 'Date',
      dataIndex: 'attendanceDate',
      render: (text: any, record: any) => {
        return record.attendanceDate ? moment(record.attendanceDate).format('YYYY-MM-DD') : '-';
      },
    },
    {
      title: 'Status',
      dataIndex: 'present_status',
      render: (text: any, record: any) => {
        return record.present_status ? record.present_status : '-';
      },
    },
    {
      title: 'Shift',
      dataIndex: 'shift',
      render: (text: any, record: any) => {
        return record.shift ? record.shift : '-';
      },
    },
    {
      title: 'In Time',
      dataIndex: 'inTime',
      render: (text: any, record: any) => {
        return record.inTime ? moment(record.inTime).format('HH:mm:ss') : 'NIP';
      },
    },
    {
      title: 'Out Time',
      dataIndex: 'outTime',
      render: (text: any, record: any) => {
        return record.inTime ? moment(record.inTime).format('HH:mm:ss') : 'NOP';
      },
    },
    {
      title: 'Late Entry',
      dataIndex: 'lateEntry',
      render: (text: any, record: any) => {
        return record.lateEntry ? record.lateEntry : '-';
      },
    },
    {
      title: 'Early Exit ',
      dataIndex: 'earlyExit',
      render: (text: any, record: any) => {
        return record.earlyExit ? record.earlyExit : '-';
      },
    },

  ];

  const exportExcel = () => {
    const excel = new Excel();
    excel
      .addSheet('Miscellaneous')
      .addColumns(exceldata)
      .addDataSource(reportData, { str2num: true })
      .saveAs('Miscellaneous_report.xlsx');
  };


  return (
    <Card
      title={<span style={{ color: 'white' }}>Miscellaneous Report</span>} extra={<Button onClick={exportExcel}>Get Excel</Button>}
      style={{ textAlign: 'center' }}
      headStyle={{ backgroundColor: '#69c0ff', border: 0 }}
    >
      <Form form={form} layout="horizontal">
        <Row gutter={24}>
          <Col xs={24} sm={24} md={12} lg={8} xl={8}>
            <Form.Item
              name="attendanceDate"
              label="Log Date"
              rules={[{ required: false, message: "Missing Created Date" }]}
            >
              <RangePicker onChange={EstimatedDate} />
            </Form.Item>
          </Col>
          <Col xs={24} sm={24} md={12} lg={8} xl={8}>
            <Form.Item
              name="employeeId"
              label="Employee Name"
              rules={[{ required: false, message: "name is required" }]}
            >
              <Select
                showSearch
                placeholder="Select Employee Name"
                optionFilterProp="children"
                onFocus={onFocus}
                onBlur={onBlur}
                onSearch={onSearch}
                filterOption={(input, option) =>
                  option.children.toLowerCase().indexOf(input.toLowerCase()) >= 0
                }
              >
                {employeeData.map((employeeData) => (
                  <Option key={employeeData.employeeId} value={employeeData.employeeId}>
                    {`${employeeData.employeeName} ${employeeData.employeeLastName}`}
                  </Option>
                ))}
              </Select>
            </Form.Item>
          </Col>
          <Col xs={24} sm={24} md={6} lg={6} xl={3}>
            <Form.Item>
              <Button type="primary" htmlType="submit" onClick={() => getAttendanceData()}>
                Get Report
              </Button>
            </Form.Item>
          </Col>
          <Col xs={24} sm={24} md={6} lg={6} xl={1}>
            <Form.Item>
              <Button type="primary" htmlType="reset" onClick={() => onReset()}>
                Reset
              </Button>
            </Form.Item>
          </Col>
        </Row>
      </Form>

      <Table
        rowKey={record => record.saleOrderId}
        columns={columns}
        dataSource={reportData}
        pagination={{
          onChange(current) {
            setPage(current);
          }
        }}
        onChange={onChange}
        scroll={{ x: 1500, y: 500 }}
        bordered
      />
    </Card >
  );
}
export default MiscellaneousReportGrid;