'use client'

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

// Component Imports
import DistributedBarChartOrder from '@views/dashboards/crm/DistributedBarChartOrder'

// Server Action Imports
import Loading from '../../../../../../components/layout/shared/Loading'
import { useSalesAnalytics } from '../../../../../../services/queries/analytics'
import { RecentSale } from '../../../../../../types/services/analytic'
import OrdersReport from '../../../../../../views/dashboards/orders/OrdersReport'

const DashboardOrder = () => {
  const { data, isLoading } = useSalesAnalytics()

  if (isLoading) return <Loading />

  return (
    <Grid container spacing={6}>
      <Grid size={{ xs: 12, sm: 6, md: 4, lg: 3 }}>
        <DistributedBarChartOrder
          isLoading={isLoading}
          title='Total Items'
          isCurrency={false}
          value={data?.summary.total_items as number}
          avatarIcon={'tabler-package'}
          avatarColor='primary'
          avatarSkin='light'
        />
      </Grid>
      <Grid size={{ xs: 12, sm: 6, md: 4, lg: 3 }}>
        <DistributedBarChartOrder
          isLoading={isLoading}
          title='Total Orders'
          isCurrency={false}
          value={data?.summary.total_orders as number}
          avatarIcon={'tabler-shopping-cart'}
          avatarColor='info'
          avatarSkin='light'
        />
      </Grid>
      <Grid size={{ xs: 12, sm: 6, md: 4, lg: 3 }}>
        <DistributedBarChartOrder
          isLoading={isLoading}
          title='Average Orders'
          isCurrency={true}
          value={data?.summary.average_order_value as number}
          avatarIcon={'tabler-trending-up'}
          avatarColor='warning'
          avatarSkin='light'
        />
      </Grid>
      <Grid size={{ xs: 12, sm: 6, md: 4, lg: 3 }}>
        <DistributedBarChartOrder
          isLoading={isLoading}
          title='Total Sales'
          isCurrency={true}
          value={data?.summary.total_sales as number}
          avatarIcon={'tabler-currency-dollar'}
          avatarColor='success'
          avatarSkin='light'
        />
      </Grid>
      <Grid size={{ xs: 12, lg: 12 }}>
        <OrdersReport title='Sales Report' orderData={data?.data as RecentSale[]} />
      </Grid>
    </Grid>
  )
}

export default DashboardOrder