import { Box, Grid } from '@mui/material';
import React, { useCallback, useEffect, useState } from 'react';
import TotalCard from '../components/common/TotalCard';
import PageHeader from '../components/common/PageHeader';
import { DashboardCount } from '../data/DashboardCount';
import CommonTable from '../components/common/CommonTable';
import { overviewReport } from '../services/axios/allApi';

const Home = () => {
  const [report, setReport] = useState();

  const getReportInfo = useCallback(async () => {
    try {
      const reportInfo = await overviewReport();
      setReport(reportInfo?.data?.data);
    } catch (err) {
      console.log(err);
    }
  }, []);

  useEffect(() => {
    getReportInfo();
  }, [getReportInfo]);

  return (
    <Box>
      <PageHeader title={"Dashboard"} />
      <Grid container spacing={{xs: 2, md: 3}} mb={4}>
        {
          DashboardCount.map((dtItem, i) => (
            <Grid item xs={12} md={6} lg={4} key={i}>
              <TotalCard
                count={
                  dtItem.title == "Total Products" ? report?.total_products
                  : dtItem.title == "Total Selling Items" ? report?.total_sold_items
                  : dtItem.title == "Total Sales Amount" ? report?.total_sold_amount
                  : dtItem.title == "Total Paid Amount" ? report?.total_paid_amount
                  : dtItem.title == "Total Due Amount" ? report?.total_due_amount
                  : ''
                }
                title={dtItem.title}
                icon={dtItem.icon}
                bgColor={dtItem.bgColor}
              />
            </Grid>
          ))
        }
      </Grid>
      {/* <CommonTable title="Recent Orders" /> */}
    </Box>
  );
};

export default Home;