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

export default function CategorySatker(props: {
  opened: boolean;
  modalStatus: (status: boolean) => void;
}) {
  const { isOpen, onOpen, onOpenChange } = useDisclosure();
  const [scrollBehavior, setScrollBehavior] =
    React.useState<ModalProps["scrollBehavior"]>("inside");
  const [modalPlacement, setModalPlacement] = React.useState<any>("auto");
  const t = useTranslations("Landing");

  useEffect(() => {
    if (props.opened) {
      onOpen();
    }
  }, [props.opened]);

  const SatkerAll = [
    {
      id: 36,
      img: "/assets/satker2/yanma.png",
      title: "YANMA",
      path: "/news/yanma",
    },
    {
      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]);

  const changeNameToSlug = (name: string) => {
    const cleaned = name.trim().toLowerCase();
    return cleaned.replace(/\s+/g, "-");
  };

  return (
    <>
      {/* <Button
          onPress={onOpen}
          className="border-red-700 text-white w-fit"
          size="sm"
          variant="bordered"
        >
          {t("lebihBanyak")}
        </Button> */}
      <Modal
        isOpen={isOpen}
        onOpenChange={() => {
          props.modalStatus(!props.opened);
          onOpenChange();
        }}
        size="5xl"
        scrollBehavior={scrollBehavior}
        placement="center"
        className="bg-white"
      >
        <ModalContent>
          {(onClose) => (
            <>
              <ModalHeader className="flex flex-col text-black items-center min-h text-3xl font-semibold">
                <div className="text-xl text-black w-full justify-center flex">
                  <p className="border-b-3 border-[#C3170F] py-2 w-fit">
                    {/* {t("kategoriSatker")} */}
                    Satuan Kerja Polri
                  </p>
                </div>
              </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={`/news/satker/${changeNameToSlug(item.title)}`}>
                      {" "}
                      <img className="h-[59px] w-[50px]" src={item.img} />
                    </Link>
                    <p className="text-xs font-bold text-black pt-2">
                      {item.title}
                    </p>
                  </div>
                ))}
              </ModalBody>
              <ModalFooter>
                <Button
                  variant="light"
                  onPress={onClose}
                  className="text-danger"
                >
                  {" "}
                  {t("tutup")}
                </Button>
              </ModalFooter>
            </>
          )}
        </ModalContent>
      </Modal>
    </>
  );
}