import { RmDateReq } from '@gtpl/shared-models/finance';
import { PayablesDashboardReq } from '@gtpl/shared-models/raw-material-procurement';
import { CollectionsService } from '@gtpl/shared-services/finance';
import { GrnService } from '@gtpl/shared-services/procurement';
import { Card, Modal } from 'antd';
import React, { useEffect, useState } from 'react';

export interface props {
    fromDate?: string;
    toDate?: string;
    buyer?: number;
    unit?: number;
    company?:number
}

export default function SoShippedCount(props: props) {

    const [data, setData] = useState([])

    const collService = new CollectionsService()

             useEffect(() => {
                if (props?.fromDate && props?.toDate) {
                    getContainerShippedSoCount();
                }
              }, [props?.fromDate, props?.toDate, props?.unit,props?.buyer,props?.company]);

    const getContainerShippedSoCount = () => {
        const req = new RmDateReq()
            req.invoiceFromDate = props?.fromDate,
            req.invoiceToDate = props?.toDate,
            req.unit = props?.unit,
            req.company=props?.company
            if(props?.buyer > 0){
                req.buyerId = props?.buyer
            }
        collService.getContainerShippedSoCount(req).then((res) => {
            if (res.status) {
                setData(res.data)
            } else {
                setData([])
            }
        })
    }



    return (
        <>
            <Card
                title={<span style={{ color: 'white', fontSize: '16px' }}>SO Shipped Count</span>}
                style={{
                    textAlign: 'center',
                    width: '100%',
                    maxWidth: '400px',
                    margin: '0 auto',
                    borderRadius: '8px',
                }}
                headStyle={{
                    backgroundColor: '#587b9b',
                    minHeight: '10px',
                }}
                bodyStyle={{ padding: '12px' }}
            >
                <p  style={{ margin: 8, fontWeight: 'bold', cursor: 'pointer',fontSize: '16px', }}>{data[0]?.soCount || 0}</p>
            </Card>
        
        </>



    );
}