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

export function CartButton() {
  const { isRTL } = useAppSelector((state) => state.locale);
  const { subdomain } = useParams();
  const navigate = useNavigate();
  const items = useAppSelector(selectCartItems);
  const { orderType } = useAppSelector((s) => s.order);

  const onCartClick = useCallback(() => {
    console.log(orderType);
    
    navigate(
      orderType === OrderType.Pay
        ? `/${subdomain}/pay`
        : `/${subdomain}/menu?orderType=${orderType}`,
    );
  }, [navigate, subdomain, orderType]);

  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",
        display: 'flex',
        flexDirection: "row",
        justifyContent:"space-around"
      }}
    >
      <Badge count={totalItems} size="default" className={styles.badge}>
        <Button
          type="primary"
          shape="circle"
          size={"large"}
          icon={<CartIcon />}
          onClick={onCartClick}
          className={`${styles.scrollToTopButton}`}
        />
      </Badge>
      <ProText>Cart</ProText>
    </div>
  );
}
