"use client";
import { Button } from "@nextui-org/button";
import {
  Image,
  Modal,
  ModalBody,
  ModalContent,
  ModalFooter,
  ModalHeader,
  ModalProps,
  useDisclosure,
} from "@nextui-org/react";
import { ChevronLeftWhite, ChevronRightWhite } from "../icons";
import React from "react";
import Link from "next/link";

export default function CategorySatker() {
  const { isOpen, onOpen, onOpenChange } = useDisclosure();
  const [scrollBehavior, setScrollBehavior] =
    React.useState<ModalProps["scrollBehavior"]>("inside");
  const [modalPlacement, setModalPlacement] = React.useState<any>("auto");

  const list = [
    {
      id: 1,
      img: "/assets/satker2/siber.svg",
      title: "Siber",
      path: "/news/siber",
    },
    {
      id: 2,
      img: "/assets/satker2/divkum.svg",
      title: "Divkum",
      path: "/news/divkum",
    },
    {
      id: 3,
      img: "/assets/satker2/puskeu.svg",
      title: "Puskeu",
      path: "/news/puskeu",
    },
    {
      id: 4,
      img: "/assets/satker2/ssdm.svg",
      title: "SSDM",
      path: "/news/ssdm",
    },
    {
      id: 5,
      img: "/assets/satker2/itwasum.svg",
      title: "Itwasum",
      path: "/news/itwasum",
    },
  ];

  const SatkerAll = [
    {
      id: 1,
      img: "/assets/satker2/siber.svg",
      title: "Siber",
      path: "/news/siber",
    },
    {
      id: 2,
      img: "/assets/satker2/divkum.svg",
      title: "Divkum",
      path: "/news/divkum",
    },
    {
      id: 3,
      img: "/assets/satker2/puskeu.svg",
      title: "Puskeu",
      path: "/news/puskeu",
    },
    {
      id: 4,
      img: "/assets/satker2/ssdm.svg",
      title: "SSDM",
      path: "/news/ssdm",
    },
    {
      id: 5,
      img: "/assets/satker2/itwasum.svg",
      title: "Itwasum",
      path: "/news/itwasum",
    },
    {
      id: 6,
      img: "/assets/satker2/stik-ptik.svg",
      title: "STIK-PTIK",
      path: "/news/stik-ptik",
    },
    {
      id: 7,
      img: "/assets/satker2/brimob.svg",
      title: "BRIMOB",
      path: "/news/brimob",
    },
    {
      id: 8,
      img: "/assets/satker2/humas.svg",
      title: "DIV HUMAS",
      path: "/news/humas",
    },
    {
      id: 9,
      img: "/assets/satker2/puslitbang.svg",
      title: "PUSLITBANG",
      path: "/news/puslitbang",
    },
    {
      id: 10,
      img: "/assets/satker2/binmas.svg",
      title: "BINMAS",
      path: "/news/binmas",
    },
    {
      id: 11,
      img: "/assets/satker2/divtik.svg",
      title: "DIV TIK",
      path: "/news/divtik",
    },
    {
      id: 12,
      img: "/assets/satker2/spripim.svg",
      title: "SPRIPIM",
      path: "/news/spripim",
    },
    {
      id: 13,
      img: "/assets/satker2/propam.svg",
      title: "DIV PROPAM",
      path: "/news/propam",
    },
    {
      id: 14,
      img: "/assets/satker2/sabbaharkam.svg",
      title: "KORPS SABHARA BAHARKAM",
      path: "/news/sabhara-baharkam",
    },
    {
      id: 15,
      img: "/assets/satker2/pusdokes.svg",
      title: "PUSDOKKES",
      path: "/news/pusdokkes",
    },
    {
      id: 16,
      img: "/assets/satker2/baharkam.svg",
      title: "baharkam",
      path: "/news/baharkam",
    },
    {
      id: 17,
      img: "/assets/satker2/polairud.svg",
      title: "POLAIURD",
      path: "/news/polairud",
    },
    {
      id: 18,
      img: "/assets/satker2/polair.svg",
      title: "POLAIR",
      path: "/news/polair",
    },
    {
      id: 19,
      img: "/assets/satker2/poludara.svg",
      title: "POLUDARA",
      path: "/news/poludara",
    },
    {
      id: 20,
      img: "/assets/satker2/lemdiklat.svg",
      title: "LEMDIKLAT",
      path: "/news/lemdiklat",
    },
    {
      id: 21,
      img: "/assets/satker2/akpol.svg",
      title: "AKPOL",
      path: "/news/akpol",
    },
    {
      id: 22,
      img: "/assets/satker2/korlantas.svg",
      title: "KORLANTAS",
      path: "/news/korlantas",
    },
    {
      id: 21,
      img: "/assets/satker2/pusinafis.svg",
      title: "PUSINAFIS",
      path: "/news/pusinafis",
    },
    {
      id: 22,
      img: "/assets/satker2/pusjarah.svg",
      title: "PUSJARAH",
      path: "/news/pusjarah",
    },
    {
      id: 23,
      img: "/assets/satker2/pusiknas.svg",
      title: "PUSIKNAS",
      path: "/news/pusiknas",
    },
    {
      id: 24,
      img: "/assets/satker2/slog.svg",
      title: "SLOG",
      path: "/news/slog",
    },
    {
      id: 25,
      img: "/assets/satker2/baintelkam.svg",
      title: "BAINTELKAM",
      path: "/news/baintelkam",
    },
    {
      id: 26,
      img: "/assets/satker2/bareskrim.svg",
      title: "BARESKRIM",
      path: "/news/bareskrim",
    },
    {
      id: 27,
      img: "/assets/satker2/hubinter.svg",
      title: "DIVHUBINTER",
      path: "/news/divhubinter",
    },
    {
      id: 28,
      img: "/assets/satker2/setum.svg",
      title: "SETUM",
      path: "/news/setum",
    },
    {
      id: 29,
      img: "/assets/satker2/puslabfor.svg",
      title: "PUSLABFOR",
      path: "/news/puslabfor",
    },
    {
      id: 30,
      img: "/assets/satker2/densus88.svg",
      title: "DENSUS 88",
      path: "/news/densus88",
    },
    {
      id: 31,
      img: "/assets/satker2/sahlikapolri.svg",
      title: "SAHLI KAPOLRI",
      path: "/news/sahli-kapolri",
    },
    {
      id: 32,
      img: "/assets/satker2/sops.svg",
      title: "SOPS",
      path: "/news/sops",
    },
    {
      id: 33,
      img: "/assets/satker2/srena.svg",
      title: "SRENA",
      path: "/news/srena",
    },
    {
      id: 34,
      img: "/assets/satker2/sespim.svg",
      title: "SESPIM POLRI",
      path: "/news/sespim-polri",
    },
    {
      id: 35,
      img: "/assets/satker2/setupa.svg",
      title: "SETUPA POLRI",
      path: "/news/setupa-polri",
    },
  ];

  // useEffect(() => {
  //     function updateLimitedData() {
  //         if (window.matchMedia("(max-width: 767px)").matches) {
  //             setLimitedData(list.slice(0, 2));
  //         } else if (window.matchMedia("(min-width: 768px) and (max-width: 1023px)").matches) {
  //             setLimitedData(list.slice(0, 3));
  //         } else {
  //             setLimitedData(list.slice(0, 5));
  //         }
  //     }

  //     updateLimitedData();
  //     window.addEventListener('resize', updateLimitedData);
  //     return () => {
  //         window.removeEventListener('resize', updateLimitedData);
  //     };
  // }, [list]);

  return (
    <div className="text-center bg-[#DD8306] rounded-none md:rounded-lg h-auto lg:h-[338px] space-y-0 py-4 md:space-y-7 flex flex-col justify-center">
      <div className="text-white font-bold text-2xl underline underline-offset-4 decoration-red-600">
        Kategori Satker
      </div>
      <div className="flex items-center justify-around">
        <div>
          <ChevronLeftWhite />
        </div>
        <div className="gap-2 md:gap-4 lg:gap-6 grid grid-cols-2 md:grid-cols-3 lg:grid-cols-5">
          {list.map((item: any, index: any) => (
            <Link href={item.path} key={item.path}>
              <div
                key={index}
                className="w-[157px] h-[140px] flex flex-col items-center justify-evenly   "
              >
                <Image radius="lg" src={item.img} />
                <p className="text-xs font-bold text-white">{item.title}</p>
              </div>
            </Link>
          ))}
        </div>
        <div>
          <ChevronRightWhite />
        </div>
      </div>
      <div>
        <Button
          onPress={onOpen}
          className="bg-white text-[#DD8306] font-bold"
          size="sm"
        >
          Lihat Lebih Banyak
        </Button>
        <Modal
          isOpen={isOpen}
          onOpenChange={onOpenChange}
          size="full"
          scrollBehavior={scrollBehavior}
          placement={modalPlacement}
          classNames={{
            wrapper: "bg-white",
            base: "bg-white min-h-full",
          }}
        >
          <ModalContent>
            {(onClose) => (
              <>
                <ModalHeader className="flex flex-col text-[#DD8306] items-center min-h text-3xl font-semibold">
                  Berita Wilayah
                </ModalHeader>
                <ModalBody className="flex flex-row flex-wrap justify-center text-center">
                  {SatkerAll.map((item: any, index: any) => (
                    <div
                      key={index.id}
                      className="w-[140px] h-[115px] flex flex-col items-center justify-center  rounded-lg shadow-sm"
                    >
                      <Link href={item.path}>
                        <Image
                          radius="lg"
                          className="h-[59px] "
                          src={item.img}
                        />
                      </Link>
                      <p className="text-xs font-bold text-[#DD8306] pt-2">
                        {item.title}
                      </p>
                    </div>
                  ))}
                </ModalBody>
                <ModalFooter>
                  <Button color="danger" variant="light" onPress={onClose}>
                    Tutup
                  </Button>
                </ModalFooter>
              </>
            )}
          </ModalContent>
        </Modal>
      </div>
    </div>
  );
}