'use client'

// MUI Imports
import Grid from '@mui/material/Grid2'

// Type Imports

// Component Imports
import { redirect, useParams } from 'next/navigation'
import Loading from '../../../../../components/layout/shared/Loading'
import { useOrder } from '../../../../../services/queries/orders'
import BillingAddress from './BillingAddressCard'
import CustomerDetails from './CustomerDetailsCard'
import OrderDetailHeader from './OrderDetailHeader'
import OrderDetailsCard from './OrderDetailsCard'
import ShippingAddress from './ShippingAddressCard'

const OrderDetails = () => {

  const params = useParams()

  const { data, isLoading } = useOrder(params.id as string)

  if (isLoading) {
    return <Loading />
  }

  if (!data) {
    redirect('not-found')
  }

  return (
    <Grid container spacing={6}>
      <Grid size={{ xs: 12 }}>
        <OrderDetailHeader orderData={data} />
      </Grid>
      <Grid size={{ xs: 12, md: 8 }}>
        <Grid container spacing={6}>
          <Grid size={{ xs: 12 }}>
            <OrderDetailsCard data={data} />
          </Grid>
        </Grid>
      </Grid>
      <Grid size={{ xs: 12, md: 4 }}>
        <Grid container spacing={6}>
          <Grid size={{ xs: 12 }}>
            <CustomerDetails orderData={data} />
          </Grid>
          <Grid size={{ xs: 12 }}>
            <BillingAddress data={data} />
          </Grid>
        </Grid>
      </Grid>
    </Grid>
  )
}

export default OrderDetails