"use client";
import { Button, LinkIcon, ScrollShadow } from "@nextui-org/react";
import React, { useEffect, useState } from "react";
import { EyeIcon } from "../icons";
import Image from "next/image";
import Link from "next/link";
import { getListArticle } from "@/service/article";
import { convertDateFormat } from "@/utils/global";

export default function SidebarNav() {
  const [selectedTab, setSelectedTab] = useState("media");

  const [article, setArticle] = useState<any>([]);

  useEffect(() => {
    async function getArticle() {
      const req = { page: 1, search: "", limit: "10" };

      const response = await getListArticle(req);
      setArticle(response?.data?.data);
    }
    getArticle();
  }, []);

  return (
    <>
      <div className="space-y-4 px-1 lg:px-5">
        <div className="text-[15px] flex flex-row gap-10">
          <a
            onClick={() => setSelectedTab("media")}
            className={
              selectedTab === "media"
                ? "text-black border-b-3 border-red-400 cursor-pointer py-2"
                : "text-slate-300 cursor-pointer py-2"
            }
          >
            Media Update
          </a>
          <a
            onClick={() => setSelectedTab("video")}
            className={
              selectedTab === "video"
                ? "text-black border-b-3 border-red-400 cursor-pointer py-2"
                : "text-slate-300 cursor-pointer py-2"
            }
          >
            Video Virtual
          </a>
        </div>
        {selectedTab === "media" ? (
          <div className="h-[410px] p-2 dark:bg-stone-800  bg-[#f0f0f0]  dark:text-white text-black rounded-lg">
            <ScrollShadow hideScrollBar className=" h-[345px]">
              {article?.map((list: any) => (
                <div
                  key={list.id}
                  className="text-xs text-left m-2 p-2 dark:bg-[#1E1616] bg-white rounded-md"
                >
                  <Link href={`news/detail/${list?.id}`}>
                    <p className="text-left font-semibold">{list?.title}</p>
                  </Link>
                  <div className="flex flex-row gap-1">
                    <p className="py-[2px] text-left text-xs">
                      {convertDateFormat(list?.createdAt)} WIB
                    </p>
                    <p className="flex items-center gap-1 text-xs">
                      <EyeIcon />
                      {list?.viewCount === null ? 0 : list?.viewCount}
                    </p>
                  </div>
                </div>
              ))}
            </ScrollShadow>
            <Button
              className="w-full bg-[#DD8306] text-white font-bold rounded-md focus:outline-none"
              radius="none"
            >
              Lihat Semua
            </Button>
          </div>
        ) : (
          <div className="w-full">
            <iframe
              width="100%"
              height="410"
              src="https://www.youtube.com/embed/7oRcWfl9lxE?si=G_CZfXak_AiHjGzG"
              title="YouTube video player"
              frameBorder="0"
              allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share"
              referrerPolicy="strict-origin-when-cross-origin"
              allowFullScreen
            ></iframe>
          </div>
        )}
        {/* <p className="text-[15px] border-b-3 border-red-500 w-fit py-2">
          Pelayanan Informasi Publik
        </p>
        <img src="pelayanan-informasi-publik.png" className="w-full" /> */}
        {/* <div className="text-xl font-semibold underline underline-offset-4 decoration-red-600 ">
          SERTIFIKAT ISO 9001:2015
        </div>
        <div className="h-[370px]   text-white rounded-md">
          <Image
            height={200}
            width={380}
            src="/sertifikat.png"
            alt="publikasi"
          />
        </div> */}

        {/* <div className="text-xl font-semibold underline underline-offset-4 decoration-red-600">
          Publikasi
          <div className="flex flex-col gap-3 pt-3">
            <Image
              height={200}
              width={400}
              src="/publikasi1.png"
              alt="publikasi"
            />
            <Image
              height={200}
              width={400}
              src="/publikasi2.png"
              alt="publikasi"
            />
            <Link
              href="https://humas.polri.go.id/wp-content/uploads/2023/08/LAPORAN-HASIL-KEUANGAN-SEMESTER-I-DIVISI-HUMAS-POLRI-2.pdf"
              target="_blank"
            >
              <Image
                height={200}
                width={400}
                src="/publikasi3.png"
                alt="publikasi"
              />
            </Link>
            <Link href="https://lpse.polri.go.id/eproc4" target="_blank">
              <Image
                height={200}
                width={400}
                src="/publikasi4.png"
                alt="publikasi"
              />
            </Link>
            <Image
              height={200}
              width={400}
              src="/publikasi5.png"
              alt="publikasi"
            />
            <Image
              height={200}
              width={400}
              src="/publikasi6.png"
              alt="publikasi"
            />
            <Link href="https://tribratanews.polri.go.id/" target="_blank">
              <Image
                height={200}
                width={400}
                src="/publikasi7.png"
                alt="publikasi"
              />
            </Link>
          </div>
        </div> */}
        <div className="text-xl font-semibold underline underline-offset-4 decoration-red-600">
          Channel Humas Polri
          <div className="flex flex-col gap-3  m-10">
            <Link
              href="https://portal.humas.polri.go.id/library"
              target="_blank"
            >
              <Image
                height={100}
                width={300}
                src="/portal-humas1.png"
                alt="humas-polri"
              />
            </Link>
            <Link href="https://mediahub.polri.go.id/" target="_blank">
              <Image
                height={100}
                width={300}
                src="/humas1.png"
                alt="humas-polri"
              />
            </Link>
            <Link href="https://spit.humas.polri.go.id/" target="_blank">
              <Image
                height={100}
                width={300}
                src="/humas2.png"
                alt="humas-polri"
              />
            </Link>
            <Link href="https://tvradio.polri.go.id/" target="_blank">
              <Image
                height={100}
                width={300}
                src="/humas3.png"
                alt="humas-polri"
              />
            </Link>
            <Link
              href="https://tribratanews.polri.go.id/"
              target="_blank"
              className="border-2 rounded-md shadow-sm"
            >
              <Image
                height={100}
                width={300}
                src="/humas4.png"
                alt="humas-polri"
              />
            </Link>
            <Link
              href="https://inp.polri.go.id/"
              target="_blank"
              className="border-2 rounded-md shadow-sm px-2"
            >
              <Image
                height={100}
                width={300}
                src="/humas5.png"
                alt="humas-polri"
              />
            </Link>
          </div>
        </div>
      </div>
      {/* <p className="text-[15px] border-b-3 border-red-500 py-2 w-fit mx-1 lg:mx-5">
        {" "}
        Info Eksternal
      </p>
      <div className="flex flex-col mt-3 w-full px-2 lg:px-5 gap-3">
        <div className="bg-white text-black text-sm border-2 rounded-md p-4 shadow-md">
          <img src="/eksternal1.png" alt="" className="w-full" />
          <p className="leading-tight text-blue-500 hover:text-blue-700 pt-3">
            <Link href="https://www.bps.go.id/id/news" target="_blank">
              Berita BPS
            </Link>
          </p>
          <p className="text-xs text-gray-500 pt-1">
            Berita terbaru dari Badan Pusat Statistika Indonesia
          </p>
          <p className="leading-tight text-blue-500 hover:text-blue-700 pt-2">
            <Link href="https://www.bps.go.id/id/publication" target="_blank">
              Pengumuman BPS
            </Link>
          </p>
          <p className="text-xs text-gray-500 pt-1s">
            Pengumuman terbaru dari Badan Pusat Statistika Indonesia
          </p>
        </div>
        <div className="bg-white text-black text-sm border-2 rounded-md w-auto p-4 shadow-md">
          <img src="/eksternal2.png" alt="" className="w-full" />
          <p className="leading-tight text-blue-500 hover:text-blue-700 pt-5">
            <Link
              href="https://www.kpu.go.id/berita/104/berita-terkini"
              target="_blank"
            >
              Berita KPU
            </Link>
          </p>
          <p className="text-xs text-gray-500 pt-1">
            Berita terbaru dari Komisi Pemilihan Umum Indonesia
          </p>
          <p className="leading-tight text-blue-500 hover:text-blue-700 pt-2">
            <Link
              href="https://www.kpu.go.id/berita/11/pengumumanse"
              target="_blank"
            >
              Pengumuman KPU
            </Link>
          </p>
          <p className="text-xs text-gray-500 pt-1s">
            Pengumuman terbaru dari Komisi Pemilihan Umum Indonesia
          </p>
        </div>
        <div className="bg-white text-black text-sm border-2 rounded-md w-auto p-4 shadow-md">
          <img src="/eksternal3.png" alt="" className="w-full" />
          <p className="leading-tight text-blue-500 hover:text-blue-700 pt-5">
            <Link href="https://www.bawaslu.go.id/" target="_blank">
              Berita BAWASLU
            </Link>
          </p>
          <p className="text-xs text-gray-500 pt-1">
            Berita terbaru dari Badan Pengawas Pemilihan Umum Republik Indonesia
          </p>
          <p className="leading-tight text-blue-500 hover:text-blue-700 pt-2">
            <Link
              href="https://www.bawaslu.go.id/id/pengumuman"
              target="_blank"
            >
              Pengumuman BAWASLU
            </Link>
          </p>
          <p className="text-xs text-gray-500 pt-1s">
            Pengumuman terbaru dari Badan Pusat Statistika Indonesia
          </p>
        </div>
        <div className="bg-white text-black text-sm border-2 rounded-md w-auto p-4 shadow-md">
          <img src="/eksternal4.png" alt="" className="w-full" />
          <p className="leading-tight text-blue-500 hover:text-blue-700 pt-5">
            <Link href="https://www.kpai.go.id/" target="_blank">
              Info KPAI
            </Link>
          </p>
          <p className="text-xs text-gray-500 pt-1">
            Informasi dan Berita terbaru dari Komisi Perlindungan Anak Indonesia
          </p>
        </div>
        <div className="bg-white text-black text-sm border-2 rounded-md w-auto p-4 shadow-md">
          <img src="/eksternal5.png" alt="" className="w-full" />
          <p className="leading-tight text-blue-500 hover:text-blue-700 pt-5">
            <Link href="https://www.komnasperempuan.go.id/" target="_blank">
              INFO KOMNAS PEREMPUAN
            </Link>
          </p>
          <p className="text-xs text-gray-500 pt-1">
            Info dan Berita terbaru dari Komnas Perempuan Indonesia
          </p>
        </div>
      </div> */}
    </>
  );
}