import {
  Button,
  Card,
  CardBody,
  CardFooter,
  Image,
  Tab,
  Tabs,
} from "@nextui-org/react";
import React, { useEffect, useState } from "react";
import { Swiper, SwiperSlide } from "swiper/react";
import "swiper/css";
import "swiper/css/navigation";
import "swiper/css/pagination";
import { Navigation, Pagination } from "swiper/modules";
import { topNewsMediahub } from "@/service/medol-news-update";
import Link from "next/link";
import {
  getImageInp,
  topNewsInp,
  topNewsTbn,
} from "@/service/third-party-service";
import { convertDateFormatNoTime } from "@/utils/global";
import PolriTvWidget from "../ui/social-media/polri-tv";
import { useTranslations } from "next-intl";

export default function MedolUpdate() {
  const [selectedTab, setSelectedTab] = useState<any>("mediahub");
  const [mediahubUpdate, setMediahubUpdate] = useState<any>([]);
  const [tbnUpdate, setTbnUpdate] = useState([]);
  const [inpUpdate, setInpUpdate] = useState([]);

  const t = useTranslations("Landing");

  useEffect(() => {
    if (selectedTab === "mediahub" && mediahubUpdate?.length < 1) {
      getMedihubUpdate();
    }
    if (selectedTab === "tbnews" && tbnUpdate?.length < 1) {
      getTbnUpdate();
    }
    if (selectedTab === "inp" && inpUpdate?.length < 1) {
      getInpUpdate();
    }
  }, [selectedTab]);

  async function getMedihubUpdate() {
    const res = await topNewsMediahub();
    setMediahubUpdate(res?.data?.data?.content);
  }

  async function getTbnUpdate() {
    const res = await topNewsTbn();
    setTbnUpdate(res?.data?.data);
  }
  async function getInpUpdate() {
    const res = await topNewsInp();
    // setInpUpdate(res?.data);
    getDataImage(res?.data);
  }

  async function getDataImage(data: any) {
    let temp = data;
    for (let i = 0; i < data?.length; i++) {
      const res = await getImageInp(temp[i].id);
      const data = res?.data[0]?.guid?.rendered;
      temp[i].image = data;
    }
    setInpUpdate(temp);
  }

  return (
    <div className="border-2 rounded-lg py-2">
      <div className="text-2xl font-semibold underline underline-offset-4 text-center decoration-red-600 ">
        Top 5 News Update
      </div>
      <div className="bg-white text-black p-1 md:p-5 space-y-5">
        <Tabs
          classNames={{
            tabList: "bg-white shadow-lg border",
            tabContent: "group-data-[selected=true]:text-[white] text-warning",
          }}
          aria-label="Options"
          color="warning"
          className="flex justify-center"
          selectedKey={selectedTab}
          onSelectionChange={setSelectedTab}
        >
          <Tab key="mediahub" title="MediaHUB Update">
            <Swiper
              navigation={true}
              modules={[Navigation, Pagination]}
              spaceBetween={40}
              slidesPerView={1}
              breakpoints={{
                // When the window width is less than 640px
                720: {
                  slidesPerView: 2, // Set slidesPerView to 1 on mobile
                },
              }}
              pagination={true}
              className="mySwiper"
              onSwiper={(swiper) => {
                swiper.navigation.nextEl?.classList.add(
                  "bg-white/70",
                  "!text-black",
                  "rounded-full",
                  "!w-[40px]",
                  "!h-[40px]"
                );
                swiper.navigation.prevEl?.classList.add(
                  "bg-white/70",
                  "!text-black",
                  "rounded-full",
                  "!w-[40px]",
                  "!h-[40px]"
                );
              }}
            >
              {mediahubUpdate?.map((newsItem: any) => (
                <SwiperSlide key={newsItem.title}>
                  <Link href={newsItem?.pageUrl} target="_blank">
                    <Card
                      isPressable
                      shadow="sm"
                      className=" bg-white text-black border-2 w-full"
                    >
                      <CardBody className="overflow-visible p-0">
                        <Image
                          radius="lg"
                          width="300%"
                          alt="tes"
                          className="object-cover !h-[30vh]"
                          src={newsItem.thumbnailLink}
                        />
                      </CardBody>
                      <CardFooter className="flex flex-col items-start text-left">
                        <p className="text-xs">
                          {convertDateFormatNoTime(newsItem?.createdAt)}
                        </p>
                        <b className="">{newsItem?.title}</b>
                      </CardFooter>
                    </Card>
                  </Link>
                </SwiperSlide>
              ))}
            </Swiper>
            <div className="text-center pt-6">
              <Link href="https://mediahub.polri.go.id" target="_blank">
                <Button
                  className="bg-white text-[#DD8306] font-bold w-56"
                  size="sm"
                  color="warning"
                  variant="bordered"
                >
                  {t("lebihBanyak")}
                </Button>
              </Link>
            </div>
          </Tab>
          <Tab key="tbnews" title="Tribrata News Update">
            <Swiper
              navigation={true}
              modules={[Navigation, Pagination]}
              spaceBetween={40}
              slidesPerView={1}
              breakpoints={{
                // When the window width is less than 640px
                720: {
                  slidesPerView: 2, // Set slidesPerView to 1 on mobile
                },
              }}
              pagination={true}
              className="mySwiper"
              onSwiper={(swiper) => {
                swiper.navigation.nextEl?.classList.add(
                  "bg-white/70",
                  "!text-black",
                  "rounded-full",
                  "!w-[40px]",
                  "!h-[40px]"
                );
                swiper.navigation.prevEl?.classList.add(
                  "bg-white/70",
                  "!text-black",
                  "rounded-full",
                  "!w-[40px]",
                  "!h-[40px]"
                );
              }}
            >
              {tbnUpdate?.map((newsItem: any) => (
                <SwiperSlide key={newsItem.title}>
                  <Link href={newsItem?.source_url} target="_blank">
                    <Card
                      isPressable
                      shadow="sm"
                      className=" bg-white text-black border-2 w-full"
                    >
                      <CardBody className="overflow-visible p-0">
                        <Image
                          radius="lg"
                          width="300%"
                          alt="tes"
                          className="object-cover !h-[30vh]"
                          src={newsItem?.image}
                        />
                      </CardBody>
                      <CardFooter className="flex flex-col items-start text-left">
                        {convertDateFormatNoTime(newsItem?.date)}
                        <b className="">{newsItem?.title}</b>
                      </CardFooter>
                    </Card>
                  </Link>
                </SwiperSlide>
              ))}
            </Swiper>
            <div className="text-center pt-6">
              <Link href="https://tribratanews.polri.go.id" target="_blank">
                <Button
                  className="bg-white text-[#DD8306] font-bold w-56"
                  size="sm"
                  color="warning"
                  variant="bordered"
                >
                  {t("lebihBanyak")}
                </Button>
              </Link>
            </div>
          </Tab>
          <Tab key="inp" title="Indonesia Nasional Police Update">
            <Swiper
              navigation={true}
              modules={[Navigation, Pagination]}
              spaceBetween={40}
              slidesPerView={1}
              breakpoints={{
                // When the window width is less than 640px
                720: {
                  slidesPerView: 2, // Set slidesPerView to 1 on mobile
                },
              }}
              pagination={true}
              className="mySwiper"
              onSwiper={(swiper) => {
                swiper.navigation.nextEl?.classList.add(
                  "bg-white/70",
                  "!text-black",
                  "rounded-full",
                  "!w-[40px]",
                  "!h-[40px]"
                );
                swiper.navigation.prevEl?.classList.add(
                  "bg-white/70",
                  "!text-black",
                  "rounded-full",
                  "!w-[40px]",
                  "!h-[40px]"
                );
              }}
            >
              {inpUpdate?.map((newsItem: any) => (
                <SwiperSlide key={newsItem?.id}>
                  <Link href={newsItem?.link} target="_blank">
                    <Card
                      isPressable
                      shadow="sm"
                      className=" bg-white text-black border-2 w-full"
                    >
                      <CardBody className="overflow-visible p-0">
                        <Image
                          radius="lg"
                          width="300%"
                          alt="tes"
                          className="object-cover !h-[30vh]"
                          src={newsItem.image}
                        />
                      </CardBody>
                      <CardFooter className="flex flex-col items-start text-left">
                        {convertDateFormatNoTime(newsItem?.date)}
                        <b className="">{newsItem?.title?.rendered}</b>
                      </CardFooter>
                    </Card>
                  </Link>
                </SwiperSlide>
              ))}
            </Swiper>
            <div className="text-center pt-6">
              <a href="https://inp.polri.go.id/" target="_blank">
                <Button
                  className="bg-white text-[#DD8306] font-bold w-56"
                  size="sm"
                  color="warning"
                  variant="bordered"
                >
                  {t("lebihBanyak")}
                </Button>
              </a>
            </div>
          </Tab>
          <Tab key="polritv" title="Polri TV Update">
            <div className="w-full">
              <div className="w-[40%] mx-auto">
                <PolriTvWidget />
              </div>
            </div>
            <div className="text-center pt-6">
              <Link
                href="https://www.youtube.com/@TvRadioPolri"
                target="_blank"
              >
                <Button
                  className="bg-white text-[#DD8306] font-bold w-56"
                  size="sm"
                  color="warning"
                  variant="bordered"
                >
                  {t("lebihBanyak")}
                </Button>
              </Link>
            </div>
          </Tab>
        </Tabs>
      </div>
    </div>
  );
}