import { Button, Card, Col, DatePicker, Form, Row, Select, Table } from 'antd';
import { Excel } from 'antd-table-saveas-excel';
import { AttendanceService } from "@gtpl/shared-services/hrms";
import React, { useEffect, useState } from 'react';
import { DepartmentService, HrmsEmpDetService } from '@gtpl/shared-services/masters';
import { DepartmentDto } from '@gtpl/shared-models/masters';
import { AlertMessages } from "@gtpl/shared-utils/alert-messages";
import { EmployeeWorkingHrsRequest } from "@gtpl/shared-models/hrms";
import moment from 'moment';


export const empWorkingHrs = () => {
  const [page, setPage] = useState<number>(1);
  const [pageSize, setPageSize] = useState<number>(10);
  const service = new AttendanceService();
  const departmentService = new DepartmentService();
  const [data, setData] = useState<any[]>([]);
  const [month, setMonth] = useState<number>();
  const [form] = Form.useForm();
  const { Option } = Select;
  const [departmentData, setDepartmentData] = useState<DepartmentDto[]>([]);
  const { RangePicker } = DatePicker;
  const [filterData, setFilterData] = useState([]);
  const [showCategory, setShowCategory] = useState(false);
  const hrmsEmpDetService = new HrmsEmpDetService();
  const [employeeData, setEmployeeData] = useState<any[]>([]);
  const [employeeName, setEmployeeName] = useState<any>();
  // const [showCategory, setShowCategory] = useState(false);
  const [selectedEmpType, setSelectedEmpType] = useState(null);
  const [selectedCategory, setSelectedCategory] = useState(null);
  const [filteredEmployeeData, setFilteredEmployeeData] = useState([]);
  //  const [filterData, setFilterData] = useState([]);



  useEffect(() => {
    //getInfo();
    getAllDepartments()
    //getAllActiveEmployees();
  }, []);

  useEffect(() => {
    let filteredData = employeeData;

    if (selectedEmpType) {
      filteredData = filteredData.filter(emp => emp.employeeType === selectedEmpType);
      if (selectedEmpType === 'Labour Form' && selectedCategory) {
        filteredData = filteredData.filter(emp => emp.employeeCategory === selectedCategory);
      }
    }

    setFilteredEmployeeData(filteredData);
  }, [selectedEmpType, selectedCategory, employeeData]);

  // const getInfo = () => {
  //   const deptId = form.getFieldValue('department')
  //   const empAttnReq = new EmployeeWorkingHrsRequest(deptId);


  //   service.getEmployeeWorkingHrs(empAttnReq).then((res) => {
  //     if (res.status) {
  //       setData(res.data);
  //     }
  //   });
  // };

  const getAllActiveEmployees = () => {
    hrmsEmpDetService.getAllActiveEmployees().then(res => {
      if (res.status) {
        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 getInfo = () => {
    form.validateFields().then(values => {
      const { department, logDate, employeeName, category, empType } = values;
      const deptId = department;
      const code = employeeName
      let logDateStartDate, logDateEndDate;

      if (logDate !== undefined && logDate.length === 2) {
        logDateStartDate = logDate[0].format('YYYY-MM-DD');
        logDateEndDate = logDate[1].format('YYYY-MM-DD');
      }
      const empCategory = category;
      const employeeType = empType;
      const empAttnReq = new EmployeeWorkingHrsRequest(deptId, logDateStartDate, logDateEndDate, code, empCategory, employeeType);

      service.getEmployeeWorkingHrs(empAttnReq).then((res) => {
        if (res.status) {
          setData(res.data);
          setFilterData(res.data);
        } else {
          setData([]);
          setFilterData([])
          AlertMessages.getErrorMessage(res.internalMessage);
        }
      }).catch(err => {
        setData([]);
        setFilterData([]);
        AlertMessages.getErrorMessage(err.message);
      });
    });
  };

  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 onFinish = (values: any) => {
    getInfo();
  };

  const onReset = () => {
    form.resetFields();
    setShowCategory(false)
    setSelectedEmpType(null);
    setSelectedCategory(null);
    setData(null)
  };

  const columns: any[] = [
    {
      title: 'S No',
      key: 'sNo',
      responsive: ['sm'],
      width: 70,
      fixed: "left",
      render: (text, object, index) => (page - 1) * pageSize + (index + 1),
    },


    {
      title: 'Employee Code',
      dataIndex: 'employeeCode',
      fixed: "left",
      width: 110,
      render: (text: any, record: any) => {
        return record.employeeCode ? record.employeeCode : '-';
      },

    },
    {
      title: 'Employee Names',
      dataIndex: 'employeeName',
      width: 110,
      fixed: "left",
      render: (text: any, record: any) => {
        return record.employeeName ? record.employeeName : '-';
      },

    },
    {
      title: 'Department Names',
      dataIndex: 'deptName',
      width: 110,
      fixed: "left",
      render: (text: any, record: any) => {
        return record.deptName ? record.deptName : '-';
      },

    },
    {
      title: 'Log Date',
      dataIndex: 'logDate',
      fixed: "left",
      width: 110,
      render: (text: any, record: any) => {
        return record.logDate ? record.logDate : '-';
      },


    },

    { 
      title: 'In Time1', 
      dataIndex: 'inTime1',
      width: 90,
      render:(text)=> text ? text : '00:00'
    },
    { title: 'Out Time1', dataIndex: 'outTime1', width: 90, render:(text)=> text ? text : '00:00' },
    { title: 'Duration1', dataIndex: 'duration1', width: 90, render:(text)=> text ? text : '00:00' },
    { title: 'In Time2', dataIndex: 'inTime2', width: 90, render:(text)=> text ? text : '00:00' },
    { title: 'Out Time2', dataIndex: 'outTime2', width: 90, render:(text)=> text ? text : '00:00' },
    { title: 'Duration2', dataIndex: 'duration2', width: 90, render:(text)=> text ? text : '00:00'},
    { title: 'In Time3', dataIndex: 'inTime3', width: 90, render:(text)=> text ? text : '00:00'},
    { title: 'Out Time3', dataIndex: 'outTime3', width: 90, render:(text)=> text ? text : '00:00'},
    { title: 'Duration3', dataIndex: 'duration3', width: 90, render:(text)=> text ? text : '00:00' },
    { title: 'In Time4', dataIndex: 'inTime4', width: 90, render:(text)=> text ? text : '00:00' },
    { title: 'Out Time4', dataIndex: 'outTime4', width: 90, render:(text)=> text ? text : '00:00' },
    { title: 'Duration4', dataIndex: 'duration4', width: 90, render:(text)=> text ? text : '00:00' },
    //{ title: 'In Time5', dataIndex: 'inTime5', width: 90, render: (text: any, record: any) => { return record.inTime5 ? record.inTime5 : '00:00'; }, },
    //{ title: 'Out Time5', dataIndex: 'outTime5', width: 90, render: (text: any, record: any) => { return record.outTime5 ? record.outTime5 : '00:00'; }, },
    //{ title: 'Duration5', dataIndex: 'duration5', width: 90, render: (text: any, record: any) => { return record.duration5 ? record.duration5 : '00:00'; }, },
    //{ title: 'In Time6', dataIndex: 'inTime6', width: 90, render: (text: any, record: any) => { return record.inTime6 ? record.inTime6 : '00:00'; }, },
    //{ title: 'Out Time6', dataIndex: 'outTime6', width: 90, render: (text: any, record: any) => { return record.outTime6 ? record.outTime6 : '00:00'; }, },
    //{ title: 'Duration6', dataIndex: 'duration6', width: 90, render: (text: any, record: any) => { return record.duration6 ? record.duration6 : '00:00'; }, },
    { title: 'Total Hours', dataIndex: 'totalHours', width: 90, fixed: "right" },

  ];

  let i = 1;
  const exceldata = [

    {
      title: 'S No', dataIndex: 'sNo',
      render: (text, object, index) => (page - 1) * pageSize + (index + 1),
      width: 60,

    },

    {
      title: 'Employee Code',
      dataIndex: 'employeeCode',
      render: (text: any, record: any) => {
        return record.employeeCode ? record.employeeCode : '-';
      },
    },
    {
      title: 'Employee Names',
      dataIndex: 'employeeName',
      render: (text: any, record: any) => {
        return record.employeeName ? record.employeeName : '-';
      },
    },
    {
      title: 'Department Names',
      dataIndex: 'deptName',
      render: (text: any, record: any) => {
        return record.deptName ? record.deptName : '-';
      },
    },
    {
      title: 'Log Date',
      dataIndex: 'logDate',
      render: (text: any, record: any) => {
        return record.logDate ? record.logDate : '-';
      },
    },
    {
      title: 'In Time1',
      dataIndex: 'inTime1',
      render: (text: any, record: any) => { return record.inTime1 ? record.inTime1 : '00:00'; },
    },
    { title: 'Out Time1', dataIndex: 'outTime1', render: (text: any, record: any) => { return record.outTime1 ? record.outTime1 : '00:00'; }, },
    {
      title: 'Duration1', dataIndex: 'duration1',

      render: (text: any, record: any) => {
        if (record.inTime1 && record.outTime1 && record.inTime1 !== '00:00:00' && record.outTime1 !== '00:00:00') {
          // Calculate duration here if both inTime2 and outTime2 are valid
          const inTime = moment(record.inTime1, 'HH:mm:ss');
          const outTime = moment(record.outTime1, 'HH:mm:ss');

          // Ensure outTime is after inTime
          if (outTime.isBefore(inTime)) {
            return '-';
          }

          // Calculate duration in minutes
          const durationMinutes = outTime.diff(inTime, 'minutes');

          // Only show positive durations
          if (durationMinutes < 0) {
            return '-';
          }

          // Convert minutes to HH:mm format
          const hours = Math.floor(durationMinutes / 60);
          const minutes = durationMinutes % 60;
          const duration = `${hours.toString().padStart(2, '0')}:${minutes.toString().padStart(2, '0')}`;

          // Return the calculated duration
          return duration;
        } else {
          // If either inTime2 or outTime2 is invalid or not provided, show '-'
          return '-';
        }
      },
    },
    { title: 'In Time2', dataIndex: 'inTime2', render: (text: any, record: any) => { return record.inTime2 ? record.inTime2 : '00:00'; }, },
    { title: 'Out Time2', dataIndex: 'outTime2', render: (text: any, record: any) => { return record.outTime2 ? record.outTime2 : '00:00'; }, },
    {
      title: 'Duration2',
      dataIndex: 'duration2',
      render: (text: any, record: any) => {
        if (record.inTime2 && record.outTime2 && record.inTime2 !== '00:00:00' && record.outTime2 !== '00:00:00') {
          // Calculate duration here if both inTime2 and outTime2 are valid
          const inTime = moment(record.inTime2, 'HH:mm:ss');
          const outTime = moment(record.outTime2, 'HH:mm:ss');

          // Ensure outTime is after inTime
          if (outTime.isBefore(inTime)) {
            return '-';
          }

          // Calculate duration in minutes
          const durationMinutes = outTime.diff(inTime, 'minutes');

          // Only show positive durations
          if (durationMinutes < 0) {
            return '-';
          }

          // Convert minutes to HH:mm format
          const hours = Math.floor(durationMinutes / 60);
          const minutes = durationMinutes % 60;
          const duration = `${hours.toString().padStart(2, '0')}:${minutes.toString().padStart(2, '0')}`;

          // Return the calculated duration
          return duration;
        } else {
          // If either inTime2 or outTime2 is invalid or not provided, show '-'
          return '-';
        }
      },
    },


    { title: 'In Time3', dataIndex: 'inTime3', render: (text: any, record: any) => { return record.inTime3 ? record.inTime3 : '00:00'; }, },
    { title: 'Out Time3', dataIndex: 'outTime3', render: (text: any, record: any) => { return record.outTime3 ? record.outTime3 : '00:00'; }, },
    { title: 'Duration3', dataIndex: 'duration3', render: (text: any, record: any) => { return record.duration3 ? record.duration3 : '00:00'; }, },
    //{ title: 'In Time4', dataIndex: 'inTime4', render: (text: any, record: any) => { return record.inTime4 ? record.inTime4 : '00:00'; }, },
    //{ title: 'Out Time4', dataIndex: 'outTime4', render: (text: any, record: any) => { return record.outTime4 ? record.outTime4 : '00:00'; }, },
    //{ title: 'Duration4', dataIndex: 'duration4', render: (text: any, record: any) => { return record.duration4 ? record.duration4 : '00:00'; }, },
    //{ title: 'In Time5', dataIndex: 'inTime5', render: (text: any, record: any) => { return record.inTime5 ? record.inTime5 : '00:00'; }, },
    //{ title: 'Out Time5', dataIndex: 'outTime5', render: (text: any, record: any) => { return record.outTime5 ? record.outTime5 : '00:00'; }, },
    //{ title: 'Duration5', dataIndex: 'duration5', render: (text: any, record: any) => { return record.duration5 ? record.duration5 : '00:00'; }, },
    //{ title: 'In Time6', dataIndex: 'inTime6', render: (text: any, record: any) => { return record.inTime6 ? record.inTime6 : '00:00'; }, },
    //{ title: 'Out Time6', dataIndex: 'outTime6', render: (text: any, record: any) => { return record.outTime6 ? record.outTime6 : '00:00'; }, },
    //{ title: 'Duration6', dataIndex: 'duration6', render: (text: any, record: any) => { return record.duration6 ? record.duration6 : '00:00'; }, },
    { title: 'Total Hours', dataIndex: 'totalHours', render: (text: any, record: any) => { return record.totalHours ? record.totalHours : '00:00'; }, },

  ];

  const exportExcel = () => {
    const excel = new Excel();
    excel
      .addSheet('Employee Working Hours')
      .addColumns(columns)
      .addDataSource(data, { str2num: true })
      .saveAs('emp-working-hrs.xlsx');
  };


  const handleEmployeeTypeChange = (value) => {
    form.resetFields(['employeeName']);
    getAllActiveEmployees();
    setSelectedEmpType(value);
    setSelectedCategory(null);
    setShowCategory(value === 'Labour Form');
    setEmployeeName('Labour Form')
    if (value !== 'Labour Form') {
      form.setFieldsValue({ category: undefined });
    }
  };

  const handleCategoryChange = (value) => {
    form.resetFields(['employeeName']);
    setSelectedCategory(value);
  };

  console.log(data, 'kkkkkkkkkkkkkkkkkkkkk')
  return (
    <Card
      title={<span style={{ color: 'white' }}>Employee Working Hours</span>}
      extra={<Button onClick={exportExcel}>Get Excel</Button>}
      style={{ textAlign: 'center' }}
      headStyle={{ backgroundColor: '#69c0ff', border: 0 }}
    >
      <Form form={form} layout="vertical" onFinish={onFinish}>
        <Row gutter={24}>
          <Col xs={24} sm={24} md={6} lg={6} xl={6}>
            <Form.Item label="Log Date" name="logDate" rules={[{ required: true, message: 'Log Date is required' }]}>
              <RangePicker />
            </Form.Item>
          </Col>

          <Col xs={24} sm={24} md={6} lg={6} xl={6}>
            <Form.Item label="Employee Type" name="empType" rules={[{ required: true, message: 'Employee Type is required' }]}>
              <Select
                showSearch
                placeholder="Select Employee Type"
                onChange={handleEmployeeTypeChange}
              >
                <Option value="Salaried Form">Salaried Form</Option>
                <Option value="Labour Form">Labour Form</Option>
              </Select>
            </Form.Item>
          </Col>

          {showCategory && (
            <Col xs={24} sm={24} md={6} lg={6} xl={6}>
              <Form.Item
                label="Category"
                name="category"
                rules={[{ required: true, message: 'Please select a category' }]}
              >
                <Select
                  showSearch
                  placeholder="Select Category"
                  onChange={handleCategoryChange}
                >
                  <Option value="In-House">In-House</Option>
                  <Option value="NMR">NMR</Option>
                </Select>
              </Form.Item>
            </Col>
          )}

          <Col xs={24} sm={24} md={6} lg={6} xl={6}>
            <Form.Item
              name="employeeName"
              label="Employee Name"
            >
              <Select
                showSearch
                optionFilterProp="children"
                filterOption={(input, option) => option.children.toLowerCase().indexOf(input.toLowerCase()) >= 0}
                placeholder="Select Employee Name"
                allowClear
                dropdownMatchSelectWidth={false}
              >
                {filteredEmployeeData.map(dropData => (
                  <Option key={dropData.employeeCode} value={dropData.employeeCode}>
                    {dropData.employeeName + " " + dropData.employeeLastName + '-' + dropData.employeeCode}
                  </Option>
                ))}
              </Select>
            </Form.Item>
          </Col>

          <Col xs={24} sm={24} md={6} lg={6} xl={6}>
            <Form.Item
              name="department"
              label="Department"
            >
              <Select
                showSearch
                placeholder="Select Department"
                allowClear
                filterOption={(input, option) =>
                  option.children.toLowerCase().indexOf(input.toLowerCase()) >= 0
                }
              >
                {departmentData.map(departmentData => (
                  <Option key={departmentData.deptId} value={departmentData.deptId}>
                    {departmentData.deptName}
                  </Option>
                ))}
              </Select>
            </Form.Item>
          </Col>

          <Col xs={24} sm={24} md={6} lg={6} xl={3}>
            <Form.Item>
              <Button type="primary" htmlType="submit">
                Submit
              </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>
        <Table
          className="custom-table-wrapper"
          scroll={{ x: "max-content", y: 450 }}
          columns={columns}
          dataSource={data}
          size="small"
          pagination={{
            pageSize: 10,
            onChange(current, pageSize) {
              setPage(current);
              setPageSize(pageSize);
            },
          }}
        />
      </Form>
    </Card>
  );
};


export default empWorkingHrs;