import { Badge, Button } from "antd";
import CartIcon from "components/Icons/cart/CartIcon";
import { selectCartItems } from "features/order/orderSlice";
import useBreakPoint from "hooks/useBreakPoint";
import { useCallback } from "react";
import { useNavigate, useParams } from "react-router-dom";
import { useAppSelector } from "redux/hooks";
import { colors } from "ThemeConstants";
import styles from "./CartButton.module.css";

export function CartButton() {
  const { isRTL } = useAppSelector((state) => state.locale);
  const { themeName } = useAppSelector((state) => state.theme);
  const { isMobile, isTablet } = useBreakPoint();
  const { id } = useParams();
  const navigate = useNavigate();
  const items = useAppSelector(selectCartItems);

  const onCartClick = useCallback(() => {
    navigate(`/${id}/cart`);
  }, [navigate, id]);

  const totalItems = items.reduce((sum, item) => sum + item.quantity, 0);

  return (
    <>
      <Button
        type="primary"
        shape="circle"
        size={"large"}
        icon={
          <div style={{ position: "relative", left: 4, top: 2 }}>
            <CartIcon />
          </div>
        }
        onClick={onCartClick}
        className={`${styles.scrollToTopButton}`}
        style={{
          position: "fixed",
          bottom: isMobile ? "100px" : isTablet ? "120px" : "25px",
          right: !isRTL ? "auto" : isMobile ? "20px" : "32px",
          left: !isRTL ? (isMobile ? "20px" : "32px") : "auto",
          zIndex: 1000,
          boxShadow: "0 4px 12px rgba(0, 0, 0, 0.15)",
          backgroundColor:
            themeName === "dark" ? colors.primary : colors.primary,
          borderColor: themeName === "dark" ? colors.primary : colors.primary,
          width: isMobile ? 48 : 56,
          height: isMobile ? 48 : 56,
        }}
      >
        <Badge
          count={totalItems}
          size="default"
          style={{ position: "absolute", top: -35, right: -18 }}
        />
      </Button>
    </>
  );
}
