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

export function CartButton() {
  const { isRTL } = useAppSelector((state) => state.locale);
  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 (
    <div
      style={{
        position: "fixed",
        bottom: "20px",
        right: !isRTL ? "auto" : "20px",
        left: !isRTL ? "20px" : "auto",
      }}
      className={'cart-button'}
    >
      <Badge count={totalItems} size="default" className={styles.badge}>
        <Button
          type="primary"
          shape="circle"
          size={"large"}
          icon={<CartIcon />}
          onClick={onCartClick}
          className={`${styles.scrollToTopButton}`}
        />
      </Badge>
    </div>
  );
}
