"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, useState } from "react";
import Link from "next/link";
import { useTranslations } from "next-intl";

const listPoldaAll = [
  {
    id: 1,
    img: "/assets/polda/polda-metro-jaya.svg",
    title: "Polda Metro Jaya",
    path: "polda-metro-jaya",
  },
  {
    id: 2,
    img: "/assets/polda/polda-jawa-barat.svg",
    title: "Polda Jawa Barat",
    path: "polda-jabar",
  },
  {
    id: 3,
    img: "/assets/polda/polda-banten.svg",
    title: "Polda Banten",
    path: "polda-banten",
  },
  {
    id: 4,
    img: "/assets/polda/polda-jateng.svg",
    title: "Polda Jawa Tengah",
    path: "polda-jateng",
  },
  {
    id: 5,
    img: "/assets/polda/polda-diy.svg",
    title: "Polda D.I Yogyakarta",
    path: "polda-diy",
  },
  {
    id: 6,
    img: "/assets/polda/polda-jatim.svg",
    title: "Polda Jawa Timur",
    path: "polda-jatim",
  },
  {
    id: 7,
    img: "/assets/polda/polda-aceh.svg",
    title: "Polda Aceh",
    path: "polda-aceh",
  },
  {
    id: 8,
    img: "/assets/polda/polda-sumut.svg",
    title: "Polda Sumatra Utara",
    path: "polda-sumut",
  },
  {
    id: 9,
    img: "/assets/polda/polda-sumbar.svg",
    title: "Polda Sumatra Barat",
    path: "polda-sumbar",
  },
  {
    id: 10,
    img: "/assets/polda/polda-riau.svg",
    title: "Polda Riau",
    path: "polda-riau",
  },
  {
    id: 11,
    img: "/assets/polda/polda-kepri.svg",
    title: "Polda Kep.Riau",
    path: "polda-kepri",
  },
  {
    id: 12,
    img: "/assets/polda/polda-jambi.svg",
    title: "Polda Jambi",
    path: "polda-jambi",
  },
  {
    id: 13,
    img: "/assets/polda/polda-jambi.svg",
    title: "Polda Jambi",
    path: "polda-jambi",
  },
  {
    id: 14,
    img: "/assets/polda/polda-sumsel.svg",
    title: "Polda Sumatra Selatan",
    path: "polda-sumsel",
  },
  {
    id: 15,
    img: "/assets/polda/polda-sumsel.svg",
    title: "Polda Kep.Bangka Belitung",
    path: "polda-babel",
  },
  {
    id: 16,
    img: "/assets/polda/polda-bengkulu.svg",
    title: "Polda Bengkulu",
    path: "polda-bengkulu",
  },
  {
    id: 17,
    img: "/assets/polda/polda-lampung.svg",
    title: "Polda Lampung",
    path: "polda-lampung",
  },
  {
    id: 18,
    img: "/assets/polda/polda-ntb.svg",
    title: "Polda Nusa Tenggara Barat",
    path: "polda-ntb",
  },
  {
    id: 19,
    img: "/assets/polda/polda-ntb.svg",
    title: "Polda Nusa Tenggara Barat",
    path: "polda-ntb",
  },
  {
    id: 20,
    img: "/assets/polda/polda-ntt.svg",
    title: "Polda Nusa Tenggara Timur",
    path: "polda-ntt",
  },
  {
    id: 21,
    img: "/assets/polda/polda-bali.svg",
    title: "Polda Bali",
    path: "polda-bali",
  },
  {
    id: 22,
    img: "/assets/polda/polda-kalbar.svg",
    title: "Polda Kalimantan Barat",
    path: "polda-kalbar",
  },
  {
    id: 23,
    img: "/assets/polda/polda-kalteng.svg",
    title: "Polda Kalimantan Tengah",
    path: "polda-kalteng",
  },
  {
    id: 24,
    img: "/assets/polda/polda-kalsel.svg",
    title: "Polda Kalimantan Selatan",
    path: "polda-kalsel",
  },
  {
    id: 25,
    img: "/assets/polda/polda-kaltim.svg",
    title: "Polda Kalimantan Timur",
    path: "polda-kaltim",
  },
  {
    id: 26,
    img: "/assets/polda/polda-kalut.svg",
    title: "Polda Kalimantan Utara",
    path: "polda-kaltara",
  },
  {
    id: 27,
    img: "/assets/polda/polda-sulteng.svg",
    title: "Polda Sulawesi Tengah",
    path: "polda-sulteng",
  },
  {
    id: 28,
    img: "/assets/polda/polda-sulawesi-utara.svg",
    title: "Polda Sulawesi Utara",
    path: "polda-sulut",
  },
  {
    id: 29,
    img: "/assets/polda/polda-gorontalo.svg",
    title: "Polda Gorontalo",
    path: "polda-gorontalo",
  },
  {
    id: 30,
    img: "/assets/polda/polda-sulbar.svg",
    title: "Polda Sulawesi Barat",
    path: "polda-sulbar",
  },
  {
    id: 31,
    img: "/assets/polda/polda-sulsel.svg",
    title: "Polda Sulawesi Selatan",
    path: "polda-sulsel",
  },
  {
    id: 32,
    img: "/assets/polda/polda-sultenggara.svg",
    title: "Polda Sulawesi Tenggara",
    path: "polda-sultra",
  },
  {
    id: 33,
    img: "/assets/polda/polda-malut.svg",
    title: "Polda Maluku Utara",
    path: "polda-maluku-utara",
  },
  {
    id: 34,
    img: "/assets/polda/polda-maluku.svg",
    title: "Polda Maluku",
    path: "polda-maluku",
  },
  {
    id: 35,
    img: "/assets/polda/polda-papuabarat.svg",
    title: "Polda Papua Barat",
    path: "polda-papua-barat",
  },
  {
    id: 36,
    img: "/assets/polda/polda-papua.svg",
    title: "Polda Papua",
    path: "polda-papua",
  },
];

