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

const Returned = () => {
  const router = useRouter();
  const [page, setPage] = useState(1);
  const [loader, setLoader] = useState(true);
  const [orders, setOrders] = useState({ data: [] });
  const loadData = async () => {
    setLoader(true);
    setOrders({ data: [] });
    await customerApi
      .get("/orders/return?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>Returned Products</title>
        <meta name="viewport" content="width=device-width, initial-scale=1.0" />
      </Head>
      <div className={`account_header container`}>
        <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`}>
            <RemoveShoppingCartOutlined />
            My Return
          </div>
        </div>
        <hr></hr>
      </div>
      {loader && <Loader className={style.loader} />}
      {!loader &&
        (orders.data.length > 0 ? (
          <>
            <div className="container mb-3">
              <div className={`${style.product_section}`}>
                {orders.data.map((item) => (
                  <ProductCard
                    order={item}
                    address={item.shipping_address}
                    key={item.name}
                    reload={() => loadData()}
                  />
                ))}
              </div>
              <Pagination
                totalData={orders.total}
                totalDataPerPage={10}
                totalNumberToDisplay={5}
                page={page}
                getPage={(value) => setPage(value)}
                entriesText={true}
              />
            </div>
          </>
        ) : (
          <p className="account_error_text">No Returns</p>
        ))}
    </React.Fragment>
  );
};

export default Returned;
