import { Badge, Button } from "antd";
import ArabicPrice from "components/ArabicPrice";
import BackIcon from "components/Icons/BackIcon";
import CartIcon from "components/Icons/cart/CartIcon";
import NextIcon from "components/Icons/NextIcon";
import ProText from "components/ProText";
import { selectCartItems, selectGrandTotal } from "features/order/orderSlice";
import useBreakPoint from "hooks/useBreakPoint";
import { OrderType } from "pages/checkout/hooks/types";
import { useTranslation } from "react-i18next";
import { Link, useParams } from "react-router-dom";
import { useAppSelector } from "redux/hooks";
import { colors, ProBlack2 } from "ThemeConstants";

export function MenuFooter() {
  const items = useAppSelector(selectCartItems);
  const { themeName } = useAppSelector((state) => state.theme);
  const { isMobile, isTablet } = useBreakPoint();
  const { t } = useTranslation();
  const { subdomain } = useParams();
  const { orderType } = useAppSelector((s) => s.order);
  const totalItems = items.length;
  const grandTotal = useAppSelector(selectGrandTotal);
  const { isRTL } = useAppSelector((state) => state.locale);

  console.log(orderType);

  return (
    <>
      {(isMobile || isTablet) && (
        <div
          style={{
            width: "100%",
            padding: "16px 16px 0",
            position: "fixed",
            bottom: 0,
            left: 0,
            height: "80px",
            display: "flex",
            flexDirection: "row",
            justifyContent: "space-around",
            gap: "1rem",
            zIndex: 999,
            backgroundColor: themeName === "light" ? "white" : ProBlack2,
          }}
        >
          <Link
            to={
              orderType === OrderType.Pay
                ? `/${subdomain}/pay`
                : `/${subdomain}/cart`
            }
            style={{
              width: "100%",
              padding: "0 16px",
              display: "flex",
              flexDirection: "row",
              justifyContent: "space-between",
              backgroundColor: colors.primary,
              height: 48,
              borderRadius: "999px",
            }}
          >
            <Button
              type="primary"
              shape="round"
              style={{
                height: 48,
                boxShadow: "none",
              }}
            >
              <Badge
                count={totalItems}
                size="default"
                offset={ isRTL ? [-2, 18] : [2, 18]}
                style={{
                  borderColor: colors.primary,
                  color: "white",
                  fontSize: isMobile ? 10 : 12,
                  width: isMobile ? 10 : 12,
                }}
  
              >
                <span
                  style={{
                    position: "relative",
                    top: 1,
                  }}
                >
                  <CartIcon />
                </span>
              </Badge>
              <ProText
                style={{
                  color: "white",
                  margin: "0 10px",
                }}
              >
                {orderType === OrderType.Pay
                  ? t("menu.pay")
                  : t("menu.viewCart")}
              </ProText>
            </Button>
            <div
              style={{
                display: "flex",
                flexDirection: "row",
                alignItems: "center",
                gap: 10,
              }}
            >
              <ArabicPrice
                price={grandTotal}
                style={{
                  color: "var(--secondary-background)",
                }}
              />
              {!isRTL ? (
                <NextIcon iconColor="var(--secondary-background)" />
              ) : (
                <BackIcon iconColor="var(--secondary-background)" />
              )}
            </div>
          </Link>
        </div>
      )}
    </>
  );
}