import React, { useState } from 'react';
import { Button, Card, Col, DatePicker, Form, Row, Spin, message } from "antd";
import { RangePickerProps } from "antd/es/date-picker";
import dayjs from 'dayjs';
import { UndoOutlined } from "@ant-design/icons";
import { PayRollRequest } from "@gtpl/shared-models/hrms";
import { PayrollProcessServices } from "@gtpl/shared-services/hrms"


export const PayrollGeneration = () => {
  const [form] = Form.useForm();
  const service = new PayrollProcessServices()
  const [submitDisable, setSubmitDisable] = useState<boolean>(false);
  const [isLoading, setIsLoading] = useState(false);
  const disabledDate: RangePickerProps['disabledDate'] = (current) => {
    // Can not select days before today and today
    return current && current > dayjs().endOf('day');
  };

  const onGenerate = () => {
    setIsLoading(true)
    setSubmitDisable(true)
    const req = new PayRollRequest()
    if (form.getFieldValue('month') != undefined) {
      req.month = form.getFieldValue('month').format('YYYYMM')
    }
    service.generatePayRoll(req).then(res => {
      if (res.status) {
        setIsLoading(false)
        setSubmitDisable(false)
        // navigate('/employee-payroll',{state:{month:form.getFieldValue('month').format('YYYYMM')}})
        message.success(res.internalMessage)
      } else {
        setIsLoading(false)
        setSubmitDisable(false)
        message.error(res.internalMessage)
      }
    })
  }

  const onReset = () => {
    setSubmitDisable(false)
    form.resetFields()
  }

  return (
    <>

      <Card title={<span style={{ color: 'white' }}>Payroll Generation</span>}
        style={{ textAlign: 'center' }} headStyle={{ backgroundColor: '#45c8f6' }}>
        <Form form={form} layout="vertical"
          onFinish={onGenerate}
        >
          <Row gutter={24}>
            <Col xs={{ span: 24 }} sm={{ span: 24 }} md={{ span: 8 }} lg={{ span: 6 }} xl={{ span: 4 }}>
              <Form.Item name='month' label='Payroll Month'>
                <DatePicker picker='month' style={{ width: '100%' }} disabledDate={disabledDate} />
              </Form.Item>
            </Col>
            <Col span={2}>
              <Form.Item>
                <Button htmlType="submit" type="primary" style={{ marginTop: '23px' }} disabled={submitDisable}>Generate</Button>
              </Form.Item>
            </Col>
            <Col span={1}>
              <Form.Item>
                <Button danger icon={<UndoOutlined />} onClick={onReset} style={{ marginTop: '23px' }}>Reset</Button>
              </Form.Item>
            </Col>
          </Row>
        </Form>
        {/* {isLoading ? (<div className='loader'>
        <Row justify='space-around' className='row'>
            <Spin size='large' />
        </Row>
    </div>) : (<></>)} */}
      </Card>
    </>
  )
}

export default PayrollGeneration;