import { AttendanceMonthRequest, MonthAttnDataModel, WorkingHrModel } from "@gtpl/shared-models/hrms";
import { Input, Button, Space, Form, Row, Col, Select, Card } 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, PlantsDropDown } from "@gtpl/shared-models/masters";
import { DepartmentService, UnitcodeService } from '@gtpl/shared-services/masters';
import moment from "moment";

/* eslint-disable-next-line */

export const WorkerMonthWiseIncentiveReport = () => {


  const attendanceService = new AttendanceService;
  const [attendanceData, setAttendanceData] = useState<MonthAttnDataModel[]>([]);
  const [searchText, setSearchText] = useState('');
  const [searchedColumn, setSearchedColumn] = useState('');
  const [month, setMonth] = useState<number>();
  const searchInput = useRef(null);
  const [page, setPage] = React.useState(1);
  const [filtersData, setFiltersData] = useState<MonthAttnDataModel[]>([]);
  const [departmentData, setDepartmentData] = useState<DepartmentDto[]>([]);
  const [plantData, setPlantData] = useState<PlantsDropDown[]>([]);
  const departmentService = new DepartmentService();
  const unitsService = new UnitcodeService();
  const [form] = Form.useForm();
  const { Option } = Select;

  useEffect(() => {
    getAllDepartments();
    getAllPlants();
  }, []);

  function handleMonth(value: number) {
    setMonth(value);
  }

  const getAttendanceData = () => {
    form.validateFields().then(values => {
      const empAttnReq = new AttendanceMonthRequest(values.year, values.month, values.department, values.unitName, '', values.category);
      attendanceService.getWorkerIncentiveReport(empAttnReq).then(res => {
        setAttendanceData([]);
        if (res.status) {
          setAttendanceData(res.data);
          setFiltersData(res.data);
        } else {
          setAttendanceData([]);
          setFiltersData([]);
          AlertMessages.getErrorMessage(res.internalMessage);
          return false;
        }
      }).catch(err => {
        setAttendanceData([]);
        setFiltersData([]);
        AlertMessages.getErrorMessage(err.message);
      })
    }).catch(err => console.log(err.message))

  }


  useEffect(() => {
    getFiltersDropdownData(filtersData);
  }, [filtersData])

  const getFiltersDropdownData = (filtersData) => {
    let employeesData: any[] = [];
    filtersData.forEach(element => {

      if (element.department) {
        employeesData.push(element.department)
      }
      if (element.unitName) {
        employeesData.push(element.unitName)
      }

    });
    //setEmployeeDetails(employeesData);
  }
  const searchData = () => {

    const employeeName = form.getFieldValue('employeeName');
    const department = form.getFieldValue('department');
    const unitName = form.getFieldValue('unitName')

    let selectedData = filtersData;
    if (employeeName) {
      selectedData = filtersData.filter(item => item.employeeName === employeeName)
    }
    if (department) {
      selectedData = selectedData.filter(item => item.department === department)
    }
    if (unitName) {
      selectedData = selectedData.filter(item => item.unitName === unitName)
    }
    setAttendanceData(selectedData);
  }

  const getAllPlants = () => {
    unitsService.getAllMainPlants().then((res) => {
      if (res.status) {
        setPlantData(res.data);
      } else {
        setPlantData([]);
      }
    }).catch(err => {
      AlertMessages.getErrorMessage(err.message);
      setPlantData([]);
    })
  }
  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 getDayHeaders = (data: MonthAttnDataModel[]) => {
    const dayHeaders = new Set<any>();
    console.log(data, 'dataaaaaaaa')
    data.forEach(rec => rec.dayStatus.forEach(date => {
      const dayOfWeek = moment(date.date).format('dddd');
      dayHeaders.add(date.day + "-" + dayOfWeek);
    }))
    return Array.from(dayHeaders);
  };

  const getEmpDayWiseAttendanceMap = (data: WorkingHrModel[]) => {
    const empDayWiseAttnMap = new Map<string, Map<number, string>>();
    data.forEach(rec => {
      if (!empDayWiseAttnMap.has(rec.employeeCode)) {
        empDayWiseAttnMap.set(rec.employeeCode, new Map<number, string>());
      }
      rec.dayStatus.forEach(date => {
        empDayWiseAttnMap.get(rec.employeeCode).set(date.day, date.hours);
      })
    });
    return empDayWiseAttnMap;
  }

  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 }}
        >
          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

  });

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

  const onReset = () => {
    form.resetFields();
    setAttendanceData([]);
  }

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

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

  let excelTitles: IExcelColumn[] = [];
  const renderReport = (data: MonthAttnDataModel[]) => {
    const dayHeaders = getDayHeaders(data);
    const dateWiseEmpAttendanceMap = getEmpDayWiseAttendanceMap(data);
    excelTitles = [
      { title: "Employee Code", dataIndex: "employeeCode" },
      { title: "Employee Name", dataIndex: "employeeName" },
      { title: "Department", dataIndex: "department" },
      { title: "Contractor Name", dataIndex: "contractorName" },
      // { title: "Unit", dataIndex: "unitName" },
      // { title: "Shift Code", dataIndex: "shift" },
    ];

    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: 105,
        ...getColumnSearchProps('employeeCode'),
        sorter: (a, b) => a.employeeCode.length - b.employeeCode.length,
        sortDirections: ['descend', 'ascend'],
      },
      {
        title: 'Employee Name',
        dataIndex: 'employeeName',
        width: 105,
        sorter: (a, b) => a.employeeName.length - b.employeeName.length,
        sortDirections: ['descend', 'ascend'],
        fixed: 'left',
        ...getColumnSearchProps('employeeName'),
      },

      {
        title: 'Department',
        dataIndex: 'department',
        width: 130,
        sorter: (a, b) => a.department?.length - b.department?.length,
        sortDirections: ['descend', 'ascend'],
        fixed: 'left',
        ...getColumnSearchProps('department'),
      },


    ];
    console.log(dayHeaders, 'dayHeadersdayHeaders')
    dayHeaders.forEach(day => {
      columns.push(
        {
          title: day,
          key: day,
          width: 90,
          align: 'center',
          render: (value, record: any, index) => {
            const empCode = record.employeeCode;
            return dateWiseEmpAttendanceMap.get(empCode).get(Number(day?.split('-')[0])) ? dateWiseEmpAttendanceMap.get(empCode).get(Number(day?.split('-')[0])) : '-';
          }
        }
      );
      excelTitles.push({
        title: day.toString(), dataIndex: "", render: (value: any, record: any) => {
          const empCode = record.employeeCode;
          return dateWiseEmpAttendanceMap.get(empCode).get(Number(day?.split('-')[0]));
        }
      });
    });

    columns.push(
      {
        title: 'Total Hours',
        dataIndex: 'totalAllHours',
        fixed: 'right',
        width: 70,
        render: (text, record) => {
          return <span>
            {record.totalAllHours ? record.totalAllHours : 0}
          </span>
        }
      },
    );

    excelTitles.push(
      {
        title: 'Total Hours',
        dataIndex: 'totalAllHours',
      },
    );

    return <Table columns={columns} bordered dataSource={data} size="small" scroll={{ x: 1500, y: 500 }}
      pagination={{
        onChange(current) {
          setPage(current);
        }
      }}
      onChange={onChange}
    />
  }

  const exportExcel = () => {
    const excel = new Excel();
    excel
      .addSheet('id')
      .addColumns(excelTitles)
      .addDataSource(attendanceData, { str2num: true })
      .saveAs('Monthwise-Attendance-Report.xlsx');
  }

  return (
    <Card
      title={<span style={{ color: 'white' }}>Worker Incentive Report</span>} extra={<Button onClick={() => { exportExcel(); }}>Get Excel</Button>}
      style={{ textAlign: 'center' }}
      headStyle={{ backgroundColor: '#69c0ff', border: 0 }}
    >
      <Form form={form} layout="horizontal">
        <Row gutter={22}>
          <Col xs={{ span: 24 }} sm={{ span: 24 }} md={{ span: 6 }} lg={{ span: 6 }} xl={{ span: 6 }}>
            <Form.Item label="Year" name='year' required={true}>
              <Select
                showSearch
                placeholder="Select Year"
              // onChange={handleMonth}
              >
                <Option value="2023">2023</Option>
                <Option value="2024">2024</Option>
                <Option value="2025">2025</Option>
                <Option value="2026">2026</Option>
              </Select>
            </Form.Item>

          </Col>
          <Col xs={{ span: 24 }} sm={{ span: 24 }} md={{ span: 6 }} lg={{ span: 6 }} xl={{ span: 6 }}>
            <Form.Item label="Month" name='month' required={true}>
              <Select
                showSearch
                placeholder="Select Month"
                onChange={handleMonth}
                optionFilterProp="children"
                filterOption={(input, option) =>
                  option.children.toLowerCase().includes(input.toLowerCase())
                }
              >
                <Option value="1">January</Option>
                <Option value="2">February</Option>
                <Option value="3">March</Option>
                <Option value="4">April</Option>
                <Option value="5">May</Option>
                <Option value="6">June</Option>
                <Option value="7">July</Option>
                <Option value="8">August</Option>
                <Option value="9">September</Option>
                <Option value="10">October</Option>
                <Option value="11">November</Option>
                <Option value="12">December</Option>
              </Select>
            </Form.Item>
          </Col>
          {/* <Col xs={{ span: 24 }} sm={{ span: 24 }} md={{ span: 6 }} lg={{ span: 6 }} xl={{ span: 6 }}>
            <Form.Item label="Category" name='category' required={true}>
              <Select
                showSearch
                placeholder="Select Category"

              >
                <Option value="In-House">In-House</Option>
                <Option value="NMR">NMR</Option>
              </Select>
            </Form.Item>
          </Col> */}
          <Col xs={{ span: 24 }} sm={{ span: 24 }} md={{ span: 4 }} lg={{ span: 6 }} xl={{ span: 6 }}>
            <Form.Item
              name="department"
              label="Department"
              rules={[
                {
                  required: false,
                  message: "Enter Your Department"
                }
              ]}>
              <Select
                showSearch
                //style={{ width: 210 }}
                placeholder="Select Department"
                dropdownMatchSelectWidth={false}
                allowClear
                filterOption={(input, option) =>
                  option.children.toLowerCase().indexOf(input.toLowerCase()) >= 0
                }
              >
                {departmentData.map((departmentData) => {
                  return <Option key={departmentData.deptId} value={departmentData.deptId}>{departmentData.deptName}</Option>
                })}
              </Select>
            </Form.Item>
          </Col>
          <Col xs={{ span: 24 }} sm={{ span: 24 }} md={{ span: 4 }} lg={{ span: 4 }} xl={{ span: 4 }} >
            <Form.Item
              name="unitName"
              label="Unit"
            >
              <Select
                showSearch
                optionFilterProp="children"
                filterOption={(input, option) => option.children.toLowerCase().indexOf(input.toLowerCase()) >= 0}
                placeholder="Select Unit"
                allowClear
                dropdownMatchSelectWidth={false}
                style={{ width: '100%' }}
                disabled={Number(localStorage.getItem('unit_id')) != 5 ? true : false}
              >
                {plantData.map(dropData => {
                  return <Option value={dropData.plantId}>{dropData.plantName}</Option>
                })}
              </Select>
            </Form.Item>
          </Col >
          <br />
          <br />
          <Col xs={{ span: 24 }} sm={{ span: 24 }} md={{ span: 6 }} lg={{ span: 6 }} xl={{ span: 3 }}>
            <Form.Item>
              <Button type="primary" htmlType="submit" onClick={() => getAttendanceData()}>
                Submit
              </Button>
            </Form.Item>
          </Col>

          <Col xs={{ span: 24 }} sm={{ span: 24 }} md={{ span: 6 }} lg={{ span: 6 }} xl={{ span: 1 }}>
            <Form.Item>
              <Button type="primary" htmlType="reset" onClick={() => onReset()}>
                Reset
              </Button>
            </Form.Item>
          </Col>
        </Row>
        <div>
          {renderReport(attendanceData)}
        </div>
      </Form>
    </Card>
  );
}
export default WorkerMonthWiseIncentiveReport;