import React, { useEffect, useState } from 'react';
import { Button, Card,Drawer,Form,Row,Col,Alert, Anchor,Spin} from 'antd';
import { useIntl, FormattedDate} from 'react-intl'
import { render } from 'react-dom';
import { AlertMessages} from '@gtpl/shared-utils/alert-messages';
import './employee-cashbook-pages.css';
import {CashbookDto,CashbookDtoDefault} from '@gtpl/shared-models/gtpl';
import { EmployeeCashbookService} from '@gtpl/shared-services/attendance';
import { EmployeeCashbookGrid } from '@gtpl/pages/attendance-management/attendance-management-components/employee-cashbook-grid';
import { EmployeeCashbookForm } from '@gtpl/pages/attendance-management/attendance-management-components/employee-cashbook-form';

/* eslint-disable-next-line */
export interface EmployeeCashbookPagesProps {}

export function EmployeeCashbookPages(
  props: EmployeeCashbookPagesProps
) {
  const [drawerVisible, setdrawerVisible] = useState<boolean>(false);
  const [isNewForm, setisNewForm] = useState<boolean>(true);
  const [viewOnly, setViewOnly] = useState(true);
  const [cashbookData, setCashbookData] = useState<CashbookDto[]>([])
  const [selectedEmployeePayments, setSelectedEmployeePayments] = useState<any>(CashbookDtoDefault)
  const service = new EmployeeCashbookService;
  const { Link } = Anchor;
  // const {formatMessage:fm}= useIntl()
  const OpenFormTocreateRecord = () => {
    const duplicatedState = JSON.parse(JSON.stringify(CashbookDtoDefault));
    setisNewForm(true);
    setSelectedEmployeePayments(duplicatedState);
    setdrawerVisible(true);
    setViewOnly(false);
  }
  useEffect(() => {getAllEmployeesPaymentsData();}, [])

  const getAllEmployeesPaymentsData= () => {
    service.getAllEmployeeCashbookDetails().then(res => {
      console.log(res.data);
      if (res.status) {setCashbookData(res.data);
      } else {
        if (res.intlCode) {
          setCashbookData([]);
            AlertMessages.getErrorMessage(res.internalMessage);
        } else {
         AlertMessages.getErrorMessage(res.internalMessage);
        }
      }
    }).catch(err => {
      AlertMessages.getErrorMessage(err.message);
      setCashbookData([]);
    })
  }
  const viewCashbook = (cashbookDto: CashbookDto, viewOnly: boolean = true) => {
    console.log(cashbookDto);
    setisNewForm(false);
    setSelectedEmployeePayments(cashbookDto);
    setdrawerVisible(true);
    setViewOnly(viewOnly);
  }
  const deleteCashbook = (cashbookDto: CashbookDto) => {
    cashbookDto.status=cashbookDto.status?false:true;
    service.updateCashbookStatus(cashbookDto).then(res => { console.log(res);
      if (res.status) {
        getAllEmployeesPaymentsData();
        AlertMessages.getSuccessMessage('Success'); 
      } else {
        if (res.intlCode) {
          AlertMessages.getErrorMessage(res.internalMessage);
        } else {
          AlertMessages.getErrorMessage(res.internalMessage);
        }
      }
    }).catch(err => {
      AlertMessages.getErrorMessage(err.message);
    })
  }

  const saveCashbook = (cashbookDto: CashbookDto) => {
    console.log(cashbookData);
    cashbookDto.cashbookId=0;
    cashbookDto.status=true;
    cashbookDto.createdUser=JSON.parse(localStorage.getItem('userid'));
    service.createCashbook(cashbookDto).then(res => {
      if (res.status) {
        AlertMessages.getSuccessMessage('Payment Created Successfully');
        getAllEmployeesPaymentsData();
        setdrawerVisible(false);
      } else {
        if (res.intlCode) {
          AlertMessages.getErrorMessage(res.internalMessage);
        } else {
          AlertMessages.getErrorMessage(res.internalMessage);
        }
      }
    }).catch(err => {
      AlertMessages.getErrorMessage(err.message);
    })
  }

  const updateCashbook = (cashbookDto: CashbookDto) => {
    cashbookDto.updatedUser=JSON.parse(localStorage.getItem('userid'));
    service.updateCashbook(cashbookDto).then(res => { console.log(res);
      if (res.status) {
        AlertMessages.getSuccessMessage('Updated Successfully');
        getAllEmployeesPaymentsData();
        setdrawerVisible(false);
      } else {
        if (res.intlCode) {
          AlertMessages.getErrorMessage(res.internalMessage);
        } else {
          AlertMessages.getErrorMessage(res.internalMessage);
        }
      }
    }).catch(err => {
      AlertMessages.getErrorMessage(err.message);
    })
  }
  const closeDrawer = () => { setdrawerVisible(false);}
  let viewPortwidth = window.innerWidth;
  const [loading, setLoading] = useState(true)
  useEffect(() => {
    setTimeout(() => setLoading(false), 1000)
  }, [])
  return (
    <>
    {loading === false ? (
    <><Anchor affix={false}>
          <Link href="#/dashboard" title="Dashboard" />
        </Anchor><Card bodyStyle={{ overflow: 'auto' }} title={'Payments : ' + cashbookData.length + ', Active ' + cashbookData.filter(el => el.status).length + ' | In-Active ' + cashbookData.filter(el => el.status == false).length} extra={<Button type="primary" onClick={() => { OpenFormTocreateRecord(); } } style={{ float: 'right', display: "block" }}>Create</Button>}>
            <EmployeeCashbookGrid viewCashbook={viewCashbook} deleteCashbook={deleteCashbook} cashbookData={cashbookData} />
          </Card>
          <Drawer bodyStyle={{ paddingBottom: 80 }} title='Employee Cashbook Form' width={viewPortwidth > 768 ? '50%' : '85%'}
            onClose={closeDrawer} visible={drawerVisible} closable={true}>
            <Card headStyle={{ textAlign: 'center', fontWeight: 500, fontSize: 16 }} title="Cashbook Details" size='small'>
              <EmployeeCashbookForm key={Date.now()}
                cashbookDto={selectedEmployeePayments}
                saveCashbook={saveCashbook}
                updateCashbook={updateCashbook}
                viewOnly={viewOnly}
                closeForm={closeDrawer} />
            </Card>
          </Drawer>
          </>
 ): (
  <div className="spins">
  <Spin size="large"/>
  </div>
)}
    </>
  )
}

export default EmployeeCashbookPages;