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

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

  const listPolda = [
    {
      id: 1,
      img: "/temp/poldametro.svg",
      title: "Polda Metro Jaya",
      path: "/news/polda-metro-jaya",
    },
    {
      id: 2,
      img: "/temp/polda-sumut.svg",
      title: "Polda Sumatra Utara",
      path: "/news/polda-sumatra-utara",
    },
    {
      id: 3,
      img: "/temp/polda-banten.svg",
      title: "Polda Banten",
      path: "/news/polda-banten",
    },
    {
      id: 4,
      img: "/temp/polda-jateng.svg",
      title: "Polda Jawa Tengah",
      path: "/news/polda-jateng",
    },
    {
      id: 5,
      img: "/temp/polda-jatim.svg",
      title: "Polda Jawa Timur",
      path: "news/polda-jatim",
    },
  ];

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

  // 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 rounded-none md:rounded-lg h-auto lg:h-[338px] flex flex-col p-6 bg-[#DD8306]">
      <div className="text-xl text-white w-full justify-center flex">
        <p className="border-b-3 border-[#C3170F] py-2 w-fit">
          {" "}
          {t("beritaWilayah")}
        </p>
      </div>
      <div className="flex items-center justify-around py-10">
        {/* <div>
          <ChevronLeftWhite color="orange" />
        </div> */}
        <div className="gap-2 md:gap-4 lg:gap-6 grid grid-cols-2 md:grid-cols-3 lg:grid-cols-5">
          {listPolda.map((item: any, index: any) => (
            <Link href={item.path} key={item.path}>
              <div
                key={item.id}
                className="w-[157px] h-[141px] flex flex-col items-center justify-evenly"
              >
                <Image radius="lg" className="h-[59px]" src={item.img} />
                <p className="text-xs font-bold text-white">{item.title}</p>
              </div>
            </Link>
          ))}
        </div>
        {/* <div>
          <ChevronRightWhite color="orange" />
        </div> */}
      </div>
      <div className="flex justify-center w-full items-center">
        <Button
          onPress={onOpen}
          className="border-red-700 text-white w-fit"
          size="sm"
          variant="bordered"
        >
          {t("lebihBanyak")}
        </Button>
      </div>
      <Modal
        isOpen={isOpen}
        onOpenChange={onOpenChange}
        size="full"
        scrollBehavior={scrollBehavior}
        placement={modalPlacement}
        classNames={{
          wrapper: "bg-[#DD8306]",
          base: "bg-[#DD8306] min-h-full",
          // body: "w-full bg-white",
          // footer: "bg-white"
        }}
      >
        <ModalContent>
          {(onClose) => (
            <>
              <ModalHeader className="flex flex-col text-white items-center min-h mb- text-3xl font-semibold">
                <div className="text-xl text-white w-full justify-center flex">
                  <p className="border-b-3 border-[#C3170F] py-2 w-fit">
                    {" "}
                    {t("beritaWilayah")}
                  </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={item.path}>
                      <div className="flex flex-col items-center ">
                        <Image
                          radius="lg"
                          className="h-[59px]"
                          src={item.img}
                        />
                        <p className="text-xs font-bold text-white">
                          {item.title}
                        </p>
                      </div>
                    </Link>
                  </div>
                ))}
              </ModalBody>
              <ModalFooter>
                <Button variant="light" onPress={onClose}>
                  {t("tutup")}
                </Button>
              </ModalFooter>
            </>
          )}
        </ModalContent>
      </Modal>
    </div>
  );
}