import NextIcon from "components/Icons/NextIcon";
import InvoiceIcon from "components/Icons/order/InvoiceIcon";
import ProInputCard from "components/ProInputCard/ProInputCard.tsx";
import ProText from "components/ProText";
import { useTranslation } from "react-i18next";
import { useAppSelector } from "redux/hooks";
import { selectCart } from "features/order/orderSlice";
import { useLocation, useNavigate, useParams } from "react-router-dom";
import { useGetOrderDetailsQuery } from "redux/api/others";
import BackIcon from "components/Icons/BackIcon";

export default function BriefMenuCard() {
  const { t } = useTranslation();
  const { items } = useAppSelector(selectCart);
  const { subdomain, orderId } = useParams();
  const navigate = useNavigate();
  const location = useLocation();
  const { data: orderDetails } = useGetOrderDetailsQuery(
    {
      orderID: orderId || "",
      restaurantID: localStorage.getItem("restaurantID") || "",
    },
    {
      skip: !orderId,
      // return it t0 60000 after finish testing
    },
  );
  const totalItems = items.length || orderDetails?.orderItems.length;
  const { isRTL } = useAppSelector((state) => state.locale);

  return (
    <>
      <ProInputCard
        title={t("checkout.orderSummary")}
        dividerStyle={{ margin: "5px 0 0 0" }}
      >
        <div
          style={{
            display: "flex",
            flexDirection: "row",
            justifyContent: "space-between",
            padding: "16px 0",
          }}
          onClick={() => {
            if (orderId && location.pathname.includes("/order/")) {
              navigate(`/${subdomain}/order/details/${orderId}`);
            } else {
              navigate(`/${subdomain}/cart`);
            }
          }}
        >
          <ProText
            style={{
              fontWeight: 400,
              fontStyle: "Regular",
              fontSize: 12,
              lineHeight: "140%",
              letterSpacing: "0%",
              color: "#777580",
              cursor: "pointer",
            }}
          >
            <span
              style={{
                [isRTL ? "marginLeft" : "marginRight"]: 5,
                position: "relative",
                top: 3.5,
              }}
            >
              <InvoiceIcon />
            </span>
            {t("checkout.viewOrder")} ( {totalItems} {t("cart.items")} )
          </ProText>
          {isRTL ? <BackIcon /> : <NextIcon />}
        </div>
      </ProInputCard>
    </>
  );
}