import React, { useState, useEffect } from 'react';
import { Button, Card,Drawer,Form,Row,Col,Alert, DatePicker, Anchor,Spin} from 'antd';
import { useIntl, FormattedDate} from 'react-intl'
import { render } from 'react-dom';
import { DesignationCreateResponse,DesignationService} from '@gtpl/shared-services/attendance';
import {DesignationsDto,DesignationsDtoDefault,employmentTypeUpdateRequest} from '@gtpl/shared-models/gtpl';
import { DesignationGrid } from '@gtpl/pages/attendance-management/attendance-management-components/designation-grid';
import { DesignationForm} from '@gtpl/pages/attendance-management/attendance-management-components/designation-form';
import { AlertMessages} from '@gtpl/shared-utils/alert-messages';
export interface IDesignationPagesProps {}

/* eslint-disable-next-line */


export const DesignationPages =( props:IDesignationPagesProps) =>{
  const [drawerVisible, setdrawerVisible] = useState<boolean>(false);
  const [isNewForm, setisNewForm] = useState<boolean>(true);
  const [viewOnly, setViewOnly] = useState(true);
  const [designation, setDesignationData] = useState<DesignationsDto[]>([])
  const [selectedDesignation, setSelectedDesignation] = useState<any>(DesignationsDtoDefault)
  const designationService = new DesignationService;
  const { Link } = Anchor;
  // const {formatMessage:fm}= useIntl()
  const [loading, setLoading] = useState(true)

  useEffect(() => {
    setTimeout(() => setLoading(false), 1000)
  }, [])

  const OpenFormTocreateRecord = () => {
    const duplicatedState = JSON.parse(JSON.stringify(DesignationsDtoDefault));
    setisNewForm(true);
    setSelectedDesignation(duplicatedState);
    setdrawerVisible(true);
    setViewOnly(false);
  }
  useEffect(() => {getAllDesignations();}, [])

  const getAllDesignations= () => {
    designationService.getAllDesignations().then(res => {
      if (res.status) {setDesignationData(res.data);
      } else {
        if (res.intlCode) {
          setDesignationData([]);
            AlertMessages.getErrorMessage(res.internalMessage);
        } else {
         AlertMessages.getErrorMessage(res.internalMessage);
        }
      }
    }).catch(err => {
      AlertMessages.getErrorMessage(err.message);
      setDesignationData([]);
    })
  }
  const viewDesignation= (DesignationViewData: DesignationsDto, viewOnly: boolean = true) => {
    // console.log(StateViewData);
    setisNewForm(false);
    setSelectedDesignation(DesignationViewData);
    setdrawerVisible(true);
    setViewOnly(viewOnly);
  }
  const deleteDesignations = (DesignationViewData: DesignationsDto) => {
    DesignationViewData.status=DesignationViewData.status?false:true;
    DesignationViewData.updatedUser=JSON.parse(localStorage.getItem('userid'));
    designationService.ActivatedeActivateDesignation(DesignationViewData).then(res => {
      if (res.status) {
        getAllDesignations();
        AlertMessages.getSuccessMessage('Designation Deleted Sucessfully');
      } else {
        if (res.intlCode) {
          AlertMessages.getErrorMessage(res.internalMessage);
        } else {
          AlertMessages.getErrorMessage(res.internalMessage);
        }
      }
    }).catch(err => {
      AlertMessages.getErrorMessage(err.message);
    })
  }
  const [visible, setVisible] = useState(true);

  const handleClose = () => {
    setVisible(false);
  };
/**
   * To Save The State
   * @param StateData
   */


  const saveDesignation= (DesignationData: DesignationsDto) => {
    DesignationData.designationId=0;
    DesignationData.status=true;
    DesignationData.createdUser=JSON.parse(localStorage.getItem('userid'));
    designationService.createDesignation(DesignationData).then(res => {
       if (res.status) {
         AlertMessages.getSuccessMessage('Designation created Successfully');
         getAllDesignations();
         setdrawerVisible(false);
       } else {
         if (res.intlCode) {
           AlertMessages.getErrorMessage(res.internalMessage);
         } else {
           AlertMessages.getErrorMessage(res.internalMessage);
         }
       }
     }).catch(err => {
       AlertMessages.getErrorMessage(err.message);
     })
   }

   const updateDesignation = (DesignationData: DesignationsDto) => {
     // console.log(StateData);
     // StateData.stateId=3;
     // StateData.createdUser=1;
    DesignationData.updatedUser=JSON.parse(localStorage.getItem('userid'));
     designationService.updateDesignation(DesignationData).then(res => {
       if (res.status) {
         AlertMessages.getSuccessMessage('Updated successfully');
         getAllDesignations();
         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;
 return (
   <>
    {loading === false ? (
   <><Anchor affix={false}>
         <Link href="#/dashboard" title="Dashboard" />
       </Anchor><Card bodyStyle={{ overflow: 'auto' }} title={'Designation Details: ' + designation.length + ', Active ' + designation.filter(el => el.status).length + ' | In-Active ' + designation.filter(el => el.status == false).length} extra={<Button type="primary" onClick={() => { OpenFormTocreateRecord(); } } style={{ float: 'right', display: "block" }}>Create</Button>}>
           <DesignationGrid viewdesignation={viewDesignation} deletedesignation={deleteDesignations} designationData={designation} />
         </Card>
         <Drawer bodyStyle={{ paddingBottom: 80 }} title='Designation Form ' width={viewPortwidth > 768 ? '50%' : '85%'}
           onClose={closeDrawer} visible={drawerVisible} closable={true}>
           <Card headStyle={{ textAlign: 'center', fontWeight: 500, fontSize: 16 }} title="Designation Details" size='small'>
             <DesignationForm key={Date.now()}
               designationData={selectedDesignation}
               savedesignation={saveDesignation}
               updatedesignation={updateDesignation}
               viewOnly={viewOnly}
               closeForm={closeDrawer} />
           </Card>
         </Drawer></>
): (
        <div className="spins">
        <Spin size="large"/>
        </div>
      )}
   </>
 )
}

export default DesignationPages;