import { useEffect, useState } from "react";
import { useSelector } from "react-redux";
import Image from "next/image";

import { Swiper, SwiperSlide } from "swiper/react";
import { Navigation, Thumbs } from "swiper";

import "swiper/css";
import "swiper/css/navigation";
import "swiper/css/thumbs";
import Link from "next/link";
import Card from "./card";
import BannerBlock from "../banner";
import imagesPath from "@/lib/imagesPath";
import { myLoader } from "@/lib/imageLoader";
import { CheckUrlSlug } from "@/lib/NewUrlCheck";
export default function Headline({ items, mostReadsNews }) {
  const { setting, settingSuccess } = useSelector((state) => state.setting);

  const { advertising, advertisingStatus } = useSelector(
    (state) => state.advertising
  );
  const [activeThumb, setActiveThumb] = useState();

  const [bannerArea5, setBannerArea5] = useState(false);
  const [bannerArea6, setBannerArea6] = useState(false);
  const [bannerArea7, setBannerArea7] = useState(false);
  const [headLineArray, setHeadLineArray] = useState([]);
  const [cardsArray, setCardsArray] = useState([]);
  const [readNews, setReadsNews] = useState([]);
  useEffect(() => {
    if (setting.advertising_status && advertising && advertisingStatus) {
      // advertising.filter((item) =>
      //   item.area == "5" ? setBannerArea5(true) : ""
      // );
      advertising.forEach((item) => {
        if (item.area == "5") {
          setBannerArea5(true);
        }
        if (item.area == "6") {
          setBannerArea6(true);
        }
        if (item.area == "7") {
          setBannerArea7(true);
        }
      });
    }
  }, [bannerArea5, advertising, setting]);

  useEffect(() => {
    const headLine = items.slice(0, 10);

    const bannerArea18 = advertising.filter((item) => item.area == "18");
    const bannerArea19 = advertising.filter((item) => item.area == "19");

    const cards = items.slice(10, 16);
    if (bannerArea18.length > 0) {
      const deleted1 = headLine.splice(2, 1, bannerArea18[0]);
      if (headLine.length < 10) {
        headLine.push(deleted1[0]);
      } else {
        if (cards.length < 6) {
          cards.push(deleted1[0]);
        }
      }
    }
    if (bannerArea19.length > 0) {
      const deleted2 = headLine.splice(5, 1, bannerArea19[0]);
      if (headLine.length < 10) {
        headLine.push(deleted2[0]);
      } else {
        if (cards.length < 6) {
          cards.push(deleted2[0]);
        }
      }
    }

    setHeadLineArray(headLine);
    setCardsArray(cards);
  }, [advertising, setting]);

  useEffect(() => {
    setReadsNews(mostReadsNews);
  }, []);
  if (!items) {
    return <></>;
  }
  return (
    <div className="w-full px-5 mt-2 z-0 relative">
      <div className="container flex flex-col lg:flex-row mx-auto  gap-4 ">
        <div className="w-full lg:w-4/5 bg-white shadow-lg relative overflow-hidden sm:p-2">
          <Swiper
            loop={true}
            spaceBetween={10}
            navigation={true}
            modules={[Navigation, Thumbs]}
            grabCursor={true}
            thumbs={{
              swiper:
                activeThumb && !activeThumb.destroyed ? activeThumb : null,
            }}
            className="product-images-slider"
          >
            {headLineArray.map((item, index) =>
              item?.url ? (
                <SwiperSlide key={index}>
                  <Link href={`${item.url}`} rel="noopener" target="_blank">
                    <div className="absolute bottom-0 left-0 z-10 w-full  ">
                      <div className="-z-10 bg-gradient-to-t  from-gray-300   absolute w-full h-full  "></div>
                    </div>
                    <Image
                      src={`${process.env.API_IMAGE_STORAGE}/${item.image}`}
                      className={"object-cover"}
                      alt={item.title}
                      fill
                      onError={() => imagesPath.no_image}
                    />
                  </Link>
                </SwiperSlide>
              ) : (
                <SwiperSlide key={index}>
                  <Link
                    title={item.title}
                    href={CheckUrlSlug(item.id, item.categorySlug, item.slug)}
                    rel="noopener"
                    target="_blank"
                  >
                    <div className="absolute bottom-0 left-0 z-10 w-full  ">
                      <div className="-z-10 bg-gradient-to-t  from-gray-300   absolute w-full h-full  "></div>
                      <div className="z-30 p-5">
                        <div className=" bg-gradient-to-t drop-shadow-md  from-sky-500 to-indigo-500 inline-block py-1 px-3 z-10 rounded-sm text-white text-xs">
                          {item.categoryTitle}
                        </div>
                        <div className="mt-2 text-gray-900 text-lg sm:text-xl font-semibold">
                          {item.title}
                        </div>
                      </div>
                    </div>
                    <Image
                      src={`${process.env.API_IMAGE_STORAGE}/${item.image}`}
                      className={"object-cover"}
                      alt={item.title}
                      fill
                      onError={() => imagesPath.no_image}
                    />
                  </Link>
                </SwiperSlide>
              )
            )}
          </Swiper>
          <Swiper
            onSwiper={setActiveThumb}
            loop={false}
            spaceBetween={2}
            slidesPerView={10}
            modules={[Navigation, Thumbs]}
            className="product-images-slider-thumbs hidden sm:flex"
          >
            {headLineArray.map((item, index) =>
              item?.url ? (
                <SwiperSlide key={index}>
                  <div className="product-images-slider-thumbs-wrapper">
                    <Image
                      src={`${process.env.API_IMAGE_STORAGE}/${item.image}`}
                      alt={item.title}
                      width={80}
                      height={80}
                      className="object-cover"
                      onError={() => imagesPath.no_image}
                    />
                  </div>
                </SwiperSlide>
              ) : (
                <SwiperSlide key={index}>
                  <div className="product-images-slider-thumbs-wrapper">
                    <Image
                      src={
                        item.image_thumb !== null
                          ? `${process.env.API_IMAGE_STORAGE}/${item.image_thumb}`
                          : !item.image
                          ? imagesPath.no_image
                          : `${process.env.API_IMAGE_STORAGE}/${item.image}`
                      }
                      alt={item.title}
                      width={80}
                      height={80}
                      className="object-cover"
                      onError={() => imagesPath.no_image}
                    />
                  </div>
                </SwiperSlide>
              )
            )}
          </Swiper>
        </div>
        <div
          className={`w-full lg:w-2/5 grid gap-4 ${
            !(bannerArea5 || bannerArea6 || bannerArea7)
              ? "grid-cols-2 sm:grid-cols-3"
              : ""
          } `}
        >
          {bannerArea5 && setting.advertising_status ? (
            <BannerBlock area="5" className={`bg-white p-2 shadow-sm`} />
          ) : bannerArea6 || bannerArea7 ? (
            <div
              className={`flex flex-col shadow-lg bg-white p-2 w-full items-center ${
                bannerArea6 && bannerArea7
                  ? "justify-between"
                  : "justify-center"
              }`}
            >
              <BannerBlock area="6" className={` `} />
              <BannerBlock area="7" className={` `} />
              <BannerBlock area="16" className={` `} />
              <BannerBlock area="17" className={` `} />
            </div>
          ) : (
            cardsArray.map((item, index) => <Card key={index} item={item} />)
          )}
        </div>
      </div>
      <BannerBlock area="8" className={`container mx-auto`} />
      {(bannerArea5 || bannerArea6 || bannerArea7) &&
        setting.advertising_status && (
          <>
            <div className="container mt-4 mx-auto gap-4 grid grid-cols-2 sm:grid-cols-6    ">
              {cardsArray.map((item, index) => (
                <Card key={index} item={item} />
              ))}
            </div>
          </>
        )}

      <div className="w-full px-5 mt-2">
        <div className="flex justify-between items-center mb-2 container mt-4 mx-auto ">
          <h1 className="text-xl font-semibold">
            Son Bir Saat İçerisinde En Çok Okunan Haberler
          </h1>
        </div>
        <div className="container mt-4 mx-auto   gap-4 grid grid-cols-2 sm:grid-cols-6">
          {readNews?.map((item, index) => (
            <Card key={index} item={item} />
          ))}
        </div>
      </div>
    </div>
  );
}
