"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";

export default function PolriApps() {
  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 listApps = [
    {
      id: 1,
      img: "/landing-polri-super-apps.png",
      title: "Polri Super Apps",
      path: "https://play.google.com/store/apps/details?id=superapps.polri.presisi.presisi&hl=en_US&gl=US",
    },
    {
      id: 2,
      img: "/landing-portal-humas.png",
      title: "Portal Humas",
      path: "https://portal.humas.polri.go.id/",
    },
    {
      id: 3,
      img: "/landing-mediahub-polri.png",
      title: "Portal Humas",
      path: "https://play.google.com/store/apps/details?id=com.mediahub.mediahub_mobile",
    },
    {
      id: 4,
      img: "/landing-polri-tv.png",
      title: "Portal Humas",
      path: "https://play.google.com/store/apps/details?id=com.polritv",
    },
    {
      id: 5,
      img: "/landing-inp.png",
      title: "Portal Humas",
      path: "https://inp.polri.go.id/",
    },
    {
      id: 6,
      img: "/landing-polisiku.png",
      title: "Portal Humas",
      path: "https://play.google.com/store/apps/details?id=id.co.qlue.polisiku&hl=id&gl=ID",
    },
  ];

  const listAppsAll = [
    {
      id: 1,
      img: "/landing-polri-super-apps.png",
      title: "Polri Super Apps",
      path: "https://play.google.com/store/apps/details?id=superapps.polri.presisi.presisi&hl=en_US&gl=US",
    },
    {
      id: 2,
      img: "/landing-portal-humas.png",
      title: "Portal Humas",
      path: "https://portal.humas.polri.go.id/",
    },
    {
      id: 3,
      img: "/landing-mediahub-polri.png",
      title: "Portal Humas",
      path: "https://play.google.com/store/apps/details?id=com.mediahub.mediahub_mobile",
    },
    {
      id: 4,
      img: "/landing-polri-tv.png",
      title: "Portal Humas",
      path: "https://play.google.com/store/apps/details?id=com.polritv",
    },
    {
      id: 5,
      img: "/landing-inp.png",
      title: "Portal Humas",
      path: "https://inp.polri.go.id/",
    },
    {
      id: 6,
      img: "/landing-polisiku.png",
      title: "Portal Humas",
      path: "https://play.google.com/store/apps/details?id=id.co.qlue.polisiku&hl=id&gl=ID",
    },
    {
      id: 7,
      img: "/landing-e-rikkes.png",
      title: "e-RIKKES",
      path: "https://erikkes.id/",
    },
    {
      id: 8,
      img: "/landing-e-ppsi.png",
      title: "e-PPSI",
      path: "https://eppsi.id/",
    },
    {
      id: 9,
      img: "/landing-bos.png",
      title: "BOS",
      path: "https://bos.polri.go.id/login",
    },
    {
      id: 10,
      img: "/landing-signal.png",
      title: "SIGNAL",
      path: "https://play.google.com/store/apps/details?id=app.signal.id",
    },

    {
      id: 11,
      img: "/landing-skck.png",
      title: "SKCK Online",
      path: "https://skck.polri.go.id/",
    },
    {
      id: 12,
      img: "/landing-propam-presisi.png",
      title: "Propam Presisi",
      path: "https://play.google.com/store/apps/details?id=com.stk.pengaduanpropam",
    },
    {
      id: 13,
      img: "/landing-sdm-polri.png",
      title: "SDM Polri",
      path: "https://penerimaan.polri.go.id/",
    },
    {
      id: 14,
      img: "/landing-e-avis.png",
      title: "e-AVIS",
      path: "https://e-avis.korlantas.polri.go.id/",
    },
    {
      id: 10,
      img: "/landing-wbs.png",
      title: "Whistle Blowing System",
      path: "https://pengaduan-penerimaan.polri.go.id/",
    },

    {
      id: 11,
      img: "/landing-dumas-presisi.png",
      title: "Dumas Presisi",
      path: "https://dumaspresisi.polri.go.id/",
    },
    {
      id: 12,
      img: "/landing-sinar.png",
      title: "Sinar",
      path: "https://www.digitalkorlantas.id/sim/",
    },
  ];

  // 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 (
    <div className="text-center rounded-md lg: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("aplikasi")}
        </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-6">
          {listApps.map((item: any, index: any) => (
            <Link
              href={`/news/all?polda=${changeNameToSlug(item.title)}`}
              key={item.path}
              target="_blank"
            >
              <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="5xl"
        scrollBehavior={scrollBehavior}
        placement={modalPlacement}
        className="bg-white text-black"
      >
        <ModalContent>
          {(onClose) => (
            <>
              <ModalHeader className="flex flex-col text-black justify-center 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("aplikasi")}
                  </p>
                </div>
              </ModalHeader>
              <ModalBody className="flex flex-row flex-wrap justify-center text-center">
                {listAppsAll.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/all?polda=${changeNameToSlug(item.title)}`}
                      target="_blank"
                    >
                      <div className="flex flex-col items-center ">
                        <Image
                          radius="lg"
                          className="h-[59px]"
                          src={item.img}
                        />
                        <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")}
                </Button>
              </ModalFooter>
            </>
          )}
        </ModalContent>
      </Modal>
    </div>
  );
}