import React, { useEffect, useState } from 'react';
import { Button, Empty } from 'antd';
import './asset-transfer-print.css';
import moment from 'moment';
import { AssetMaintenanceService } from 'libs/shared-services/asset-management/src/lib/asset-maintenance';
import { MaintenanceRequest } from '@gtpl/shared-models/asset-management';
import { LogIdRequest } from '@gtpl/shared-models/production-management';
import { AlertMessages } from '@gtpl/shared-utils/alert-messages';

/* eslint-disable-next-line */
export interface AssetMaintenancePrintProps {
  assetMaintenanceId: number;
  printOrder: () => void;
  printType: string;
}


export function AssetMaintenancePrint(
  props: AssetMaintenancePrintProps
) {

  useEffect(() => {
    getData(props.assetMaintenanceId);
  }, [])

  const [maintenanceInfo, setMaintenanceInfo] = useState<any>([]);
  const service = new AssetMaintenanceService();

  const getData = (assetMaintenanceId) => {
    const reqObj = new LogIdRequest(assetMaintenanceId);
    const req = new MaintenanceRequest();
    req.assetMaintainanceId = assetMaintenanceId;
    service.getAllMaintainanceById(req).then(res => {
      if (res.status) {
        setMaintenanceInfo(res.data[0]);
      } else {
        AlertMessages.getErrorMessage(res.internalMessage);
      }
    }).catch(err => {
      AlertMessages.getErrorMessage(err.message);
    })
  };



  if (maintenanceInfo) {
    return (
        <div id='printme' className='transferPrint'>
          <h1 style={{ textAlign: 'center', fontSize: '28px', marginTop: '12px' }}> {props.printType}</h1>
          {/* <h1 style={{ textAlign: 'center', fontSize: '20px', marginTop: '4px' }}>
            {props.printType}
          </h1> */}
          <table className={'ta-b no-bt-bb'} style={{ width: '100%' }}>
            <tr className={'ta-b no-bt-bb'}>
              <td className={'ta-b'} colSpan={2}>
                <h4>From Plant: </h4>
                <b>{maintenanceInfo.fromPlant}</b>
              </td>
              <td className={'ta-b'} colSpan={2}>
                <h4>To Plant: </h4>
                <b>{maintenanceInfo.toPlant}</b>
              </td>
            </tr>
            <br />
            <tr className={'ta-b no-bt-bb'}>
              <td className={'ta-b'}>
                <b>DC NUMBER</b>
              </td>
              <td className={'ta-b'}>{maintenanceInfo.dcNumber}</td>
              <td className={'ta-b'}>
                <b>MRN NUMBER</b>
              </td>
              <td className={'ta-b'}>{maintenanceInfo.mrnNumber}</td>
            </tr>
            <br />
            <tr className={'ta-b no-bt-bb'}>
              <td className={'ta-b'}>
                <b>DC DATE</b>
              </td>
              <td className={'ta-b'}>{moment(maintenanceInfo.transferDate).format("YYYY/MM/DD LTS")}</td>
              <td className={'ta-b'}>
                <b>RECEIVED DATE</b>
              </td>
              <td className={'ta-b'}>{(maintenanceInfo.receivedDate)?moment(maintenanceInfo.receivedDate).format("YYYY/MM/DD LTS"):maintenanceInfo.status}</td>
            </tr>
           
          </table>
          <br />
          <br />

        <table className={'ta-b'} style={{ width: '100%' }}>
          <tr className={'ta-b'}>
            {/* <th className={'ta-b'}>S.No</th> */}
            <th className={'ta-b'}>ASSET CATEGORY</th>
            <th className={'ta-b'}>ASSET NAME</th>
            <th className={'ta-b'}>TRANSFER QTY</th>
            <th className={'ta-b'}>RECEIVED QTY</th>
            <th className={'ta-b'}>COST OF ASSET</th>
          </tr>
          <tr>
            {/* <td className={'ta-b'} style={{ textAlign: 'center' }}></td> */}
            <td className={'ta-b'}>{maintenanceInfo.categoryName}</td>
            <td className={'ta-b'}>{maintenanceInfo.itemName}</td>
            <td className={'ta-b'} style={{ textAlign: 'right' }}>{maintenanceInfo.transferedQuantity}</td>
            <td className={'ta-b'} style={{ textAlign: 'right' }}>{maintenanceInfo.receivedQuantity}</td>
            <td className={'ta-b'} style={{ textAlign: 'right' }}>{maintenanceInfo.assetCost}</td>
          </tr>

        </table>
          <div style={{ display: 'flex', justifyContent: 'space-between', marginTop: '30px' }}>
            <div style={{ padding: '10px' }}>
              <p>{maintenanceInfo.createdUser}</p>
              <h4>ISSUED BY</h4>
            </div>
            <div style={{ padding: '10px' }}>
              <p>{maintenanceInfo.receivedUser}</p>
              <h4>RECEIVED BY</h4>
            </div>
          </div>
          <Button onClick={props.printOrder} className='noprint' style={{ display: 'block', margin: 'auto', backgroundColor: '#69c0ff' }}><span style={{ color: 'white' }}>Print</span></Button>
        </div>
    );
  }
  else {
    return (<Empty />);
  }
}

export default AssetMaintenancePrint;