"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 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/",
  },
];

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

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

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

  return (
    <>
      <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 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")} */}
                    Aplikasi Polri
                  </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}
                          alt="apps"
                        />
                        <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>
    </>
  );
}