web-menu-react-version/src/pages/product/components/ProductFooter.tsx

import { ShoppingCartOutlined } from "@ant-design/icons";
import { Button, Form, message, Row } from "antd";
import { addItem } from "features/order/orderSlice";
import useBreakPoint from "hooks/useBreakPoint";
import { useMemo, useState } from "react";
import { useTranslation } from "react-i18next";
import { useAppDispatch, useAppSelector } from "redux/hooks";
import { colors, ProBlack2 } from "ThemeConstants";
import { Extra, Product, Variant } from "utils/types/appTypes";
import styles from "../product.module.css";
import { useGetRestaurantDetailsQuery } from "redux/api/others";
import { useParams } from "react-router-dom";
import TextArea from "antd/es/input/TextArea";
import ProText from "components/ProText";
import ActionsButtons from "./ActionsButtons/ActionsButtons";

export default function ProductFooter({
  product,
  isValid = true,
  selectedExtras,
  selectedVariant,
  selectedGroups,
  quantity,
  onClose,
  setQuantity,
}: {
  product: Product;
  isValid?: boolean;
  selectedExtras: Extra[];
  selectedVariant?: Variant;
  selectedGroups: Record<number, string[]>;
  quantity: number;
  onClose?: () => void;
  setQuantity: (quantity: number) => void;
}) {
  const { t } = useTranslation();
  const dispatch = useAppDispatch();
  const { themeName } = useAppSelector((state) => state.theme);
  const { isMobile, isDesktop } = useBreakPoint();
  const { isRTL } = useAppSelector((state) => state.locale);
  const [specialRequest, setSpecialRequest] = useState("");
  const { subdomain } = useParams();
  const { data: restaurant } = useGetRestaurantDetailsQuery(subdomain, {
    skip: !subdomain,
  });
  // Check if product has any customization options
  const hasCustomizationOptions = useMemo(() => {
    const hasVariants = product?.variants?.length > 0;
    const hasExtras = product.extras.length > 0;
    const hasExtraGroups = product?.theExtrasGroups?.length > 0;

    return hasVariants || hasExtras || hasExtraGroups;
  }, [
    product?.variants?.length,
    product.extras.length,
    product?.theExtrasGroups?.length,
  ]);
  const isBottomSheetView = useMemo(() => {
    return window.location.href.includes("menu");
  }, []);

  const handleAddToCart = () => {
    if (restaurant && !restaurant.isOpened) {
      message.warning(t("menu.restaurantIsClosed"));
      return;
    }

    if (!isValid) {
      message.error(t("menu.pleaseSelectRequiredOptions"));
      return;
    }

    if (product) {
      dispatch(
        addItem({
          item: {
            id: product?.id,
            name: product?.name,
            price:
              (selectedVariant?.price || product?.price) +
              selectedExtras.reduce((acc, extra) => acc + extra.price, 0),
            // selectedGroups.reduce((acc, extra) => acc + extra.price, 0),
            image: product?.image,
            description: product?.description,
            comment: specialRequest,
            variant: selectedVariant,
            extras: selectedExtras,
            extrasgroupnew: Object.keys(selectedGroups).map((key) => ({
              groupid: key,
              extrasid: selectedGroups[Number(key)],
            })),
            extrasgroup: Object.entries(selectedGroups).flatMap(
              ([groupId, extrasIds]) => {
                if (!extrasIds || extrasIds.length === 0) {
                  return [];
                }
                const groupInfo = product.theExtrasGroups?.find(
                  (g) => g.id.toString() === groupId,
                );
                const groupName = groupInfo?.name ?? `Group${groupId}`;
                const [firstExtra, ...remainingExtras] = extrasIds;
                const remainingSuffix =
                  remainingExtras.length > 0
                    ? `,${remainingExtras.join(",")}`
                    : "";

                return [
                  `${groupName}_${firstExtra}_${groupId}${remainingSuffix}`,
                  `${groupName}_${extrasIds.join(",")}`,
                ];
              },
            ),
            isHasLoyalty: product?.isHasLoyalty,
            no_of_stamps_give: product?.no_of_stamps_give,
          },
          quantity: quantity,
        }),
      );
      // Navigate back to menu - scroll position will be restored automatically
      if (!isDesktop && !isBottomSheetView  ) window.history.back();
      else {
        onClose?.();
      }
    }
  };

  return (
    <>
      <Row
        style={{
          padding: "16px 16px 0",
          ...(!isDesktop
            ? {
                position: "fixed",
                bottom: 0,
                left: 0,
                width: "100%",
                backgroundColor: themeName === "light" ? "white" : ProBlack2,
              }
            : {
                position: "absolute",
                bottom: 0,
                [isRTL ? "right" : "left"]: 0,
                width: hasCustomizationOptions ? "50%" : "100%",
              }),
          height: "195px",
        }}
      >
        <div
          style={{
            width: "100%",
            display: "flex",
            flexDirection: "column",
            gap: "12px",
          }}
        >
          <ProText>{t("cart.specialRequest")}</ProText>
          <Form.Item style={{ position: "relative", top: -5, width: "100%" }}>
            <TextArea
              value={specialRequest}
              rows={2}
              placeholder={t("cart.specialRequest")}
              size="large"
              autoFocus={false}
              className={styles.inputField}
              onChange={(e) => setSpecialRequest(e.target.value)}
            />
          </Form.Item>
          <div
            style={{
              display: "flex",
              flexDirection: "row",
              justifyContent: "space-between",
              gap: "12px",
              width: "100%",
            }}
          >
              <ActionsButtons
                quantity={quantity}
                setQuantity={setQuantity}
                max={100}
                min={1}
              />
              <Button
                type="primary"
                icon={<ShoppingCartOutlined />}
                onClick={handleAddToCart}
                disabled={!isValid}
                style={{
                  flex: 1,
                  height: 48,
                  fontSize: isMobile ? "1rem" : "16px",
                  transition: "all 0.3s ease",
                  width: "100%",
                  borderRadius: 888,
                  boxShadow: "none",
                  backgroundColor: isValid
                    ? colors.primary
                    : "rgba(233, 233, 233, 1)",
                  color: isValid ? "#FFF" : "#999",
                  cursor: isValid ? "pointer" : "not-allowed",
                }}
                onMouseEnter={(e) => {
                  if (!isMobile && isValid) {
                    e.currentTarget.style.transform = "translateY(-2px)";
                  }
                }}
                onMouseLeave={(e) => {
                  if (!isMobile) {
                    e.currentTarget.style.transform = "translateY(0)";
                  }
                }}
              >
                {isValid
                  ? t("menu.addToCart")
                  : t("menu.selectRequiredOptions")}
              </Button>
          </div>
        </div>
      </Row>

      {/* {!isDesktop && isSpecialRequestOpen && (
        <BottomSheet
          isOpen={isSpecialRequestOpen}
          onClose={handleSpecialRequestClose}
          initialValue={specialRequest}
          onSave={handleSpecialRequestSave}
        />
      )} */}
    </>
  );
}