'use client'

import Grid from '@mui/material/Grid2'
import PurchaseDetailInformation from './PurchaseDetailInformation'
import PurchaseDetailSendPayment from './PurchaseDetailSendPayment'
import PurchaseDetailLog from './PurchaseDetailLog'
import PurchaseDetailTransaction from './PurchaseDetailTransaction'
import { useParams } from 'next/navigation'
import { usePurchaseOrderById } from '@/services/queries/purchaseOrder'
import Loading from '@/components/layout/shared/Loading'

const PurchaseDetailContent = () => {
  const params = useParams()
  const { data, isLoading, error, isFetching } = usePurchaseOrderById(params.id as string)
  const total = (data?.items ?? []).reduce((sum, item) => sum + (item?.amount ?? 0) * item?.quantity, 0)
  return (
    <>
      {isLoading ? (
        <Loading />
      ) : (
        <Grid container spacing={6}>
          <Grid size={{ xs: 12 }}>
            <PurchaseDetailInformation data={data} />
          </Grid>
          {data?.status == 'sent' && (
            <Grid size={{ xs: 12 }}>
              <PurchaseDetailSendPayment id={data?.id} totalAmount={total} purchaseOrderNumber={data?.po_number} />
            </Grid>
          )}
          {/* <Grid size={{ xs: 12 }}>
            <PurchaseDetailTransaction />
          </Grid>
          <Grid size={{ xs: 12 }}>
            <PurchaseDetailLog />
          </Grid> */}
        </Grid>
      )}
    </>
  )
}

export default PurchaseDetailContent