import React, { useEffect, useState } from 'react';
import { CostcenterService, ProjectService, SubContractorPaymentsService } from '@gtpl/shared-services/attendance'
import { AlertMessages } from '@gtpl/shared-utils/alert-messages';
import { Button, Card, Drawer, Form, Row, Col, Alert, Select, DatePicker, Anchor,Spin } from 'antd';
import './sub-contractors-payments-pages.css';
import { SubContractorsPaymentsGrid } from '@gtpl/pages/attendance-management/attendance-management-components/sub-contractors-payments-grid';

import { CostCentersDto, LibSubContractorsPaymentsDto, ProjectsDto } from '@gtpl/shared-models/gtpl';

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

export function SubContractorsPaymentsPages(
  props: SubContractorsPaymentsPagesProps
) {
  const service = new SubContractorPaymentsService;
  const [SubContractotsPaymentsData, setSubContractotsPaymentsData] = useState<LibSubContractorsPaymentsDto[]>([])
  useEffect(() => {getSubContractorsPayments();}, []);

  const { Link } = Anchor;
  const getSubContractorsPayments= () => {
    service.getAllSubContractorsPayments().then(res => { console.log(res);
      if (res.status) {setSubContractotsPaymentsData(res.data);
      } else {
        if (res.intlCode) {
          setSubContractotsPaymentsData([]);
            AlertMessages.getErrorMessage(res.internalMessage);
        } else {
         AlertMessages.getErrorMessage(res.internalMessage);
        }
      }
    }).catch(err => {
      AlertMessages.getErrorMessage(err.message);
      setSubContractotsPaymentsData([]);
    })
  }
  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="Sub Contractors Payments">
            <SubContractorsPaymentsGrid SubContractotsPaymentsData={SubContractotsPaymentsData} />
          </Card></>
    ): (
      <div className="spins">
      <Spin size="large"/>
      </div>
    )}
    </>
  )
}

export default SubContractorsPaymentsPages;