"use client";

import Navbar from "@comp/Navbar/page";
import PersianNumber from "plugins/PersianNumber";
import SideBarProfile from "../component/SideBarProfile/page";
import { useContext, useEffect, useState } from "react";
import AppContext from "@ctx/AppContext";
import moment from "jalali-moment";
import BottomSheetSeeOrder from "plugins/bottomSheet/BottomSheetSeeOrder";

const Page = () => {
  const CTX = useContext(AppContext);
  const orderUser = CTX.state.orderUser;

  const [idOrder, setIdOrder] = useState(null);

  const [bag, setBag] = useState([]);

  const getStatusDescription = (status) => {
    switch (status) {
      case 0:
        return "سبد خرید";
      case 1:
        return "ثبت شده";
      case 2:
        return "پرداخت شده";
      case 10:
        return "درحال پردازش";
      case 20:
        return "ارسال شده";
      case 200:
        return "انجام شده";
      case 500:
        return "کنسل شده";
      default:
        return "نامعلوم";
    }
  };

  const handleSubmit = (status, id) => {
    if (status == 0) {
      CTX.GoCheckOut();
    } else {
      setIdOrder(id);
      setTimeout(() => {
        CTX.setBottomSheetSeeOrderOpen(true);
      }, 100);
    }
  };

  useEffect(() => {
    CTX.fetchOrderUser();
  }, []);
  return (
    <>
      <Navbar theme={1} />
      <div className="grid xs:grid-cols-1 lg:grid-cols-4 xl:grid-cols-5  rtl gap-6 xs:px-[20px] lg:px-[100px] xl:[300px]">
        <SideBarProfile />

        <div className="lg:col-span-3 xl:col-span-4 ">
          <div className="bg-gray-100 p-5 mt-5 rounded-lg overflow-hidden">
            <p className="mb-0 font-bold">سابقه سفارشات</p>
            {/* 
            <div className="flex rounded-xl bg-gray-300 mt-3 w-fit p-2 ">
              <div className="bg-primary-500 py-2 rounded-xl xs:px-2 lg:px-5">
                <p className="mb-0 text-white xs:text-sm lg:text-base"> جاری</p>
              </div>
              <div className=" py-2 rounded-full xs:px-2  lg:px-5 text-gray-600">
                <p className="mb-0 xs:text-sm lg:text-base">تحویل شده</p>
              </div>
              <div className=" py-2 rounded-full xs:px-2  lg:px-5 text-gray-600">
                <p className="mb-0 xs:text-sm lg:text-base">مرجوع شده</p>
              </div>
              <div className=" py-2 rounded-full xs:px-2  lg:px-5 text-gray-600">
                <p className="mb-0 xs:text-sm lg:text-base">لغو شده</p>
              </div>
            </div> */}

            <div className="overflow-x-auto mt-5">
              <table
                className="table-auto w-full bg-white border-collapse rounded-lg"
                dir="rtl"
              >
                <thead>
                  <tr className="bg-gray-300 ">
                    <th className="px-4 text-right text-xs font-semibold text-gray-600 uppercase  border-b py-5">
                      قیمت{" "}
                    </th>
                    <th className="px-4 text-right text-xs font-semibold text-gray-600 uppercase border-b py-5">
                      تاریخ سفارش
                    </th>
                    <th className="px-4 text-right text-xs font-semibold text-gray-600 uppercase border-b py-5">
                      کد سفارش{" "}
                    </th>
                    <th className="px-4 text-right text-xs font-semibold text-gray-600 uppercase border-b py-5">
                      مرحله سفارش
                    </th>
                    <th className="px-4 text-right text-xs font-semibold text-gray-600 uppercase border-b py-5">
                      عملیات
                    </th>
                  </tr>
                </thead>

                <tbody className="text-gray-600 text-sm">
                  {orderUser?.map((e) => (
                    <>
                      {orderUser.length > 0 ? (
                        <tr className="border-b">
                          <td className="px-4 py-3">
                            {" "}
                            <PersianNumber
                              number={e.totalPrice.toLocaleString()}
                            />{" "}
                          </td>
                          <td className="px-4 py-3">
                            <PersianNumber
                              number={moment(e.orderAt)
                                .locale("fa")
                                .format("jYYYY/jM/jD")}
                            />
                          </td>
                          <td className="px-4 py-3 font-bold">
                            {e.factorCode}
                          </td>
                          <td
                            className={`px-4 py-3 ${
                              e.orderStatus == 500
                                ? "text-red-800"
                                : "text-green-500"
                            } text-green-500 font-medium`}
                          >
                            {getStatusDescription(e.orderStatus)}
                          </td>

                          <td className="px-4 py-3 text-green-500 font-medium">
                            {e.orderStatus == 500 ? (
                              "---"
                            ) : (
                              <button
                                className="btn btn-outline-primary !py-1 rounded-xl text-sm"
                                onClick={() =>
                                  handleSubmit(e.orderStatus, e.id)
                                }
                              >
                                {e.orderStatus == 0
                                  ? "ثبت سفارش"
                                  : "  مشاهده سفارش"}
                              </button>
                            )}
                          </td>
                        </tr>
                      ) : (
                        <div className="flex justify-center my-[100px]">
                          <p className="mb-0  rounded-full w-fit shadow bg-white p-5 ">
                            شما سفارشی ندارید
                          </p>
                        </div>
                      )}
                    </>
                  ))}

                  {/* Add more rows as needed */}
                </tbody>
              </table>
            </div>
          </div>
        </div>
      </div>

      <BottomSheetSeeOrder id={idOrder} />
    </>
  );
};

export default Page;