import { PlusOutlined } from "@ant-design/icons";
import { Button } from "antd";
import { addItem } from "features/order/orderSlice";
import useBreakPoint from "hooks/useBreakPoint";
import { useTranslation } from "react-i18next";
import { useNavigate, useParams } from "react-router-dom";
import { useAppDispatch, useAppSelector } from "redux/hooks";
import { colors } from "ThemeConstants";
import { Product } from "utils/types/appTypes";

export function AddToCart({ item }: { item: Product }) {
  const { isRTL } = useAppSelector((state) => state.locale);
  const { t } = useTranslation();
  const dispatch = useAppDispatch();
  const { isMobile, isTablet } = useBreakPoint();
  const { id } = useParams();
  const navigate = useNavigate();

  const handleQuickAdd = (item: Product) => {
    dispatch(
      addItem({
        item: {
          id: item.id,
          name: item.name,
          price: item.price,
          image: item.image,
          description: item.description,
          variant: "None",
          extras: [],
          extrasgroup: [],
        },
        quantity: 1,
      }),
    );
  };
  return (
    <Button
      shape="round"
      title="add"
      iconPosition="start"
      icon={
        <PlusOutlined
          title="add"
          style={{
            position: "relative",
            top: "-1px",
          }}
        />
      }
      size={isMobile || isTablet ? "small" : "middle"}
      onClick={(e) => {
        if (item.isHasVarint) {
          navigate(`/${id}/menu`);
        } else {
          e.preventDefault();
          e.stopPropagation();
          handleQuickAdd(item);
        }
      }}
      style={{
        position: "absolute",
        bottom: -10,
        [isRTL ? "right" : "left"]: isMobile ? "5%" : "15%",
        zIndex: 1,
        width: isMobile ? 82 : 100,
        height: isMobile ? 32 : 44,
        fontSize: isMobile ? "1rem" : 18,
        fontWeight: 600,
        border: 0,
        backgroundColor: colors.primary,
        color: "#FFF",
      }}
    >
      {t("common.add")}
    </Button>
  );
}
