import { Badge, Button } from "antd";
import CartIcon from "components/Icons/cart/CartIcon";
import ProText from "components/ProText";
import { selectCartItems } from "features/order/orderSlice";
import useBreakPoint from "hooks/useBreakPoint";
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 totalItems = items.length;

  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={`/${subdomain}/cart`}
            style={{
              width: "100%",
              padding: "0 16px",
            }}
          >
            <Button
              type="primary"
              shape="round"
              style={{
                width: "100%",
                height: 50,
                boxShadow: "none",
              }}
            >
              <Badge
                count={totalItems}
                size="default"
                style={{
                  borderColor: colors.primary,
                  color: "white",
                  fontSize: isMobile ? 10 : 12,
                  width: isMobile ? 10 : 12,
                }}
              >
                <ProText
                  style={{
                    color: "white",
                    margin: "0 10px",
                  }}
                >
                  {t("menu.viewCart")}
                </ProText>
                <span
                  style={{
                    position: "relative",
                    top: 4,
                  }}
                >
                  <CartIcon />
                </span>
              </Badge>
            </Button>
          </Link>
        </div>
      )}
    </>
  );
}