"use client";

import AddBanner from "@/components/common/addBanner/AddBanner";
import fetcher from "@/utils/fetcher";
import { Fragment } from "react";
import useSWR from "swr";
import HotNews from "../hotNews/HotNews";
import NewsOnly from "../newsOnly/NewsOnly";
import NewsOnlyTwo from "../newsOnlyTwo/NewsOnlyTwo";
import NewsWithAdd from "../newsWithAdd/NewsWithAdd";
import PhotoGallery from "../photoGallery/PhotoGallery";
import TopNews from "../topNews/TopNews";
import HomePageSkeleton from "@/components/skeleton/HomePageSkeleton";
import AdsComponent from "@/components/common/googleAds/GoogleAds";

const HomeMain = () => {
  // const { theme } = useTheme();

  const {
    data,
    error,
    isLoading,
  }: { data: any; error: any; isLoading: boolean } = useSWR(
    "/home-page",
    fetcher
  );

  const adsSlot1 = "1431883232"
  const adsSlot2 = "8681432265"
  const adsSlot3 = "8974497186"

  if (error) return <div>There was an Error!</div>;

  if (isLoading) return <HomePageSkeleton />;

  return (
    <Fragment>
      {/* Hot news here */}
      {data?.top_braking?.post?.length > 0 && (
        <HotNews data={data?.top_braking} />
      )}
      {/* home ads 11 here */}
      {/* {data?.ads.home_11 && (
        <AddBanner imgPath={data?.ads.home_11} clss="mt-5" />
      )} */}
      <div className="container flex items-center justify-center px-4 sm:px-[60px] md:px-[36px] lg:px-[36px] mx-auto">
        <div
          className="w-full bg-[#f9f9f9] p-2 text-center mt-5"
          style={{ minWidth: "300px" }} // Add this
        >
          <AdsComponent
            adSlot="1431883232"
            style={{
              display: "block",
              minHeight: "90px",
              width: "100%",
              textAlign: "center",
            }}
          />
        </div>
      </div>

      {/* top news here */}
      {/* home ads 12 && 13 here */}
      <div className="container mx-auto grid grid-cols-12">
        <div className="col-span-12 lg:col-span-8 xl:col-span-9">
          {data?.topNews && (
            <TopNews
              data={data.topNews}
              sideData={data.videoCategory}
              ads={data?.ads}
            />
          )}


          {/* home ads 14 here */}
          {data?.newsByCategory[0] && (
            <NewsWithAdd
              data1={data?.newsByCategory[0]}
              data2={data?.newsByCategory[1]}
              ads={data?.ads} />
          )}

          {/* news By position 1 */}
          {/* {data?.newsByCategory[1] && (
        <NewsWithFourCol 
        data={data?.newsByCategory[8]}
        ads={data?.ads} />
      )} */}
          {/* Webstory part */}
          {data && <PhotoGallery />}

          {/* news By position 2 */}
          {data?.newsByCategory[1] && (
            <NewsOnly data={data?.newsByCategory[2]}
              ads={data?.ads} />)}

          {/* home ads 15 here */}
          {/* {data?.ads?.home_15 && (
        <AddBanner imgPath={data?.ads?.home_15} clss="-mb-10 pb-5" />
      )} */}
          <div className="container flex items-center justify-center px-4 sm:px-[60px] md:px-[36px] lg:px-[36px] mx-auto">
            <div
              className="w-full bg-[#f9f9f9] p-2 text-center mt-5"
              style={{ minWidth: "300px" }} // Add this
            >
              <AdsComponent
                adSlot="1431883232"
                style={{
                  display: "block",
                  minHeight: "90px",
                  width: "100%",
                  textAlign: "center",
                }}
              />
            </div>
          </div>
          {/* news By position 3 */}
          {data?.newsByCategory[2] && (
            <NewsOnlyTwo
              data1={data?.newsByCategory[4]}
              data2={data?.newsByCategory[5]}
              ads={data?.ads}

            />
          )}
          {/* news By position 4 */}

          {data?.newsByCategory[3] && (
            <NewsOnly data={data?.newsByCategory[6]}
              ads={data?.ads}
            />)}


          {/* news By position 1 */}
          {/* {data?.newsByCategory[0] && (
        <NewsWithLatest data={data?.newsByCategory[0]} />
      )} */}

          {/* news By position 4 */}
          {/* home ads 16 here */}
          {/* {data?.newsByCategory[3] && (
        <NewsRelatedWithAdd data={data?.newsByCategory[3]} ads={data?.ads} />
      )} */}
          {/* home ads 17 here */}
          {/* {data?.ads.home_17 && (
        <AddBanner imgPath={data?.ads.home_17} clss="mt-7 -mb-10" />
      )} */}
          {/* news By position 5 */}
          {/* {data?.newsByCategory[4] && (
        <NewsOnlyTwo data={data?.newsByCategory[4]} />
      )} */}
          {/* news By position 6 */}
          {/* {data?.newsByCategory[5] && (
        <NewsWithLatest
          data={data?.newsByCategory[5]}
          title="Most Read"
          latest-post
          end_point="/populer-post"
        />
      )} */}
          {/* <NewsOnly data={data.newsByCategory[5]} /> */}

          {/* news By position 8 and 9  */}
          {/* {data?.newsByCategory[7] && data?.newsByCategory[8] && (
        <NewsWithLatestTwo
          dataOne={data?.newsByCategory[7]}
          dataTwo={data?.newsByCategory[8]}
        />
      )} */}
          {/* news By position 4  */}

          {/* news By position 4  */}
          {/* {data?.newsByCategory[11] && (
        <VideoGallery data={data?.newsByCategory[11]} />
      )} */}
          {/* home ads 18 here */}
          
        </div>
        <div className="lg:col-span-4 xl:col-span-3 mr-9 mt-11 hidden lg:block">
  <div className="sticky top-20 space-y-4">
          {(adsSlot1 || adsSlot2) && (
            // <div className="col-span-12 lg:hidden relative after:bg-[var(--border-color)] after:absolute after:w-full after:h-[1px] after:-bottom-3 after:right-0 after:last:h-0 md:after:w-[1px] md:after:h-full md:after:top-0 md:after:-right-3 md:after:last:w-0 dark:after:bg-[var(--border-dark)]">

            <div className="w-full flex flex-row lg:flex-col lg:h-full lg:flex lg:items-center xl:justify-start lg:justify-center gap-4">
              {adsSlot1 && (
                <div className="bg-[#f9f9f9] w-full flex items-center justify-center">
                  <div className=" h-[250px] min-w-[300px] w-full">
                    <AdsComponent adSlot={adsSlot1} style={{
                      display: "block",
                      width: "100%",
                      minHeight: "251px",
                      textAlign: "center",
                      
                    }}
                    />


                  </div>
                </div>
              )}
              {adsSlot2 && (
                <div className="bg-[#f9f9f9]  w-full flex items-center justify-center  ">
                  <div className="h-[250px] min-w-[300px] w-full">

                    <AdsComponent adSlot={adsSlot2} style={{
                      display: "block",
                      width: "100%",
                      minHeight: "251px",
                      textAlign: "center",

                    }}
                    />

                  </div>
                </div>
              )}
              {adsSlot1 && (
                <div className="bg-[#f9f9f9] w-full flex items-center justify-center">
                  <div className=" h-[250px] min-w-[300px] w-full">
                    <AdsComponent adSlot={adsSlot1} style={{
                      display: "block",
                      width: "100%",
                      minHeight: "251px",
                      textAlign: "center",
                      
                    }}
                    />


                  </div>
                </div>
              )}
              {adsSlot2 && (
                <div className="bg-[#f9f9f9]  w-full flex items-center justify-center ">
                  <div className="h-[250px] min-w-[300px] w-full">

                    <AdsComponent adSlot={adsSlot2} style={{
                      display: "block",
                      width: "100%",
                      minHeight: "251px",
                      textAlign: "center",

                    }}
                    />

                  </div>
                </div>
              )}
              {adsSlot1 && (
                <div className="bg-[#f9f9f9] w-full flex items-center justify-center">
                  <div className=" h-[250px] min-w-[300px] w-full">
                    <AdsComponent adSlot={adsSlot1} style={{
                      display: "block",
                      width: "100%",
                      minHeight: "251px",
                      textAlign: "center",
                      
                    }}
                    />


                  </div>
                </div>
              )}
              {adsSlot3 && (
                <div className="bg-[#f9f9f9]  w-full flex items-center justify-center ">
                  <div className="h-[250px] min-w-[300px] w-full">

                    <AdsComponent adSlot={adsSlot3} style={{
                      display: "block",
                      width: "100%",
                      minHeight: "251px",
                      textAlign: "center",

                    }}
                    />

                  </div>
                </div>
              )}




            </div>

            // </div>


          )}
        </div>
        </div>
      </div>
      <div className="container flex items-center justify-center px-4 sm:px-[60px] md:px-[36px] lg:px-[36px] mx-auto">
            <div
              className="w-full bg-[#f9f9f9] p-2 text-center mt-5"
              style={{ minWidth: "300px" }} // Add this
            >
              <AdsComponent
                adSlot="1431883232"
                style={{
                  display: "block",
                  minHeight: "90px",
                  width: "100%",
                  textAlign: "center",
                }}
              />
            </div>
          </div>
      {/* {data?.ads.home_18 && (
        <AddBanner imgPath={data?.ads.home_18} clss="mt-5 -mb-10" />
      )} */}
    </Fragment>
  );
};

export default HomeMain;