import React, { useEffect, useState } from "react";
import style from "./orders.module.css";
import NavbarAccount from "@/components/account/navbarAccount";
import ProductCard from "@/components/account/orders/productCard";
import { customerApi } from "@/api/api";
import Loader from "@/components/utils/loader";
import Pagination from "@/components/utils/pagination";
import {
  ArrowBack,
  RefreshOutlined,
  ShoppingBagOutlined,
} from "@mui/icons-material";
import { useRouter } from "next/router";
import Head from "next/head";

const Orders = () => {
  const [orders, setOrders] = useState({ data: [] });
  const [loader, setLoader] = useState(true);
  const [page, setPage] = useState(1);
  const router = useRouter();

  const loadData = async () => {
    setLoader(true);
    setOrders({ data: [] });
    await customerApi
      .get("/orders?limit=10&page=" + page)
      .then((res) => {
        console.log("Response: ", res);
        if (res.data.result && res.data.result.data.length > 0) {
          setOrders(res.data.result);
        }
        setLoader(false);
      })
      .then((err) => {
        console.log("err");
        setLoader(false);
      });
  };

  useEffect(() => {
    loadData();
  }, [page]);
  return (
    <React.Fragment>
      <Head>
        <title>Orders</title>
        <meta name="viewport" content="width=device-width, initial-scale=1.0" />
      </Head>
      <div className="container mb-3">
        <div className={`account_header`}>
          <div className={`account_header_flex`}>
            <div className={`account_header_flex_back_btn`}>
              <button
                type="button"
                className={`secondary-btn`}
                onClick={() => router.push("/account")}
              >
                <ArrowBack />
              </button>
              <button
                type="button"
                className={`secondary-btn`}
                onClick={() => loadData()}
              >
                <RefreshOutlined />
              </button>
            </div>
            <div className={`account_header_flex_title`}>
              <ShoppingBagOutlined />
              My Orders
            </div>
          </div>
          <hr></hr>
        </div>
        {loader && <Loader className={style.loader} />}
        {!loader &&
          (orders.data.length > 0 ? (
            <>
              <div className={`${style.product_section} container`}>
                {orders.data.map((item) => (
                  <ProductCard
                    order={item}
                    address={item.shipping_address}
                    pickup_name={item.pickup_name}
                    pickup_address={item.pickup_address}
                    delivery_type={item.delivery_type}
                    key={item.name}
                    reload={() => loadData()}
                  />
                ))}
              </div>
              <Pagination
                totalData={orders.total}
                totalDataPerPage={10}
                totalNumberToDisplay={5}
                page={page}
                getPage={(value) => setPage(value)}
                entriesText={true}
              />
            </>
          ) : (
            <p className="account_error_text">No Orders</p>
          ))}
      </div>
    </React.Fragment>
  );
};

export default Orders;
