import { Button } from "antd";
import styles from "./dashboard.module.scss";
import cx from "classnames";
import { FC, useEffect, useState } from "react";
import * as CommonApi from "../../../pages/api/common";
import { baseUrl } from "../../../constants/urls";
import { Doughnut, Line } from "react-chartjs-2";
import {
  DeliveredProcedureOutlined,
  LeftOutlined,
  RightOutlined,
} from "@ant-design/icons";
import moment from "moment";
import {
  Chart as ChartJS,
  ArcElement,
  Tooltip,
  Legend,
  CategoryScale,
  LinearScale,
  PointElement,
  LineElement,
  Title,
} from "chart.js";
import Slider from "react-slick";
import { useRouter } from "next/router";
import { useMediaQuery } from "react-responsive";
ChartJS.register(
  ArcElement,
  Tooltip,
  Legend,
  CategoryScale,
  LinearScale,
  PointElement,
  LineElement,
  Title
);
const Dashboard: FC<any> = () => {
  const isMobile = useMediaQuery({ maxWidth: 767.68 });
  const options: any = {
    responsive: true,
    maintainAspectRatio: false,
    defaultFontSize: "14px",
    plugins: {
      legend: {
        position: "right",
        fontSize: "16px",
        onClick: function (event: any, legendItem: any) { },
      },
      title: {
        display: false,
        color: "blue",
        font: {
          size: 34,
        },
        padding: {
          top: 30,
          bottom: 30,
        },
        responsive: true,
        animation: {
          animateScale: true,
        },
      },
    },
  };
  const lineOptions: any = {
    responsive: true,
    maintainAspectRatio: false,
    scales: {
      x: {
        grid: {
          display: false,
        },
      },
      y: {
        grid: {
          display: false,
        },
      },
    },
    plugins: {
      legend: {
        position: "top" as const,
      },
      title: {
        display: false,
      },
    },
  };
  const [loginRes, setLoginRes] = useState<any>({});
  const [dashboardRes, setDashboardRes] = useState<any>({});
  const [quotes, setQuotes] = useState([]);
  const router = useRouter();
  const [graphdata, setGraphdataData] = useState<any>({
    labels: [],
    datasets: [
      {
        label: "# of Votes",
        data: [],
        backgroundColor: [],
      },
    ],
  });
  const [lineGraph, setLineGraph] = useState<any>({
    labels: [],
    datasets: [
      {
        label: "",
        data: [],
        backgroundColor: "#000",
      },
    ],
  });

  const slickSettings = {
    dots: false,
    arrows: true,
    infinite: false,
    nextArrow: <SampleNextArrow />,
    prevArrow: <SamplePrevArrow />,
    speed: 400,
    slidesToShow: 2,
    slidesToScroll: 1,
    responsive: [
      {
        breakpoint: 769,
        settings: {
          slidesToShow: 1,
          autoplay: true,
          autoplaySpeed: 2000,
        }
      }
    ]
  };


  function SampleNextArrow(props: any) {
    const { className, style, onClick } = props;
    return (
      <div
        style={{
          ...style,
          display: "block",
          zIndex: "15",
          borderRadius: "50%",
          height: 20,
          width: 20,
          opacity: "1",
          right: 0,
          color: "#fff",
          justifyContent: "center",
        }}
        onClick={onClick}
      >
        {" "}
        <RightOutlined className={styles.iconRightDisplay} />
      </div>
    );
  }

  function SamplePrevArrow(props: any) {
    const { className, style, onClick } = props;
    return (
      <div
        style={{
          ...style,
          display: "block",
          zIndex: "15",
          borderRadius: "50%",
          height: 20,
          width: 20,
          opacity: "1",
          left: 0,
          color: "#fff",
          justifyContent: "center",
        }}
        onClick={onClick}
      >
        <LeftOutlined className={styles.iconLeftDisplay} />
      </div>
    );
  }

  function getMonthName(monthNumber: any) {
    const date = new Date();
    date.setMonth(monthNumber - 1);

    // 👇️ using the visitor's default locale
    return date.toLocaleString([], {
      month: "long",
    });
  }
  useEffect(() => {
    const val: any = localStorage.getItem("loginDetails");
    const details = JSON.parse(val);
    setLoginRes(details);
    const token = details?.token;
    CommonApi.getRequestWithToken(
      `${baseUrl}/api/customer/dashboard`,
      token
    ).then((res) => {
      setDashboardRes(res?.data);
      const keysNew = Object.keys(res?.data?.monthly_spent);

      const nameMonth = keysNew.map((id) => getMonthName(id));
      const keysLine = Object.keys(res?.data?.monthly_order_count);

      const lineMonth = keysLine.map((id) => getMonthName(id));
      setGraphdataData({
        labels: nameMonth,
        datasets: [
          {
            data: Object.values(res?.data?.monthly_spent),
            backgroundColor: [
              "#FAC917",
              "#291C61",
              "#BAEDBD",
              "#F3465F",
              "#8E8EAE",
              "#f00",
            ],
            ...graphdata,
          },
        ],
        text: "23%",
      });
      setLineGraph({
        labels: lineMonth,
        datasets: [
          {
            label: "",
            fill: false,
            data: Object.values(res?.data?.monthly_order_count),
            // backgroundColor:"#291C61",
            borderColor: "#291C61",
          },
        ],
      });
    });
    CommonApi.getRequestWithToken(
      `${baseUrl}/api/shop/customer/quote-management/get-quote`,
      token
    ).then((quotes) => {
      setQuotes(quotes?.data?.data);
    });
  }, []);

  const redirectOrder = (order: any) => {
    router.push(`/customer/account/orders/view/${order.id}`);
  }
  return (
    <>
    <div className={styles.dashboardContainer}>
      <h1 className={styles.dashhboardHeader}>Dashboard</h1>
      <div className={cx(styles.graphcontainer)}>
        <div className={styles.activeOrder}>
          <p>No. of Active Orders</p>
          <span className={styles.numbers}>
            <p className={styles.counts}>
              {dashboardRes?.active_orders?.length}
            </p>
            {/* <p className={styles.percent}>
              +11.01%{" "}
              <BiTrendingUp style={{ fontSize: "16px", marginLeft: "4px" }} />
            </p> */}
          </span>
        </div>
        <div className={styles.pendingOrder}>
          <p>Pending Orders</p>
          <span className={styles.numbers}>
            <p className={styles.counts}>
              {dashboardRes?.pending_orders?.length}
            </p>
            {/* <p className={styles.percent}>
              +11.01%
              <BiTrendingUp style={{ fontSize: "16px", marginLeft: "4px" }} />
            </p> */}
          </span>
        </div>
        <div className={styles.cancelledOrder}>
          <p>Cancelled Orders</p>
          <span className={styles.numbers}>
            <p className={styles.counts} style={{ color: "#B60B0B" }}>
              {dashboardRes?.cancelled_orders}
            </p>
            {/* <p className={styles.percent}>
              +11.01%{" "}
              <BiTrendingUp style={{ fontSize: "16px", marginLeft: "4px" }} />
            </p> */}
          </span>
        </div>
        <div className={styles.completedOrder}>
          <p>Completed Orders</p>
          <span className={styles.numbers}>
            <p className={styles.counts} style={{ color: "#198084" }}>
              {dashboardRes?.completed_orders}
            </p>
            {/* <p className={styles.percent}>
              +11.01%
              <BiTrendingUp style={{ fontSize: "16px", marginLeft: "4px" }} />
            </p> */}
          </span>
        </div>
      </div>
      <div className="ant-row">
        <div className="ant-col ant-col-xs-24 ant-col-xl-12">
          <div className={styles.graphDiv}>
            <h2 className={styles.graphTitle}>Monthly Spent</h2>
            <div className="px-3 pb-3">
              <Doughnut
                data={graphdata}
                options={options}
                height={isMobile ? 200 : 300}
                width={isMobile ? "90%" : 1500}
              />
            </div>
          </div>
        </div>
        <div className="ant-col ant-col-xs-24 ant-col-xl-12">
          <div className={styles.graphDiv}>
            <h2 className={styles.graphTitle}>Monthly Orders</h2>
            <div className="px-3 pb-3">
              <Line options={lineOptions} data={lineGraph} />
            </div>
          </div>
        </div>
      </div>
      {isMobile?<>
       
        <div className="ant-col ant-col-xs-24 ant-col-xl-12 mt-6">
          <div className={styles.orderyetDelivery}>
            <div className="flex justify-between pt-4 px-3">
              <h2 className={styles.orderTitle}>
                Orders yet to be delivered
              </h2>

              <DeliveredProcedureOutlined
                className={styles.iconOrder}
                rotate={90}
              />

            </div>
            <Slider {...slickSettings} className="pb-6 px-6">
              {dashboardRes?.pending_orders
                ?.concat(dashboardRes?.active_orders)
                .map((order: any, idx: number) => {
                  return (
                    <div key={idx} className={styles.sliderCard} >
                      <div className={styles.spentDate}>
                        Ordered as on{" "}
                        {moment(order?.created_at).format("DD-MM-YYYY")}
                      </div>
                      <div className="ant-row">
                        <div className={cx(styles.labelOrder, "ant-col-xl-12")}>
                          Total Amount
                        </div>
                        <div className={cx(styles.valueOrder, "ant-col-xl-12")}>
                          ₹{order?.grand_total}
                        </div>
                      </div>
                      <div className="ant-row">
                        <div className={cx(styles.labelOrder, "ant-col-xl-12")}>
                          No. of Products
                        </div>
                        <div className={cx(styles.valueOrder, "ant-col-xl-12")}>
                          {order?.total_qty_ordered}
                        </div>
                      </div>
                      <div className="ant-row">
                        <div className={cx(styles.labelOrder, "ant-col-xl-12")}>
                          Status
                        </div>
                        <div className={cx(styles.valueOrder, "ant-col-xl-12")}>
                          {order?.status}
                        </div>
                      </div>
                      <Button type="primary" block className="my-3" onClick={() => { redirectOrder(order) }}>
                        View Order Details
                      </Button>
                    </div>
                  );
                })}
            </Slider>
          </div>
        </div>
       {/* <div className="ant-col ant-col-xs-24 ant-col-xl-12 mt-4">
          <div className={styles.orderyetDelivery}>
            <div className="flex justify-between pt-4 px-3">
              <div>
                <h2 className={styles.orderTitle}>
                  No. of Quotes Approved/Pending
                </h2>
              </div>
            </div>
            <div className={cx(styles.quoteHeader, "ant-row mt-3")}>
              <div
                className={cx(styles.quoteHeaderTitleNumber, "ant-col-xl-2")}
              >
                SNo
              </div>
              <div className={cx(styles.quoteHeaderTitle, "ant-col-xl-5")}>
                Quote Date
              </div>
              <div className={cx(styles.quoteHeaderTitle, "ant-col-xl-8")}>
                Product name
              </div>
              <div
                className={cx(styles.quoteHeaderTitleNumber, "ant-col-xl-4")}
              >
                Quantity
              </div>
              <div className={cx(styles.quoteHeaderTitle, "ant-col-xl-5")}>
                Quote Status
              </div>
            </div>
            {quotes.map((quotes: any, idx: number) => {
              return (
                <div key={idx}>
                  <div className={cx("ant-row py-2")}>
                    <div
                      className={cx(
                        styles.quotesValuesNumber,
                        "ant-col-xl-2 flex content-center"
                      )}
                    >
                      {idx + 1}
                    </div>
                    <div className={cx(styles.quotesValues, "ant-col-xl-5")}>
                      {moment(quotes?.created_at).format("DD-MM-YYYY")}
                    </div>
                    <div className={cx(styles.quotesValues, "ant-col-xl-8")}>
                      {quotes?.name}
                    </div>
                    <div
                      className={cx(
                        styles.quotesValuesNumber,
                        "ant-col-xl-4 flex content-center"
                      )}
                    >
                      {quotes?.number_of_products}
                    </div>
                    <div className={cx(styles.quotesValues, "ant-col-xl-5")}>
                      {quotes?.status}
                    </div>
                  </div>
                  <hr />
                </div>
              );
            })}
          </div>
        </div> */}
     
        </>:<div className="ant-row mb-3" >
        <div className="ant-col ant-col-xs-24 ant-col-xl-12">
          <div className={styles.orderyetDelivery}>
            <div className="flex justify-between pt-4 px-3">
              <h2 className={styles.orderTitle}>
                Orders yet to be delivered
              </h2>

              <DeliveredProcedureOutlined
                className={styles.iconOrder}
                rotate={90}
              />

            </div>
            <Slider {...slickSettings} className="pb-6 px-6">
              {dashboardRes?.pending_orders
                ?.concat(dashboardRes?.active_orders)
                .map((order: any, idx: number) => {
                  return (
                    <div key={idx} className={styles.sliderCard} >
                      <div className={styles.spentDate}>
                        Ordered as on{" "}
                        {moment(order?.created_at).format("DD-MM-YYYY")}
                      </div>
                      <div className="ant-row">
                        <div className={cx(styles.labelOrder, "ant-col-xl-12")}>
                          Total Amount
                        </div>
                        <div className={cx(styles.valueOrder, "ant-col-xl-12")}>
                          ₹{order?.grand_total}
                        </div>
                      </div>
                      <div className="ant-row">
                        <div className={cx(styles.labelOrder, "ant-col-xl-12")}>
                          No. of Products
                        </div>
                        <div className={cx(styles.valueOrder, "ant-col-xl-12")}>
                          {order?.total_qty_ordered}
                        </div>
                      </div>
                      <div className="ant-row">
                        <div className={cx(styles.labelOrder, "ant-col-xl-12")}>
                          Status
                        </div>
                        <div className={cx(styles.valueOrder, "ant-col-xl-12")}>
                          {order?.status}
                        </div>
                      </div>
                      <Button type="primary" block className="my-3" onClick={() => { redirectOrder(order) }}>
                        View Order Details
                      </Button>
                    </div>
                  );
                })}
            </Slider>
          </div>
        </div>
       <div className="ant-col ant-col-xs-24 ant-col-xl-12">
          <div className={styles.orderyetDelivery}>
            <div className="flex justify-between pt-4 px-3">
              <div>
                <h2 className={styles.orderTitle}>
                  No. of Quotes Approved/Pending
                </h2>
              </div>
            </div>
            <div className={cx(styles.quoteHeader, "ant-row mt-3")}>
              <div
                className={cx(styles.quoteHeaderTitleNumber, "ant-col-xl-2")}
              >
                SNo
              </div>
              <div className={cx(styles.quoteHeaderTitle, "ant-col-xl-5")}>
                Quote Date
              </div>
              <div className={cx(styles.quoteHeaderTitle, "ant-col-xl-8")}>
                Product name
              </div>
              <div
                className={cx(styles.quoteHeaderTitleNumber, "ant-col-xl-4")}
              >
                Quantity
              </div>
              <div className={cx(styles.quoteHeaderTitle, "ant-col-xl-5")}>
                Quote Status
              </div>
            </div>
            {quotes.map((quotes: any, idx: number) => {
              return (
                <div key={idx}>
                  <div className={cx("ant-row py-2")}>
                    <div
                      className={cx(
                        styles.quotesValuesNumber,
                        "ant-col-xl-2 flex content-center"
                      )}
                    >
                      {idx + 1}
                    </div>
                    <div className={cx(styles.quotesValues, "ant-col-xl-5")}>
                      {moment(quotes?.created_at).format("DD-MM-YYYY")}
                    </div>
                    <div className={cx(styles.quotesValues, "ant-col-xl-8")}>
                      {quotes?.name}
                    </div>
                    <div
                      className={cx(
                        styles.quotesValuesNumber,
                        "ant-col-xl-4 flex content-center"
                      )}
                    >
                      {quotes?.number_of_products}
                    </div>
                    <div className={cx(styles.quotesValues, "ant-col-xl-5")}>
                      {quotes?.status}
                    </div>
                  </div>
                  <hr />
                </div>
              );
            })}
          </div>
        </div>
      </div>}
      </div>
      </>
  );
};
export default Dashboard;