import React from "react";
import TitleCard from "pages/titleCard";
import { useTheme } from "@mui/material/styles";
import MainCard from "components/MainCard";
import { Link as RouterLink } from "react-router-dom";
import SalesChart from "pages/deliveries/SalesChart";
import { useQuery } from "@tanstack/react-query";
import LoadingIcons from "react-loading-icons";
import { HiHandThumbDown, HiHandThumbUp } from "react-icons/hi2";
import HoverSocialCard from "components/cards/statistics/HoverSocialCard";
import { ThemeMode } from "config";
import { DashboardOutlined } from "@ant-design/icons";
import {
  Avatar,
  Chip,
  Grid,
  Link,
  Table,
  TableBody,
  TableCell,
  TableContainer,
  TableHead,
  TableRow,
  Typography,
  CardContent,
  Card,
  Stack,
  TextField,
  MenuItem,
  Box,
  FormControl,
  FormGroup,
  FormControlLabel,
  Checkbox,
} from "@mui/material";
import Loader from "components/Loader";
import {
  fetchDeliverySummary,
  fetchDeliveryLocationSummary,
} from "pages/api/api";

const Deliveries = () => {
  const theme = useTheme();
  const primary = theme.palette.primary.main;

  const {
    isLoading: isLoadingDeliverySummary,
    isError: isErrorDeliverySummary, //true or false
    data: deliverySummarydata,
    error: deliverySummaryError,
  } = useQuery({
    queryKey: ["deliverySummary"],
    queryFn: fetchDeliverySummary,
  });
  const {
    isLoading: isLoadingDeliveryLocationSummary,
    isError: isErrorDeliveryLocationSummary, //true or false
    data: deliveryLocationSummarydata,
    error: DeliveryLocationSummaryError,
  } = useQuery({
    queryKey: ["locationSummary"],
    queryFn: fetchDeliveryLocationSummary,
  });

  if (isLoadingDeliverySummary || isLoadingDeliveryLocationSummary)
    return <Loader />;

  if (isErrorDeliverySummary)
    return (
      "An error has occurred:(isErrorOrderSummary) " +
      deliverySummaryError.message
    );
  if (isErrorDeliveryLocationSummary)
    return (
      "An error has occurred:(isErrorDeliveryLocationSummary) " +
      DeliveryLocationSummaryError.message
    );
  return (
    <>
      <TitleCard title="Deliveries" />
      {/* ============================================= || Hover Social Card  || ============================================= */}
      <Grid container spacing={3} sx={{ mt: "0px" }}>
        {" "}
        <Grid item xs={12} custom400={6} sm={3}>
          <HoverSocialCard
            primary="Orders"
            secondary={deliverySummarydata.total}
            iconPrimary={DashboardOutlined}
            color={theme.palette.primary.main}
          />
        </Grid>{" "}
        <Grid item xs={12} custom400={6} sm={3}>
          <HoverSocialCard
            primary="Delivered"
            secondary={deliverySummarydata.delivered}
            iconPrimary={HiHandThumbUp}
            color={theme.palette.success.main}
          />
        </Grid>
        <Grid item xs={12} custom400={6} sm={3}>
          <HoverSocialCard
            primary="Pending"
            secondary={deliverySummarydata.pending}
            iconPrimary={LoadingIcons.ThreeDots}
            color={
              theme.palette.mode === ThemeMode.DARK
                ? theme.palette.secondary.lighter
                : theme.palette.warning.main
            }
          />
        </Grid>
        <Grid item xs={12} custom400={6} sm={3}>
          <HoverSocialCard
            primary="Cancelled"
            secondary={deliverySummarydata.cancelled}
            iconPrimary={HiHandThumbDown}
            color={theme.palette.error.main}
          />
        </Grid>
      </Grid>
      <Grid container spacing={3} sx={{ mt: 2 }}>
        {" "}
        {/* ============================================= || left column|| ============================================= */}
        <Grid item xs={12} sm={8}>
          <MainCard
            elevation={0}
            title="Delivery Status"
            content={false}
            secondary={
              <Link
                component={RouterLink}
                to="/reports/ordersdetails"
                color="primary"
              >
                View all
              </Link>
            }
          >
            <TableContainer>
              <Table>
                <TableHead>
                  <TableRow>
                    <TableCell sx={{ pl: 3 }}>Zones</TableCell>
                    <TableCell sx={{ textAlign: "right" }}>Orders</TableCell>
                    <TableCell sx={{ textAlign: "right" }}>Delivered</TableCell>
                    <TableCell sx={{ textAlign: "right" }}>Pending</TableCell>
                    <TableCell sx={{ textAlign: "right" }}>Cancelled</TableCell>
                  </TableRow>
                </TableHead>
                <TableBody>
                  {deliveryLocationSummarydata.map((zone, index) => (
                    <TableRow hover key={index}>
                      <TableCell sx={{ pl: 3 }}>
                        <Grid container spacing={2} alignItems="center">
                          <Grid item>
                            <Avatar
                              sx={{
                                bgcolor:
                                  index == 0
                                    ? theme.palette.c_color.main
                                    : index == 1
                                    ? theme.palette.m_color.main
                                    : theme.palette.n_color.main,
                              }}
                            >
                              {" "}
                              {zone.locationname.charAt(0)}
                            </Avatar>
                          </Grid>
                          <Grid item xs zeroMinWidth>
                            <Typography align="left" variant="subtitle1">
                              {zone.locationname}
                            </Typography>{" "}
                          </Grid>
                        </Grid>
                      </TableCell>
                      <TableCell sx={{ textAlign: "right" }}>
                        {zone.total}
                      </TableCell>
                      <TableCell sx={{ textAlign: "right" }}>
                        {zone.delivered}
                      </TableCell>
                      <TableCell sx={{ textAlign: "right" }}>
                        {zone.pending}
                      </TableCell>
                      <TableCell sx={{ textAlign: "right" }}>
                        {zone.cancelled}
                      </TableCell>
                    </TableRow>
                  ))}
                </TableBody>
              </Table>
            </TableContainer>
          </MainCard>
        </Grid>
        {/* ============================================= || right column || ============================================= */}
        <Grid item xs={12} sm={4}>
          <MainCard
            title="Deliveries "
            content={false}
            secondary={
              <Link
                component={RouterLink}
                to="/reports/ordersdetails"
                color="primary"
              >
                View all
              </Link>
            }
          >
            <TableContainer>
              <Table>
                <TableHead>
                  <TableRow>
                    <TableCell sx={{ pl: 3, textAlign: "left" }}>
                      Zones
                    </TableCell>
                    <TableCell sx={{ textAlign: "right" }}>Delivered</TableCell>
                  </TableRow>
                </TableHead>
                <TableBody>
                  {deliveryLocationSummarydata.map((zone, index) => (
                    <TableRow hover key={index}>
                      <TableCell sx={{ pl: 3 }}>
                        <Grid container spacing={2} alignItems="center">
                          <Grid item>
                            <Avatar
                              sx={{
                                bgcolor:
                                  index == 0
                                    ? theme.palette.c_color.main
                                    : index == 1
                                    ? theme.palette.m_color.main
                                    : theme.palette.n_color.main,
                              }}
                            >
                              {" "}
                              {zone.locationname.charAt(0)}
                            </Avatar>
                          </Grid>
                          <Grid item xs zeroMinWidth>
                            <Typography align="left" variant="subtitle1">
                              {zone.locationname}
                            </Typography>{" "}
                          </Grid>
                        </Grid>
                      </TableCell>

                      <TableCell sx={{ textAlign: "right" }}>
                        {zone.delivered}
                      </TableCell>
                    </TableRow>
                  ))}
                </TableBody>
              </Table>
            </TableContainer>
          </MainCard>
        </Grid>
      </Grid>
      {/* ============================================= || Orders chart|| ============================================= */}
      <Grid container spacing={3} sx={{ mt: 2 }}>
        <Grid item xs={12}>
          <Grid container alignItems="center" justifyContent="space-between">
            <Grid item>
              {/* <Typography variant="h5">Orders Report</Typography> */}
            </Grid>
            <Grid item>
              {/* <TextField
                id="standard-select-currency"
                size="small"
                select
                // value={value}
                // onChange={(e) => setValue(e.target.value)}
                sx={{
                  "& .MuiInputBase-input": { py: 0.75, fontSize: "0.875rem" },
                }}
              >
                {[1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12].map(
                  (option, index) => (
                    // <MenuItem key={option.value} value={option.value}>
                    //   {option.label}
                    // </MenuItem>
                    <MenuItem key={index} value={index}>
                      {index}
                    </MenuItem>
                  )
                )}
              </TextField> */}
            </Grid>
          </Grid>
          <SalesChart />
        </Grid>
      </Grid>
    </>
  );
};

export default Deliveries;
