mediahub-fe/components/landing-page/area-coverage-and-work-units.tsx

"use client";

import React, { useEffect, useState } from "react";
import {
  Dialog,
  DialogClose,
  DialogContent,
  DialogFooter,
  DialogHeader,
  DialogTitle,
  DialogTrigger,
} from "@/components/ui/dialog";
import Image from "next/image";
import Coverage from "./coverage";
import Division from "./division";
import { useTranslations } from "next-intl";
import { useParams } from "next/navigation";
import { useRouter } from "@/i18n/routing";
import { Icon } from "../ui/icon";

const AreaCoverageWorkUnits = () => {
  const [openPolda, setOpenPolda] = useState(false);
  const [openSatker, setOpenSatker] = useState(false);
  const t = useTranslations("LandingPage");
  const params = useParams();
  const locale = params?.locale;
  const [search, setSearch] = useState("");
  const router = useRouter();
  const poldaName = params?.polda_name;
  const satkerName = params?.satker_name;

  let prefixPath = poldaName
    ? `/polda/${poldaName}`
    : satkerName
    ? `/satker/${satkerName}`
    : "";

  useEffect(() => {
    if (openPolda || openSatker) {
      document.body.classList.add("overflow-hidden");
    } else {
      document.body.classList.remove("overflow-hidden");
    }

    return () => {
      document.body.classList.remove("overflow-hidden");
    };
  }, [openPolda, openSatker]);

  return (
    <>
      {locale === "in" && (
        <div className="mx-auto px-4 lg:px-0 py-6">
          <h2 className="text-start text-lg md:text-xl font-bold text-[#bb3523] border-b-2 border-[#bb3523] mb-4 uppercase">
            {t("areaCoverage", { defaultValue: "Area Coverage" })}
          </h2>
          {/* search */}
          <div className="flex flex-row gap-2 mb-2">
            <input
              type="text"
              placeholder={t("searchCoverageHere", {
                defaultValue: "Search Coverage Here",
              })}
              className="w-full py-4 px-2 text-sm text-gray-700 dark:text-gray-100 focus:outline-none rounded-md"
              onChange={(e) => setSearch(e.target.value)}
            />
            <button
              onClick={() =>
                router.push(prefixPath + `/regional/filter?title=${search}`)
              }
              className="flex justify-center items-center px-6 w-full lg:w-[20%] py-4 bg-[#bb3523] gap-2 text-white rounded-lg hover:bg-red-700 text-[14px]"
            >
              {t("searchCoverage", { defaultValue: "Search Coverage" })}
              <Icon icon="ri:arrow-right-s-line" fontSize={20} />
            </button>
          </div>
          <div className="flex flex-col justify-center lg:flex-row gap-8 ">
            {/* POLDA */}
            <Dialog open={openPolda} onOpenChange={setOpenPolda}>
              <DialogTrigger asChild>
                <button
                  onClick={() => setOpenPolda(true)}
                  className="flex flex-col gap-2 justify-center items-center shadow-lg group rounded-xl py-5 w-full border-2 border-transparent hover:border-[#bb3523] transition-all duration-300"
                >
                  <Image
                    priority={true}
                    width={1920}
                    height={1080}
                    alt="indo"
                    src="/assets/indo.png"
                    className="h-32 w-32 group-hover:scale-110 group-hover:border-[#bb3523] "
                  />
                  <p className="text-base font-bold">
                    {t("regionalPolice", { defaultValue: "Regional Police" })}
                  </p>
                </button>
              </DialogTrigger>
              <DialogContent
                size="md"
                className="max-h-[90vh] overflow-hidden flex flex-col"
                data-lenis-prevent
              >
                <DialogHeader className="flex flex-col justify-center">
                  <DialogTitle>
                    <p className="text-center">
                      {t("regionalPolice", { defaultValue: "Regional Police" })}
                    </p>
                  </DialogTitle>
                  <DialogTitle>
                    <div className="h-1 w-[150px] bg-[#bb3523] mx-auto mb-6 rounded"></div>
                  </DialogTitle>
                </DialogHeader>
                <div className="overflow-y-auto px-1 flex-1">
                  <Coverage />
                </div>
                <div className="text-right mt-4">
                  <DialogClose asChild>
                    <button className="text-[#bb3523] font-bold">
                      {t("close", { defaultValue: "Close" })}
                    </button>
                  </DialogClose>
                </div>
              </DialogContent>
            </Dialog>

            {/* SATKER */}
            <Dialog open={openSatker} onOpenChange={setOpenSatker}>
              <DialogTrigger asChild>
                <button className="flex flex-col gap-2 justify-center items-center shadow-lg group rounded-xl py-5 w-full border-2 border-transparent hover:border-[#bb3523] transition-all duration-300">
                  <Image
                    priority={true}
                    width={1920}
                    height={1080}
                    alt="polri"
                    src="/assets/logo-polri.png"
                    className="h-32 w-32 group-hover:scale-110 group-hover:border-[#bb3523] transition-transform duration-300"
                  />
                  <p className="text-base font-bold">
                    {t("policeDivision", { defaultValue: "Police Division" })}
                  </p>
                </button>
              </DialogTrigger>
              <DialogContent size="md" data-lenis-prevent>
                <DialogHeader className="flex flex-col justify-center">
                  <DialogTitle>
                    <p className="text-center">
                      {t("policeDivision", { defaultValue: "Police Division" })}
                    </p>
                  </DialogTitle>
                  <DialogTitle>
                    <div className="h-1 w-[150px] bg-[#bb3523] mx-auto mb-6 rounded"></div>
                  </DialogTitle>
                </DialogHeader>
                <Division />
                <div className="text-right mt-4">
                  <DialogClose asChild>
                    <button className="text-[#bb3523] font-bold">
                      {t("close", { defaultValue: "Close" })}
                    </button>
                  </DialogClose>
                </div>
              </DialogContent>
            </Dialog>
          </div>
        </div>
      )}
    </>
  );
};

export default AreaCoverageWorkUnits;