"use client";
import {
  Button,
  Card,
  CardFooter,
  CircularProgress,
  ScrollShadow,
} from "@nextui-org/react";
import Image from "next/image";
import { ChevronLeftIcon, ChevronRightIcon, EyeIcon } from "../icons";
import { Swiper, SwiperSlide, useSwiper } from "swiper/react";
import "swiper/css";
import "swiper/css/navigation";

import { Autoplay, Pagination, Navigation, Controller } 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";
import { Controller as FormController } from "react-hook-form";
import { Nabla } from "next/font/google";

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 lg:gap-8 bg-white  p-1 lg:p-8 lg:h-[70vh]">
      <div className="lg:hidden w-full h-full">
        {article ? (
          <Swiper
            centeredSlides={true}
            autoplay={{
              delay: 5000,
              disableOnInteraction: false,
            }}
            navigation={true}
            className="mySwiper"
            modules={[Autoplay, Controller, Navigation]}
            onSwiper={(swiper) => {
              swiper.navigation.nextEl?.classList.add(
                "bg-white/70",
                "!text-black",
                "rounded-full",
                "!w-[24px]",
                "!h-[24px]"
              );
              swiper.navigation.prevEl?.classList.add(
                "bg-white/70",
                "!text-black",
                "rounded-full",
                "!w-[24px]",
                "!h-[24px]"
              );
            }}
          >
            {article?.map((newsItem: any) => (
              <SwiperSlide key={newsItem.id}>
                <Card isFooterBlurred radius="lg" className="border-none">
                  <Image
                    width={1920}
                    height={1080}
                    alt="headernews"
                    src={
                      newsItem?.thumbnailUrl == ""
                        ? "/no-image.jpg"
                        : newsItem?.thumbnailUrl
                    }
                    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>
        ) : (
          <CircularProgress aria-label="Loading..." size="lg" />
        )}
      </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}
            >
              <Image
                height={480}
                width={480}
                alt="headernews"
                src={
                  data?.thumbnailUrl == ""
                    ? "/no-image.jpg"
                    : data?.thumbnailUrl
                }
                className="object-cover w-[60px] h-[60px] rounded-md"
              />
              <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"
                >
                  {textEllipsis(data.title, 66)}
                </Link>
                <div className="flex flex-row gap-2 text-[10px]">
                  <p className="py-[2px]">
                    {convertDateFormat(data.createdAt)} WIB
                  </p>
                  <p className="flex items-center gap-1">
                    <EyeIcon size={14} />
                    {data.viewCount === null ? 0 : data.viewCount}
                  </p>
                </div>
              </div>
            </div>
          ))}
        </ScrollShadow>
        <div className="m-2">
          <Link href="/news/all">
            <Button
              className="w-full bg-[#DD8306] text-white font-bold rounded-md focus:outline-none"
              radius="none"
            >
              {t("semua")}
            </Button>
          </Link>
        </div>
      </div>

      <div className="hidden lg:block w-full lg:w-[50%] h-[67vh]">
        {article ? (
          <Swiper
            centeredSlides={true}
            autoplay={{
              delay: 5000,
              disableOnInteraction: false,
            }}
            navigation={true}
            modules={[Autoplay, Controller, Navigation]}
            className="mySwiper"
            onSwiper={(swiper) => {
              swiper.navigation.nextEl?.classList.add(
                "bg-white/70",
                "!text-black",
                "rounded-full",
                "!w-[48px]",
                "!h-[48px]"
              );
              swiper.navigation.prevEl?.classList.add(
                "bg-white/70",
                "!text-black",
                "rounded-full",
                "!w-[48px]",
                "!h-[48px]"
              );
            }}
          >
            {article?.map((newsItem: any) => (
              <SwiperSlide key={newsItem.id} className="h-[67vh]">
                <Card
                  isFooterBlurred
                  radius="lg"
                  className="border-none h-[67vh] shadow-none"
                >
                  <Image
                    alt="headernews"
                    width={1440}
                    height={1080}
                    src={
                      newsItem?.thumbnailUrl == ""
                        ? "/no-image.jpg"
                        : newsItem?.thumbnailUrl
                    }
                    className="w-full !h-[67vh] object-cover rounded-lg"
                  />

                  <CardFooter className="mb-1 max-h-[20vh] 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 text-lg lg:text-2xl">
                          {newsItem.title}
                        </p>
                      </Link>
                      <div className="flex flex-row gap-1">
                        <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>
                    </div>
                  </CardFooter>
                </Card>
              </SwiperSlide>
            ))}
          </Swiper>
        ) : (
          <CircularProgress aria-label="Loading..." size="lg" />
        )}
      </div>
      <div className="lg:w-[25%] rounded-md text-white dark:text-black ">
        <GPRKominfo />
      </div>
    </div>
  );
}
