import React, { useEffect, useState } from "react";
import {
  CRow,
  CCol,
  CDropdown,
  CDropdownMenu,
  CDropdownItem,
  CDropdownToggle,
  CWidgetStatsA,
} from "@coreui/react";
import { getStyle } from "@coreui/utils";
import { CChartBar, CChartLine } from "@coreui/react-chartjs";
import CIcon from "@coreui/icons-react";
import { cilArrowBottom, cilArrowTop, cilOptions } from "@coreui/icons";
import { BeatLoader } from "react-spinners";
import { isAutheticated } from "src/auth";
import axios from "axios";
{
  /* <BeatLoader color="#36d7b7" /> */
}
const WidgetsDropdown = ({ users,salescoordinator,territorymanager }) => {
// const WidgetsDropdown = ({ users, category, product, Requests }) => {
//   const token = isAutheticated();
//   const [orders, setOrders] = useState([]);
//   const [todayorders, setTodayOrders] = useState([]);
//   const [monthorders, setMonthOrders] = useState([]);
//   const [yearorders, setYearOrders] = useState([]);
//   const [lastyearorders, setLastYearOrders] = useState([]);
//   const [processingorders, setProcessingOrders] = useState([]);
//   const [dispatchedorders, setDispatchedOrders] = useState([]);
//   const [deliveredorders, setDeliveredOrders] = useState([]);
//   const [cancelledorders, setCancelledOrders] = useState([]);
//   const getAllOrder = async () => {
//     let res = await axios.get(`/api/order/getAll/`, {
//       headers: {
//         Authorization: `Bearer ${token}`,
//       },
//     });
//     // console.log(res.data);
//     setOrders(res?.data?.order);
//     setTodayOrders(
//       res?.data?.order?.filter((order) => {
//         return (
//           new Date(order.createdAt).toDateString() === new Date().toDateString()
//         );
//       })
//     );
//     setMonthOrders(
//       res?.data?.order?.filter((order) => {
//         return new Date(order.createdAt).getMonth() === new Date().getMonth();
//       })
//     );
//     setYearOrders(
//       res?.data?.order?.filter((order) => {
//         return (
//           new Date(order.createdAt).getFullYear() === new Date().getFullYear()
//         );
//       })
//     );
//     setLastYearOrders(
//       res?.data?.order?.filter((order) => {
//         return (
//           new Date(order.createdAt).getFullYear() ===
//           new Date().getFullYear() - 1
//         );
//       })
//     );
//   };
//   const getProcessingOrder = async () => {
//     let res = await axios.get(`/api/order/getAll/processing`, {
//       headers: {
//         Authorization: `Bearer ${token}`,
//       },
//     });
//     // console.log(res.data);
//     setProcessingOrders(res?.data?.order);
//   };
//   const getDispatchedOrder = async () => {
//     let res = await axios.get(`/api/order/getAll/dispatched`, {
//       headers: {
//         Authorization: `Bearer ${token}`,
//       },
//     });
//     // console.log(res.data);
//     setDispatchedOrders(res?.data?.order);
//   };
//   const getDeliveredOrder = async () => {
//     let res = await axios.get(`/api/order/getAll/delivered`, {
//       headers: {
//         Authorization: `Bearer ${token}`,
//       },
//     });
//     // console.log(res.data);
//     setDeliveredOrders(res?.data?.order);
//   };
//   const getCancelledOrder = async () => {
//     let res = await axios.get(`/api/order/getAll/cancelled`, {
//       headers: {
//         Authorization: `Bearer ${token}`,
//       },
//     });
//     // console.log(res.data);
//     setCancelledOrders(res?.data?.order);
//   };

//   useEffect(() => {
//     getAllOrder();
//     getProcessingOrder();
//     getDispatchedOrder();
//     getDeliveredOrder();
//     getCancelledOrder();
//   }, [token]);
//   const date = new Date();
//   const day = date.getDate();
//   const suffix =
//     day === 1 || day === 21 || day === 31
//       ? "st"
//       : day === 2 || day === 22
//       ? "nd"
//       : day === 3 || day === 23
//       ? "rd"
//       : "th";
//   const month = date.toLocaleDateString("en-US", { month: "long" });
//   const formattedDate = `${day}${suffix} ${month}`;
//   // console.log(formattedDate);
//   const year = date.toLocaleDateString("en-US", { year: "numeric" });
//   const formattedmonth = `${month} ${year}`;
  return (
    <>
      <h4>Principal Distributor</h4>
      <CRow>
        <CCol sm={6} lg={3}>
          <CWidgetStatsA
            className="mb-4"
            color="primary"
            value={<>{users.length}</>}
            title="Total Principal Distributor"
          />
        </CCol>
        </CRow>
        <h4>Sales Coordinator</h4>
      <CRow>
        <CCol sm={6} lg={3}>
          <CWidgetStatsA
            className="mb-4"
            color="primary"
            value={<>{salescoordinator}</>}
            title="Total Sales Coordinator"
          />
        </CCol>
        </CRow>
        <h4>Territory Manager</h4>
        <CRow>
        <CCol sm={6} lg={3}>
          <CWidgetStatsA
            className="mb-4"
            color="primary"
            value={<>{territorymanager}</>}
            title="Total Territory Manager"
          />
        </CCol>
        </CRow>
        {/* <CCol sm={6} lg={3}>
          <CWidgetStatsA
            className="mb-4"
            color="primary"
            value={<>{Requests.length}</>}
            title="Contact Requests"
          />
        </CCol> */}
      {/* <CCol sm={6} lg={3}>
        <CWidgetStatsA
          className="mb-4"
          color="warning"
          value={
            <>
              {requirement.length}

            </>
          }
          title="Requirements"

        />
      </CCol>
      <CCol sm={6} lg={3}>
        <CWidgetStatsA
          className="mb-4"
          color="danger"
          value={
            <>
              {news.length}

            </>
          }
          title="Total News"

        />
      </CCol>
      <CCol sm={6} lg={3}>
        <CWidgetStatsA
          className="mb-4"
          color="success"
          value={
            <>
              {offer.length}

            </>
          }
          title="Total Offers"

        />
      </CCol>
      <CCol sm={6} lg={3}>
        <CWidgetStatsA
          className="mb-4"
          color="dark"
          value={
            <>
              {event.length}

            </>
          }
          title="Total Events"

        /> */}
      {/* </CCol> */}
      {/* </CRow>
      <h4>Products and Categories</h4>
      <CRow>
        <CCol sm={6} lg={3}>
          <CWidgetStatsA
            className="mb-4"
            color="primary"
            value={<>{category.length}</>}
            title="Total Categories"
          />
        </CCol>
        <CCol sm={6} lg={3}>
          <CWidgetStatsA
            className="mb-4"
            color="primary"
            value={<>{product.length}</>}
            title="Total products"
          />
        </CCol>
      </CRow>
      <h4>Orders</h4>
      <CRow>
        <CCol sm={6} lg={3}>
          <CWidgetStatsA
            className="mb-4"
            color="primary"
            value={<>{orders.length}</>}
            title="Total orders"
          />
        </CCol>
        <CCol sm={6} lg={3}>
          <CWidgetStatsA
            className="mb-4"
            color="primary"
            value={<>{todayorders.length}</>}
            title={`Orders for ${formattedDate}`}
          />
        </CCol>
        <CCol sm={6} lg={3}>
          <CWidgetStatsA
            className="mb-4"
            color="primary"
            value={<>{monthorders.length}</>}
            title={`Orders for ${formattedmonth}`}
          />
        </CCol>
        <CCol sm={6} lg={3}>
          <CWidgetStatsA
            className="mb-4"
            color="primary"
            value={<>{yearorders.length}</>}
            title={`Orders for ${year}`}
          />
        </CCol>
        <CCol sm={6} lg={3}>
          <CWidgetStatsA
            className="mb-4"
            color="primary"
            value={<>{lastyearorders.length}</>}
            title={`Orders for ${year - 1}`}
          />
        </CCol>
        <CCol sm={6} lg={3}>
          <CWidgetStatsA
            className="mb-4"
            color="dark"
            value={<>{processingorders.length}</>}
            title="Orders - Processing"
          />
        </CCol>
        <CCol sm={6} lg={3}>
          <CWidgetStatsA
            className="mb-4"
            color="warning"
            value={<>{dispatchedorders.length}</>}
            title="Orders - Dispatched"
          />
        </CCol>
        <CCol sm={6} lg={3}>
          <CWidgetStatsA
            className="mb-4"
            color="success"
            value={<>{deliveredorders.length}</>}
            title="Orders - Delivered"
          />
        </CCol>
        <CCol sm={6} lg={3}>
          <CWidgetStatsA
            className="mb-4"
            color="danger"
            value={<>{cancelledorders.length}</>}
            title="Orders - Cancelled"
          />
        </CCol> 
      </CRow>*/}
    </>
  );
};

export default WidgetsDropdown;