import { PlusOutlined } from "@ant-design/icons";
import { Button, message } from "antd";
import { useTranslation } from "react-i18next";
import { useNavigate, useParams } from "react-router-dom";
import { useAppSelector } from "redux/hooks.ts";
import { useGetRestaurantDetailsQuery } from "redux/api/others";
import { colors } from "ThemeConstants.ts";
import styles from "./AddToCartButton.module.css";

export function AddToCartButton() {
  const { isRTL } = useAppSelector((state) => state.locale);
  const { t } = useTranslation();

  const { subdomain } = useParams();
  const navigate = useNavigate();
  const { data: restaurant } = useGetRestaurantDetailsQuery(subdomain, {
    skip: !subdomain,
  });

  const handleClick = () => {
    if (restaurant && !restaurant.isOpened) {
      message.warning(t("menu.restaurantIsClosed"));
      return;
    }
    navigate(`/${subdomain}/menu`);
  };

  return (
    <Button
      shape="round"
      title="add"
      iconPosition="start"
      icon={<PlusOutlined title="add" className={styles.plusIcon} />}
      size="small"
      onClick={handleClick}
      className={`${styles.addButton} ${isRTL ? styles.addButtonRTL : styles.addButtonLTR}`}
      style={{ backgroundColor: colors.primary }}
    >
      {t("common.add")}
    </Button>
  );
}
