import { ShoppingCartOutlined } from "@ant-design/icons";
import { Button, Grid, message, Row } from "antd";
import { SpecialRequestBottomSheet } from "components/CustomBottomSheet/SpecialRequestBottomSheet";
import {
  addItem,
  selectCart,
  updateSpecialRequest,
} from "features/order/orderSlice";
import { useState } from "react";
import { useTranslation } from "react-i18next";
import { useNavigate, useParams } from "react-router-dom";
import { useAppDispatch, useAppSelector } from "redux/hooks";
import { colors, ProBlack2 } from "ThemeConstants";
import { Product } from "utils/types/appTypes";

const { useBreakpoint } = Grid;

export default function ProductFooter({
  product,
  isValid = true,
  variantId,
  selectedExtras,
  selectedGroups,
  quantity,
}: {
  product: Product;
  isValid?: boolean;
  variantId: string;
  selectedExtras: string[];
  selectedGroups: string[];
  quantity: number;
}) {
  const { id } = useParams();
  const { t } = useTranslation();
  const dispatch = useAppDispatch();
  const { themeName } = useAppSelector((state) => state.theme);
  const { specialRequest } = useAppSelector(selectCart);
  const [isSpecialRequestOpen, setIsSpecialRequestOpen] = useState(false);
  const { xs } = useBreakpoint();
  const navigate = useNavigate();

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

    if (product) {
      dispatch(
        addItem({
          item: {
            id: product?.id,
            name: product?.name,
            price: product?.price,
            image: product?.image,
            description: product?.description,
            variant: variantId,
            extras: selectedExtras,
            extrasgroup: selectedGroups,
          },
          quantity: quantity,
        })
      );
      // Navigate back to menu - scroll position will be restored automatically
      window.history.back();
    }
  };

  const handleSpecialRequestSave = (value: string) => {
    dispatch(updateSpecialRequest(value));
    message.success(t("cart.specialRequest") + " " + t("common.confirm"));
  };

  const handleSpecialRequestClose = () => {
    setIsSpecialRequestOpen(false);
  };

  return (
    <>
      <Row
        style={{
          width: "100%",
          padding: "16px 16px 0",
          position: "fixed",
          bottom: 0,
          left: 0,
          height: "10vh",
          backgroundColor: themeName === "light" ? "white" : ProBlack2,
        }}
      >
        <div style={{ width: "100%" }}>
          <div
            style={{
              display: "flex",
              gap: "12px",
              width: "100%",
            }}
          >
            <Button
              type="primary"
              icon={<ShoppingCartOutlined />}
              onClick={handleAddToCart}
              disabled={!isValid}
              style={{
                flex: 1,
                height: xs ? "48px" : "48px",
                fontSize: xs ? "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 (!xs && isValid) {
                  e.currentTarget.style.transform = "translateY(-2px)";
                }
              }}
              onMouseLeave={(e) => {
                if (!xs) {
                  e.currentTarget.style.transform = "translateY(0)";
                }
              }}
            >
              {isValid ? t("menu.addToCart") : t("menu.selectRequiredOptions")}
            </Button>
          </div>
        </div>
      </Row>

      <SpecialRequestBottomSheet
        isOpen={isSpecialRequestOpen}
        onClose={handleSpecialRequestClose}
        initialValue={specialRequest}
        onSave={handleSpecialRequestSave}
      />
    </>
  );
}
