import {
  Select,
  SelectTrigger,
  SelectValue,
  SelectContent,
  SelectGroup,
  SelectItem,
} from "@radix-ui/react-select";
import { Icon } from "lucide-react";
import { useTranslations } from "next-intl";
import { useRouter } from "next/navigation";
import router from "next/router";
import React, { useEffect, useState } from "react";
import ScrollableContent from "./search-section-new";
import NewContent from "./new-content";
import ContentCategory from "./content-category";
import AreaCoverageWorkUnits from "./area-coverage-and-work-units";
import EventCalender from "./event-calender";
import UserSurveyBox from "./survey-box";
import ScrollableContentPolda from "./scrollable-content-polda";
import ScrollableContentSatker from "./scrollable-content-satker";
import AdvertisementPlacements from "./advertisement-placements";
import { useTheme } from "next-themes";
import { listDataAdvertisements } from "@/service/broadcast/broadcast";

interface Advertisement {
  id: string;
  placements: string;
  imageUrl: string;
  [key: string]: any;
}

const SearchSectionSatker = () => {
  const [contentType, setContentType] = useState("all");
  const [search, setSearch] = useState("");
  const router = useRouter();
  const t = useTranslations("LandingPage");

  const { theme } = useTheme();

  const [ads, setAds] = useState<Advertisement[]>([]);
  const [loading, setLoading] = useState<boolean>(false);

  const fetchData = async () => {
    try {
      setLoading(true);
      const res = await listDataAdvertisements(0, "4", "");
      const data = res?.data?.data;
      const contentData = data?.content;
      setAds(contentData);
      // if (props.placement == "left") {
      //   setAds(contentData.slice(0, 2));
      // } else {
      //   setAds(contentData.slice(2));
      // }
    } catch (error) {
      console.error("Error fetching advertisements:", error);
    } finally {
      setLoading(false);
    }
  };

  useEffect(() => {
    fetchData();
  }, []);

  // Determine background image based on theme
  const getBackgroundImage = () => {
    if (theme === "dark") {
      return "url('/assets/background-dark.jpg')";
    } else {
      return "url('/assets/background-white.jpg')";
    }
  };

  return (
    <div
      className="flex w-full min-h-screen bg-center bg-cover bg-no-repeat"
      style={{ backgroundImage: getBackgroundImage() }}
    >
      <div className="hidden xl:block w-[15%] pr-4 py-5 sticky top-[150px] space-y-4 self-start">
        <AdvertisementPlacements
          placement="left"
          data={ads}
          loading={loading}
        />
      </div>

      <div className="w-full xl:w-[70%] px-4 py-8 bg-white dark:bg-black">
        <ScrollableContentSatker />
        <NewContent group="satker" type="latest" />
        <NewContent group="satker" type="popular" />
        <ContentCategory group="satker" type="popular" />
        {/* <AreaCoverageWorkUnits /> */}
        <EventCalender />
        <UserSurveyBox />
      </div>

      <div className="hidden xl:block w-[15%] pl-4 py-5 sticky top-[150px] space-y-4 self-start">
        <AdvertisementPlacements
          placement="right"
          data={ads}
          loading={loading}
        />
      </div>
    </div>
  );
};

export default SearchSectionSatker;