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 { 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 { Loader } from "components/Loader/Loader";
import { useParams } from "react-router-dom";
import { useGetRestaurantDetailsQuery } from "redux/api/others";
import LocalStorageHandler from "../menu/components/LocalStorageHandler";

export default function RestaurantPage() {
  const param = useParams();
  const { isRTL } = useAppSelector((state) => state.locale);
  const { data: restaurant, isLoading } = useGetRestaurantDetailsQuery(
    "595",
    {
      skip: !param.id,
    },
  );

  if (isLoading) {
    return <Loader />;
  }

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

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

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

      <div className={styles.homeContainer}>
        <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
          dineIn={restaurant?.dineIn}
          pickup={restaurant?.pickup}
          gift={restaurant?.gift}
          delivery={restaurant?.delivery}
          toRoom={restaurant?.toRoom}
          toOffice={restaurant?.toOffice}
          is_booking_enabled={restaurant?.is_booking_enabled === 1}
          params={{ id: "1", locale: "en" }}
        />
        <div className={styles.promotionContainer}>
          <Ads1 />
        </div>
        <div className={styles.socialIconsContainer}>
          <InstagramIcon className={styles.socialIcon} />
          <XIcon className={styles.socialIcon} />
          <SnapIcon className={styles.socialIcon} />
          <JIcon className={styles.socialIcon} />
        </div>
      </div>

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