import React, { useEffect, useState } from 'react';
import { Card, Button, Descriptions, Layout, Table, Divider, Popconfirm, Switch, Tag, Rate, Input, Row, Col } from 'antd';
import { ColumnProps } from 'antd/lib/table';
import './lot-detail-view.css';
import { ProductionInventoryService } from '@gtpl/shared-services/production';
import form from 'antd/lib/form';
import { AlertMessages } from '@gtpl/shared-utils/alert-messages';
import { ProductionLogRequest } from 'libs/shared-models/production-management/src/lib/production-inv/production-log.req';
import { GlobalVariableValues } from '@gtpl/shared-models/common-models';


export interface LotDetailViewProps {
  lotNumber: string,
  year?:number
  // screen: string,
}

export function LotDetailView(
  props: LotDetailViewProps,
) {
  const production = new ProductionInventoryService();
  const [lotInfoData, setLotInfoData] = useState<any[]>([]);
  const [tableColumns,setTableColumns] = useState<any[]>([])

  useEffect(() => {
    getLotInfo();
    renderColumnsByVersion()

  }, [])

  const getLotInfo = (onReset?: boolean) => { // const plant = Number(localStorage.getItem('unit_id'))

    const req = new ProductionLogRequest();
    req.lotNumber = props.lotNumber
    req.year=props.year
    production.getLotInfo(req).then((res) => {
      if (res.status) {
        setLotInfoData(res.data);
      } else {
        setLotInfoData([]);
      }
    }).catch((err) => {
      AlertMessages.getErrorMessage(err.message);
      setLotInfoData([]);
    })
  }

  const columnsSkelton: ColumnProps<any>[] = [
    {
      title: 'Lot Code',
      dataIndex: 'lotNumber',
      sorter: (a, b) => a.lotNumber.localeCompare(b.lotNumber),
      sortDirections: ['descend', 'ascend'],
      // ...getColumnSearchProps('lotNumber'),
    },
    {
      title: 'Po Number',
      dataIndex: 'poNumber',
    },
    {
      title: 'Operation',
      dataIndex: 'operation',
    },
    {
      title: 'Input Grade',
      dataIndex: 'inputGrade',
    },
    {
      title: 'Output Grade',
      dataIndex: 'outputGrade',
    },
   
    {
      title: 'Physical Quantity',
      dataIndex: 'physicalQuantity',
    },
    {
      title: 'Issued Quantity',
      dataIndex: 'issuedQuantity',
    },
    {
      title: 'Transfered Quantity',
      dataIndex: 'transferedQuantity',
    },
    {
      title: 'Remaining Quantity',
      dataIndex: 'remainingQuantity',
      render:(text,record) => {
        return(
          <>
          {record.issuedQty || record.physicalQuantity ? record.physicalQuantity - record.issuedQuantity - record.rejectedQuantity - record.transferedQuantity: '-'}
          </>
        )
      }
    },
  
    {
      title: 'InTransit Quantity',
      dataIndex: 'intransitQuantity',
    },

    {
      title: 'Wastage Quantity',
      dataIndex: 'wastageQuantity',
    },
    {
      title: 'Rejected Quantity',
      dataIndex: 'rejectedQuantity',
    },
    {
      title: 'Wip Quantity',
      dataIndex: 'wipQuantity',
    },
    {
      title: 'I/P Boxes',
      dataIndex: 'boxes',
    },

    {
      title: 'O/P Boxes',
      dataIndex: 'opBoxes',
    },
    {
      title:'Product',
      dataIndex : 'product'
    },
    {
      title: 'Rejection from',
      dataIndex: 'rejectionFrom',
    },

  ];

  
  const renderColumnsByVersion = () => {
    if (GlobalVariableValues.productionVersion === 'V1') {
      
      setTableColumns(columnsSkelton)
    } else if (GlobalVariableValues.productionVersion === 'V2') {

      setTableColumns(columnsSkelton.filter(column => 
        column.dataIndex !== 'poNumber' && 
        column.dataIndex !== 'boxes'  &&
        column.dataIndex !== 'opBoxes' && 
        column.dataIndex !== 'wastageQuantity'
      ))
    }

  };


  return (
    <>
      <Card
        title={<span style={{ color: 'white' }}>LOT DETAIL VIEW</span>}
        style={{ textAlign: 'center' }}
        size='small'
        headStyle={{ backgroundColor: '#69c0ff', border: 0 }}
      >
        <Row>
          <Table
            // rowKey={record => record.downtimeTrackingId}
            columns={tableColumns}
            dataSource={lotInfoData}
            size='small'
            scroll={{ x:'max-content' }}
            bordered />
        </Row>

      </Card></>
  );
}

export default LotDetailView;