import { Badge, Button, message } 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";
import styles from "./MenuFooter.module.css";

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);

  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={totalItems === 0 ? "#" : `/${subdomain}/cart`}
            onClick={(e) => {
              if (totalItems === 0) {
                e.preventDefault();
                message.warning(t("cart.emptyCartMessage"));
              }
            }}
            style={{
              width: "100%",
              padding: "0 16px",
              display: "flex",
              flexDirection: "row",
              justifyContent: "space-between",
              backgroundColor: colors.primary,
              height: 48,
              borderRadius: "999px",
              opacity: totalItems === 0 ? 0.5 : 1,
              pointerEvents: totalItems === 0 ? "none" : "auto",
              cursor: totalItems === 0 ? "not-allowed" : "pointer",
            }}
          >
            <Button
              type="primary"
              shape="round"
              style={{
                height: 48,
                boxShadow: "none",
              }}
            >
              <Badge
                count={totalItems}
                size="default"
                offset={isRTL ? [-2, 18] : [2, 18]}
                className={styles.cartBadge}
                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",
                }}
              >
                {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>
      )}
    </>
  );
}
