import { StockReportFilters } from '@gtpl/shared-models/common-models';
import { StockInService } from '@gtpl/shared-services/warehouse-management';
import { AlertMessages } from '@gtpl/shared-utils/alert-messages';
import { Card, Form, Table } from 'antd';
import { ColumnProps } from 'antd/lib/table';
import React, { useEffect, useState } from 'react'

const DeadStockReport = () => {
    const [deadStock, setDeadStock] = useState<any[]>([]);
    const [form] = Form.useForm();
    const stockInservice = new StockInService();
    const [unitfiltersData, setunitFiltersData] = useState<any[]>([]);
    const [page, setPage] = React.useState(1);
    const [pageSize, setPageSize] = useState<number>(null);

    useEffect(()=>{
        getDeadStockData()
    },[])


    const getDeadStockData = () => {
        const req = new StockReportFilters()
        const storageUnitId = (localStorage.getItem('unit_id'))
        console.log(storageUnitId, 'storageUnitId')
        const unitId = form.getFieldValue('plantData')
        console.log(unitId, 'unitId')
        if (Number(storageUnitId) == 5) {
          if (unitId) {
            req.unitId = unitId
          }
        } else {
          req.plantId = (Number(storageUnitId))
        }
    
        stockInservice.getDeadStockData(req).then((res) => {
          if (res.status) {
            setDeadStock(res.data)
            AlertMessages.getSuccessMessage(res.internalMessage);
          } else {
            AlertMessages.getErrorMessage(res.internalMessage);
          }
        })
      }

    const columns: ColumnProps<any>[] = [
        {
            title: 'S No',
            key: 'sno',
            width: '70px',
            fixed: 'left',
            render: (text, object, index) => (page - 1) * pageSize + (index + 1)
          },
        {
          title: 'Unit',
          dataIndex: 'unitName',
          render: (value) => (<span style={{ float: 'left' }}>{value}</span>),
        //   filters: unitfiltersData,
        //   filterMultiple: true,
        //   onFilter: (value, record) => {
        //     return record.unitName == value;
        //   },
        },
        {
          title: 'Product',
          dataIndex: 'shortCode',
          key: 'shortCode',
          render: (value, record) => {
            return <div style={{ textAlign: 'right' }}>{record.shortCode}</div>
          }
        },
        {
          title: 'Cartons',
          dataIndex: 'totalCartons',
          key: 'totalCartons',
          render: (value, record) => {
            return <div style={{ textAlign: 'right' }}>{record.totalCartons}</div>
          }
        },
      ]

  return (
    <div>
        <Card title='Dead Stock'>
                      <Table dataSource={deadStock}
                        columns={columns}
                         ></Table>
                    </Card>
    </div>
  )
}

export default DeadStockReport