import InstagramIcon from "components/Icons/social/InstagramIcon";
import JIcon from "components/Icons/social/JIcon";
import SnapIcon from "components/Icons/social/SnapIcon";
import XIcon from "components/Icons/social/XIcon";
import { LanguageSwitch } from "components/LanguageSwitch/LanguageSwitch";
import ProText from "components/ProText";
import ProTitle from "components/ProTitle";
import { useAppDispatch, useAppSelector } from "redux/hooks";
import styles from "./restaurant.module.css";
import RestaurantServices from "./RestaurantServices";

// Import the Client Component for localStorage handling
import Ads1 from "components/Ads/Ads1";
import { OrderDetailsBottomSheet } from "components/CustomBottomSheet/orderDetailsSheet/OrderDetailsBottomSheet.tsx";
import { Loader } from "components/Loader/Loader";
import {
  CART_STORAGE_KEYS,
  updateOrderType,
} from "features/order/orderSlice.ts";
import useBreakPoint from "hooks/useBreakPoint";
import { useRestaurant } from "hooks/useRestaurant";
import useSwipeUp from "hooks/useSwipeUp";
import { OrderType } from "pages/checkout/hooks/types.ts";
import { useEffect, useState } from "react";
import { useTranslation } from "react-i18next";
import {
  Link,
  Outlet,
  useLocation,
  useParams,
  useSearchParams,
} from "react-router-dom";
import { useGetRestaurantDetailsQuery } from "redux/api/others";
import LocalStorageHandler from "../menu/components/LocalStorageHandler";

const storedOrderType = localStorage.getItem(CART_STORAGE_KEYS.ORDER_TYPE);

export default function RestaurantPage() {
  const dispatch = useAppDispatch();
  const { t } = useTranslation();
  const param = useParams();
  const [searchParams] = useSearchParams();
  const { pathname } = useLocation();
  const { orderType } = useAppSelector(
    (state) => state.order,
  );
  const { isRTL } = useAppSelector((state) => state.locale);
  const { data: restaurant, isLoading } = useGetRestaurantDetailsQuery(
    param.subdomain,
    {
      skip: !param.subdomain,
    },
  );
  const [isOrderDetailsOpen, setIsOrderDetailsOpen] = useState(false);

  // const { containerRef, handleTouchEnd, handleTouchStart } = useSwipeUp({
  //   swipeAction: () => setIsOrderDetailsOpen(true),
  //   isEnabled: isMobile && cartItems.length > 0,
  // });

  // Automatically load restaurant taxes when restaurant data is available
  useRestaurant(restaurant);

  useEffect(() => {
    const urlOrderType = searchParams.get("orderType");
    if (urlOrderType && urlOrderType !== orderType)
      dispatch(updateOrderType(urlOrderType as OrderType));
    else if (storedOrderType && !orderType)
      dispatch(updateOrderType(storedOrderType as OrderType));
  }, [searchParams, orderType, dispatch]);

  if (isLoading) return <Loader />;

  if (!restaurant) return <div>{t("Restaurant not found")}</div>;

  if (restaurant) {
    localStorage.setItem("restaurantID", restaurant.restautantId);
  }

  if (param.subdomain && !pathname.endsWith(param.subdomain)) return <Outlet />;

  return (
    <>
      <div className={styles.languageSwitch}>
        <LanguageSwitch />
      </div>

      <div className={styles.homeContainer}>
        <div className={styles.homeContainerContent}>
          <div style={{ textAlign: "center", maxWidth: "100%" }}>
            <div className={styles.logoContainer}>
              <img
                src={restaurant?.restaurant_logo || ""}
                alt="logo"
                width={96}
                height={96}
                className={styles.logo}
              />
            </div>
            <ProTitle level={5} style={{ margin: 0 }}>
              {isRTL ? restaurant?.nameAR : restaurant?.restautantName}
            </ProTitle>
            <ProText style={{ fontSize: 14, margin: 0 }}>
              {isRTL ? restaurant?.descriptionAR : restaurant?.description}
            </ProText>
          </div>

          <RestaurantServices />
          {/* <div
            ref={containerRef}
            onTouchStart={handleTouchStart}
            onTouchEnd={handleTouchEnd}
          >
            <div className={styles.promotionContainer}>
              <Ads1 />
            </div>
          </div> */}
          <div className={styles.socialIconsContainer}>
            <Link to={`https://www.instagram.com/${restaurant?.instagram}`}>
              <InstagramIcon className={styles.socialIcon} />
            </Link>
            <Link to="https://x.com/">
              <XIcon className={styles.socialIcon} />
            </Link>
            <Link to="https://www.snapchat.com/">
              <SnapIcon className={styles.socialIcon} />
            </Link>
            <Link to="https://www.jordan.com/">
              <JIcon className={styles.socialIcon} />
            </Link>
          </div>
        </div>
      </div>

      {/* Order Details Bottom Sheet - Moved outside the container */}
      <OrderDetailsBottomSheet
        isOpen={isOrderDetailsOpen}
        onClose={() => setIsOrderDetailsOpen(false)}
      />

      <LocalStorageHandler
        restaurantID={restaurant.restautantId}
        restaurantName={restaurant.restautantName}
      />
    </>
  );
}