import { CollectionsService } from '@gtpl/shared-services/finance';
import { Card, Col, Form, Row } from 'antd';
import useBreakpoint from 'antd/lib/grid/hooks/useBreakpoint';
import React, { useEffect, useState } from 'react';
 
 const SalesAmountAndNetWeight =() =>{
    const [form] = Form.useForm();
    const [salesAmount, setSalesAmount] = useState<any[]>([])
    const [salesWeight, setSalesWeight] = useState<any[]>([])
    const collService = new CollectionsService()

    console.log(salesWeight,salesAmount)

    useEffect(() =>{
        getSalesInvoiceAmount()
        getSalesNetWeight()
    },[])

    const getSalesInvoiceAmount = () =>{
        collService.getSalesInvoiceAmount().then(res =>{
            if(res.status){
                setSalesAmount(res.data)
            }else{
                setSalesAmount([])
            }
        })
    }
    const getSalesNetWeight = () =>{
        collService.getSalesNetWeight().then(res =>{
            if(res.status){
                setSalesWeight(res.data)
            }else{
                setSalesWeight([])
            }
        })
    }


    return (
 <div><Card
            title={<span style={{ color: 'white', fontSize: '14px' }}>Total Sales Report</span>}
            style={{
              textAlign: 'center',
              width: '100%',
              maxWidth: '400px',
              margin: '0 auto',
              borderRadius: '8px',
            }}
            headStyle={{
              backgroundColor: '#587b9b',
              border: 0,
              padding: '2px 2px',
              minHeight: '10px',
            }}
            bodyStyle={{ padding: '12px' }}
          >
            <div style={{ display: 'flex', gap: '12px', justifyContent: 'center' }}>
              <Card
                style={{
                  flex: 1,
                  padding: '8px',
                  textAlign: 'center',
                  borderRadius: '6px',
                  boxShadow: '0 1px 3px rgba(0,0,0,0.1)',
                  transition: 'transform 0.2s, box-shadow 0.2s',
                  
                }}
                bodyStyle={{ padding: '8px' }}
                hoverable
              >
                <p style={{ margin: 0, fontSize: '12px', color: '#05539a' }}>Quantity </p>
                <p style={{ margin: 0, fontWeight: 'bold' }}>
                {
                    salesWeight[0]?.kgWeight
                        ? `${Math.round(Number(salesWeight[0].kgWeight)).toLocaleString('en-IN')} (tons) (${Math.round(Number(salesWeight[0].lbWeight)).toLocaleString('en-IN')} lbs)`
                        : '-'
                  }
                  </p>
              </Card>
              <Card
                style={{
                  flex: 1,
                  padding: '8px',
                  textAlign: 'center',
                  borderRadius: '6px',
                  boxShadow: '0 1px 3px rgba(0,0,0,0.1)',
                  transition: 'transform 0.2s, box-shadow 0.2s',
                }}
                bodyStyle={{ padding: '8px' }}
                hoverable
              >
                <p style={{ margin: 0, fontSize: '12px', color: '#f69026' }}>Total Amount</p>
                <p style={{ margin: 0, fontWeight: 'bold' }} >$
                  {
                     
                                              salesAmount[0]?.usdAmount
                                              ? (
                                                  (Number(salesAmount[0].usdAmount)).toLocaleString('en-IN') + 
                                                  '   (' +'₹ '+
                                                 (Number(salesAmount[0].inrAmount)).toLocaleString('en-IN')  +
                                                  ')'
                                                )
                                              : '-'
                                            
                                            }
                  </p>
              </Card>
            </div>
          </Card></div>
    
    )

}
export default SalesAmountAndNetWeight