"use client";
import { Button, Card, CardFooter, ScrollShadow } from "@nextui-org/react";
import Image from "next/image";
import { EyeIcon } from "../icons";
import { Swiper, SwiperSlide } from "swiper/react";
import "swiper/css";
import "swiper/css/pagination";
import "swiper/css/effect-fade";
import "swiper/css/navigation";
import { Autoplay, Pagination, Navigation } from "swiper/modules";
import Link from "next/link";
import GPRKominfo from "../ui/social-media/gpr-kominfo";
import { useEffect, useState } from "react";
import { getListArticle } from "@/service/article";
import { convertDateFormat, textEllipsis } from "@/utils/global";
import { useTranslations } from "next-intl";
import { data } from "autoprefixer";

export default function HeaderNews() {
  const [article, setArticle] = useState<any>([]);
  const t = useTranslations("Landing");

  useEffect(() => {
    async function getArticle() {
      const req = { page: 1, search: "", limit: "10" };
      const response = await getListArticle(req);
      setArticle(response?.data?.data);
    }
    getArticle();
  }, []);

  return (
    <div className="flex flex-col lg:flex-row gap-3 bg-white  p-1 lg:p-8 lg:h-[70vh]">
      <div className="lg:hidden w-full h-full">
        <Swiper
          centeredSlides={true}
          autoplay={{
            delay: 5000,
            disableOnInteraction: false,
          }}
          navigation={true}
          modules={[Navigation]}
          className="mySwiper"
        >
          {article?.map((newsItem: any) => (
            <SwiperSlide key={newsItem.id}>
              <Card isFooterBlurred radius="lg" className="border-none">
                <img
                  alt="headernews"
                  src="/headernews.png"
                  className="h-[25vh] object-cover"
                />
                <CardFooter className="before:bg-white/10 border-white/20 border-1 overflow-hidden py-1 md:absolute before:rounded-xl rounded-large bottom-1 w-[calc(100%_-_8px)] shadow-small ml-1 z-10">
                  <div className="text-black dark:text-white">
                    <Link href={`news/detail/${newsItem.id}-${newsItem?.slug}`}>
                      <p className="text-left font-semibold">
                        {textEllipsis(newsItem.title, 40)}
                      </p>
                    </Link>
                    <p className="py-[2px] text-left text-sm">
                      {convertDateFormat(newsItem.createdAt)} WIB
                    </p>
                    <p className="flex items-center gap-1 text-sm">
                      <EyeIcon className="text-black dark:text-white" />
                      {newsItem.viewCount === null ? 0 : newsItem.viewCount}
                    </p>
                  </div>
                </CardFooter>
              </Card>
            </SwiperSlide>
          ))}
        </Swiper>
      </div>
      <div className="w-auto lg:w-[25%] p-2 dark:bg-stone-800  bg-[#f0f0f0] shadow-lg dark:text-white text-black rounded-xl mb-2 md:mb-0 h-[50vh] lg:h-[67vh]">
        <p className="text-lg font-bold h-10 text-center dark:text-white text-black">
          {t("berita")}
        </p>
        <ScrollShadow hideScrollBar className="h-[34vh] lg:h-[53vh] ">
          {article?.map((data: any) => (
            <div
              className="text-xs text-left m-2 p-2 dark:bg-[#1E1616] bg-white rounded-md flex flex-row gap-2"
              key={data.id}
            >
              <img
                alt="headernews"
                src="/headernews.png"
                className="object-cover w-[18%]"
              />
              <div>
                <Link
                  href={`/news/detail/${data?.id}-${data?.slug}`}
                  key={data?.id}
                  className="lg:hidden"
                >
                  {textEllipsis(data.title, 40)}
                </Link>
                <Link
                  href={`/news/detail/${data?.id}-${data?.slug}`}
                  key={data?.id}
                  className="hidden lg:block"
                >
                  {data.title}{" "}
                </Link>

                <p className="py-[2px]">
                  {convertDateFormat(data.createdAt)} WIB
                </p>
                <p className="flex items-center gap-1">
                  <EyeIcon />
                  {data.viewCount === null ? 0 : data.viewCount}
                </p>
              </div>
            </div>
          ))}
        </ScrollShadow>
        <div className="m-2">
          <Link href="/news/all">
            <Button
              className="w-full bg-[#DD8306] text-white font-bold rounded-bl-md rounded-br-md focus:outline-none"
              radius="none"
            >
              {t("semua")}
            </Button>
          </Link>
        </div>
      </div>

      <div className="hidden lg:block w-full lg:w-[50%] h-[67vh]">
        <Swiper
          autoplay={{
            delay: 5000,
            disableOnInteraction: false,
          }}
          navigation={true}
          modules={[Autoplay, Navigation]}
          className="mySwiper"
        >
          {article?.map((newsItem: any) => (
            <SwiperSlide key={newsItem.id} className="h-[67vh]">
              <Card
                isFooterBlurred
                radius="lg"
                className="border-none h-[67vh]"
              >
                <img
                  alt="headernews"
                  src="/headernews.png"
                  className="w-full h-[67vh] object-cover"
                />
                <CardFooter className="before:bg-white/10 border-white/20 border-1 overflow-hidden py-1 md:absolute before:rounded-xl rounded-large bottom-1 w-[calc(100%_-_8px)] shadow-small ml-1 z-10">
                  <div className="text-white">
                    <Link href={`news/detail/${newsItem.id}-${newsItem?.slug}`}>
                      <p className="text-left font-semibold">
                        {newsItem.title}
                      </p>
                    </Link>
                    <p className="py-[2px] text-left text-sm">
                      {convertDateFormat(newsItem.createdAt)} WIB
                    </p>
                    <p className="flex items-center gap-1 text-sm">
                      <EyeIcon />
                      {newsItem.viewCount === null ? 0 : newsItem.viewCount}
                    </p>
                  </div>
                </CardFooter>
              </Card>
            </SwiperSlide>
          ))}
        </Swiper>
      </div>
      <div className="lg:w-[25%] rounded-md text-white dark:text-black ">
        <GPRKominfo />
      </div>
    </div>
  );
}