export default function RegionalNews(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]);

  // 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.replace("Polda ", "").trim().toLowerCase();
    const slug = cleaned.replace(/\s+/g, "-");
    return slug;
  };

  return (
    <>
      {/* <Button
        onPress={onOpen}
        className="border-red-700 text-white w-fit"
        size="sm"
        variant="bordered"
      >
        {t("lebihBanyak")}
      </Button> */}
      {/* <a
        onClick={onOpen}
        className="group shadow-lg rounded-lg w-[200px] h-[200px] flex flex-col justify-center items-center hover:border-3 hover:border-red-600 cursor-pointer mx-auto transition duration-300 ease-in-out"
      >
        <Image
          src="/indonesia-map.png"
          width={480}
          height={480}
          alt="indonesia"
          className="w-[100px] group-hover:scale-125 transition duration-300 ease-in-out"
        />
        <p className="font-bold transform group-hover:translate-y-2 transition duration-300 ease-in-out">
          Polda Jajaran
        </p>
        <p className="text-xs text-primary underline transform group-hover:translate-y-2 transition duration-300 ease-in-out">
          Lihat Selengkapnya
        </p>
      </a> */}
      <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 mb- 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("beritaWilayah")} */}
                    Polda Jajaran
                  </p>
                </div>
              </ModalHeader>
              <ModalBody className="flex flex-row flex-wrap justify-center text-center">
                {listPoldaAll.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/polda/${item.path}`}>
                      <div className="flex flex-col items-center ">
                        <Image
                          radius="lg"
                          className="h-[59px]"
                          src={item.img}
                          alt="polda"
                        />
                        <p className="text-xs font-bold text-black">
                          {item.title}
                        </p>
                      </div>
                    </Link>
                  </div>
                ))}
              </ModalBody>
              <ModalFooter>
                <Button
                  variant="light"
                  onPress={onClose}
                  className="text-danger"
                >
                  {/* {t("tutup")} */}
                  Tutup
                </Button>
              </ModalFooter>
            </>
          )}
        </ModalContent>
      </Modal>
    </>
  );
}