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

export function AddToCartButton({ item }: { item: Product }) {
  const { isRTL } = useAppSelector((state) => state.locale);
  const { t } = useTranslation();
  const dispatch = useAppDispatch();

  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" className={styles.plusIcon} />}
      size="small"
      onClick={(e) => {
        if (item.isHasVarint) {
          navigate(`/${id}/menu`);
        } else {
          e.preventDefault();
          e.stopPropagation();
          handleQuickAdd(item);
        }
      }}
      className={`${styles.addButton} ${isRTL ? styles.addButtonRTL : styles.addButtonLTR}`}
      style={{ backgroundColor: colors.primary }}
    >
      {t("common.add")}
    </Button>
  );
}