import React, { useEffect, useState } from 'react';
import { SubContractorService } from '@gtpl/shared-services/attendance'
import './sub-contractors-pages.css';
import { LibSubContractorsDto, LibSubContractorsDtoDefault } from '@gtpl/shared-models/gtpl';
import { AlertMessages } from '@gtpl/shared-utils/alert-messages';
import { Button, Card, Drawer, Anchor,Spin } from 'antd';
/* eslint-disable-next-line */

import { SubcontractorsForm } from '@gtpl/pages/attendance-management/attendance-management-components/subcontractors-form';
import { SubcontractorsGrid } from '@gtpl/pages/attendance-management/attendance-management-components/subcontractors-grid';

export interface SubContractorsPagesProps {}

export function SubContractorsPages(props: SubContractorsPagesProps) {
  const [drawerVisible, setdrawerVisible] = useState<boolean>(false);
  const [isNewForm, setisNewForm] = useState<boolean>(true);
  const [viewOnly, setViewOnly] = useState(true);
  const [subContractorsData, setSubContractorsData] = useState<LibSubContractorsDto[]>([])
  const [selectedSubcontractors, setSelectedSubContractor] = useState<any>(LibSubContractorsDtoDefault)
  const service = new SubContractorService;
  const { Link } = Anchor;
  // const {formatMessage:fm}= useIntl()
  const OpenFormTocreateRecord = () => {
    const duplicatedSubContractor = JSON.parse(JSON.stringify(LibSubContractorsDtoDefault));
    setisNewForm(true);
    setSelectedSubContractor(duplicatedSubContractor);
    setdrawerVisible(true);
    setViewOnly(false);
  }
  useEffect(() => {getAllSubContractors();}, [])
  /**
   * To Get All The Sub Contractors Data
   */
  const getAllSubContractors= () => {
    service.getAllSubContractors().then(res => {
      if (res.status) {setSubContractorsData(res.data);
      } else {
        if (res.intlCode) {
          setSubContractorsData([]);
            AlertMessages.getErrorMessage(res.internalMessage);
        } else {
         AlertMessages.getErrorMessage(res.internalMessage);
        }
      }
    }).catch(err => {
      AlertMessages.getErrorMessage(err.message);
      setSubContractorsData([]);
    })
  }
  const viewSubContractors = (subContractorsViewData: LibSubContractorsDto, viewOnly: boolean = true) => {
    console.log(subContractorsViewData);
    setisNewForm(false);
    setSelectedSubContractor(subContractorsViewData);
    setdrawerVisible(true);
    setViewOnly(viewOnly);
  }
  const [visible, setVisible] = useState(true);

  const handleClose = () => {
    setVisible(false);
  };

  /**
   * To Save The Sub Contractor
   * @param SubContractorsData
   */
  const saveSubContractor = (subContractorsData: LibSubContractorsDto) => {
    subContractorsData.subContractorId=0;
    subContractorsData.status=true;
    subContractorsData.createdUser=JSON.parse(localStorage.getItem('userid'));
    service.createSubContractor(subContractorsData).then(res => {
      console.log(res);
      if (res.status) {
        AlertMessages.getSuccessMessage('Sub Contractor Created Successfully');
        getAllSubContractors();
        setdrawerVisible(false);
      } else {
        if (res.intlCode) {
          AlertMessages.getErrorMessage(res.internalMessage);
        } else {
          AlertMessages.getErrorMessage(res.internalMessage);
        }
      }
    }).catch(err => {
      AlertMessages.getErrorMessage(err.message);
    })
  }
  const deleteSubContractor = (libSubContractorsDto: LibSubContractorsDto) => {
    libSubContractorsDto.status=libSubContractorsDto.status?false:true;
    libSubContractorsDto.updatedUser=JSON.parse(localStorage.getItem('userid'));
    service.ActivateOrDeactivateSubContractors(libSubContractorsDto).then(res => {
      if (res.status) {
        getAllSubContractors();
        AlertMessages.getSuccessMessage('Success');
      } else {
        if (res.intlCode) {
          AlertMessages.getErrorMessage(res.internalMessage);
        } else {
          AlertMessages.getErrorMessage(res.internalMessage);
        }
      }
    }).catch(err => {
      AlertMessages.getErrorMessage(err.message);
    })
  }
  const updateSubContractor = (libSubContractorsDto: LibSubContractorsDto) => {
    libSubContractorsDto.updatedUser=JSON.parse(localStorage.getItem('userid'));
    
    service.updateSubContractor(libSubContractorsDto).then(res => {
      if (res.status) {
        AlertMessages.getSuccessMessage('Updated Successfully');
        getAllSubContractors();
        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={'Subcontractors : ' + subContractorsData.length + ', Active ' + subContractorsData.filter(el => el.status).length + ' | In-Active ' + subContractorsData.filter(el => el.status == false).length} extra={<Button type="primary" onClick={() => { OpenFormTocreateRecord(); } } style={{ float: 'right', display: "block" }}>Create</Button>}>
            <SubcontractorsGrid viewSubContractor={viewSubContractors} deleteSubContractor={deleteSubContractor} libSubContractorsDto={subContractorsData} />
          </Card>
          <Drawer bodyStyle={{ paddingBottom: 80 }} title='Sub Contractors Form' width={viewPortwidth > 768 ? '50%' : '85%'}
            onClose={closeDrawer} visible={drawerVisible} closable={true}>
            <Card headStyle={{ textAlign: 'center', fontWeight: 500, fontSize: 16 }} title="Sub Contractors Details" size='small'>
              <SubcontractorsForm key={Date.now()}
                libSubContractorsDto={selectedSubcontractors}
                saveSubContractor={saveSubContractor}
                updateSubContractor={updateSubContractor}
                viewOnly={viewOnly}
                closeForm={closeDrawer} />
            </Card>
          </Drawer></>
      ): (
        <div className="spins">
        <Spin size="large"/>
        </div>
      )}
    </>
  )
}

export default SubContractorsPages;