import React, { useState, useEffect } from 'react';
import { Button, Card,Drawer,Form,Row,Col,Alert} from 'antd';
import { useIntl, FormattedDate} from 'react-intl'
import { render } from 'react-dom';
import './costcenters-pages.css';
import {CostCentersDto,CostCenterDtoDefault} from '@gtpl/shared-models/gtpl';
import { CostcenterService} from '@gtpl/shared-services/attendance'
import {CostcentersGrid} from '../../../../attendance-management-components/costcenters-grid/src/index';
import {CostcenterForm} from '../../../../attendance-management-components/costcenters-form/src/index'
/* eslint-disable-next-line */
import { AlertMessages} from '@gtpl/shared-utils/alert-messages';
export interface ICostcenterPagesProps {}

export const CostcentersPages= (props:ICostcenterPagesProps ) =>{
  const [drawerVisible, setdrawerVisible] = useState<boolean>(false);
  const [isNewForm, setisNewForm] = useState<boolean>(true);
  const [viewOnly, setViewOnly] = useState(true);
  const [CostcentersData, setCostcentersData] = useState<CostCentersDto[]>([])
  const [selectedCostCenter, setSelectedCostcenter] = useState<any>(CostCenterDtoDefault)
  const service = new CostcenterService;
  const OpenFormTocreateRecord = () => {
    const duplicatedCostcenter= JSON.parse(JSON.stringify(CostCenterDtoDefault));
    setisNewForm(true);
    setSelectedCostcenter(duplicatedCostcenter);
    setdrawerVisible(true);
    setViewOnly(false);
  }
  useEffect(() => {getAllCostcenters();}, [])
  /**
   * To Get All The States Data
   */
  const getAllCostcenters= () => {
    service.getAllCostcenters().then(res => {
      if (res.status) {setCostcentersData(res.data);
      } else {
        if (res.intlCode) {
          setCostcentersData([]);
            AlertMessages.getErrorMessage(res.internalMessage);
        } else {
          AlertMessages.getErrorMessage(res.internalMessage);
        }
      }
    }).catch(err => {
      AlertMessages.getErrorMessage(err.message);
      setCostcentersData([]);
    })
  }
  const viewCostcenter = (CostcenterViewData: CostCentersDto, viewOnly: boolean = true) => {
    // console.log(StateViewData);
    setisNewForm(false);
    setSelectedCostcenter(CostcenterViewData);
    setdrawerVisible(true);
    setViewOnly(viewOnly);
  }
  const deleteCostcenter = (costcenterViewData: CostCentersDto) => {
    costcenterViewData.status=costcenterViewData.status?false:true;
   service.ActivatedeActivateCostcenter(costcenterViewData).then(res => {
      if (res.status) {
        getAllCostcenters();
        AlertMessages.getSuccessMessage('Success');
      } 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 Costcenter Data
   */
  const saveCostcenter = (costcenterData: CostCentersDto) => {
    costcenterData.costCenterId=0;
    costcenterData.status=true;
    // costcenterData.createdUser=0;
    console.log(costcenterData);
     service.createCostcenter(costcenterData).then(res => {
      if (res.status) {
        AlertMessages.getSuccessMessage('Cost center Created Successfully');
        getAllCostcenters();
        setdrawerVisible(false);
      } else {
        if (res.intlCode) {
          AlertMessages.getErrorMessage(res.internalMessage);
        } else {
          AlertMessages.getErrorMessage(res.internalMessage);
        }
      }
    }).catch(err => {
      AlertMessages.getErrorMessage(err.message);
    })
  }
  const updateCostcenter = (costcenterData: CostCentersDto) => {
      service.updateCostcenter(costcenterData).then(res => {
      if (res.status) {
        AlertMessages.getSuccessMessage('Updated successfully');
        getAllCostcenters();
        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 (
    <>
    <Card  bodyStyle={{ overflow: 'auto' }} title="Cost center Details" extra={<Button type="primary" onClick={()   => { OpenFormTocreateRecord() }} style={{ float: 'right', display: "block" }}>Create</Button>}>
    <CostcentersGrid  viewCostcenter={viewCostcenter} deleteCostcenter={deleteCostcenter} CostcentersData={CostcentersData} />
    </Card>
    <Drawer bodyStyle={{ paddingBottom: 80 }} title='Costcenter Form' width={viewPortwidth > 768 ? '50%' : '85%'}
      onClose={closeDrawer} visible={drawerVisible}  closable={true}>
         <Card headStyle={{ textAlign: 'center',fontWeight:500,fontSize:16}} title="Cost center Details" size='small'>
      <CostcenterForm key={Date.now()}
         costcenterData={selectedCostCenter}
         saveCostcenter={saveCostcenter}
         updateCostcenter={updateCostcenter}
         viewOnly={viewOnly}
         closeForm={closeDrawer}
      />
      </Card>
      </Drawer>

    </>
  )
}
export default CostcentersPages;