"use client";
import { useTranslations } from "next-intl";
import Image from "next/image";
import React, { useEffect, useState } from "react";
import {
  ChevronDownIcon,
  ChevronLeftIcon,
  ChevronRightIcon,
  ChevronUpIcon,
  FbIconNav,
  IdnIcon,
  IgIcon,
  SearchIcon,
  SearchIcons,
  TtIcon,
  TwIcon,
  UKIcon,
  YtIcon,
} from "../icons";
import Link from "next/link";
import {
  Dropdown,
  DropdownTrigger,
  DropdownMenu,
  DropdownItem,
  Button,
  Input,
} from "@heroui/react";
import storedLanguage from "@/store/language-store";
import { ThemeSwitch } from "../theme-switch";

const images = [
  "/landing-1.jpg",
  "/landing-2.jpg",
  "/landing-3.jpg",
  "/landing-4.jpg",
];

export default function BannerHumasNew() {
  const t = useTranslations("Banner");
  const [currentIndex, setCurrentIndex] = useState(0);
  const [resetTimer, setResetTimer] = useState(0);
  const [onOpen, setOnOpen] = useState(false);
  const [searchValue, setSearchValue] = useState("");
  const language = storedLanguage((state) => state.locale);
  const setLanguage = storedLanguage((state) => state.setLocale);

  useEffect(() => {
    const interval = setInterval(() => {
      setCurrentIndex((prevIndex) => (prevIndex + 1) % images.length);
    }, 25000);

    return () => clearInterval(interval);
  }, [resetTimer]);
  const nextImage = () => {
    setCurrentIndex((prevIndex) => (prevIndex + 1) % images.length);
    setResetTimer((prev) => prev + 1);
  };

  const prevImage = () => {
    setCurrentIndex(
      (prevIndex) => (prevIndex - 1 + images.length) % images.length
    );
    setResetTimer((prev) => prev + 1);
  };

  return (
    <div className="h-fit relative text-white overflow-hidden">
      <div
        className="flex w-full h-[78vh] lg:h-[60vh] transition-transform duration-700 ease-in-out"
        style={{ transform: `translateX(-${currentIndex * 100}%)` }}
      >
        {images.map((img, index) => (
          <Link href="" key={index} className="w-full shrink-0">
            <Image
              src={img}
              width={1440}
              height={1080}
              alt={`humasbanner-${index}`}
              className="w-full h-full object-cover object-center opacity-[25] dark:opacity-70"
            />
          </Link>
        ))}
      </div>
      <div className="absolute inset-0 bg-black bg-opacity-40" />
      <div className="absolute z-50 lg:mt-[50px] top-44 left-1/2  transform -translate-x-1/2 -translate-y-1/2 text-center w-full lg:w-[75%]">
        <div className="flex flex-col gap-3 justify-between">
          <div className="flex justify-between items-center mb-10">
            <div className="flex flex-col gap-1 justify-start items-start">
              <p className="text-5xl font-bold text-left leading-0">
                SELAMAT DATANG DI WEBSITE RESMI DIVISI HUMAS POLRI
              </p>
              <p>OBYEKTIF - DIPERCAYA - PARTISIPASI</p>
            </div>
            <Image
              src="/divhumas.png"
              width={720}
              height={720}
              alt="logo-humas"
              className="w-[200px]"
            />
          </div>
          <div className="flex justify-between">
            <div className="flex flex-row gap-6">
              <Dropdown onOpenChange={setOnOpen}>
                <DropdownTrigger>
                  <Button
                    className="w-[200px] bg-white dark:bg-stone-900"
                    radius="sm"
                    endContent={
                      onOpen ? <ChevronUpIcon /> : <ChevronDownIcon />
                    }
                  >
                    <p className="text-left w-full  font-bold text-md">Menu</p>
                  </Button>
                </DropdownTrigger>
                <DropdownMenu>
                  <DropdownItem key="pemas">Pelayanan Masyarakat</DropdownItem>
                  <DropdownItem key="info">Informasi Publik</DropdownItem>
                  <DropdownItem key="tentang">Tentang</DropdownItem>
                  <DropdownItem key="apps">Aplikasi Polri</DropdownItem>
                </DropdownMenu>
              </Dropdown>
              <Link href={`https://eppid.polri.go.id/`}>
                <Button className="bg-white dark:bg-stone-900" radius="sm">
                  <p className="font-bold w-full ">e-PPID Polri</p>
                </Button>{" "}
              </Link>
            </div>
            <Input
              label=""
              placeholder="Temukkan Informasi Publik Terkini Dari Polri"
              type="text"
              value={searchValue}
              onValueChange={setSearchValue}
              className="max-w-md"
              endContent={
                <Link
                  href={`/news/all?search=${searchValue}`}
                  className="text-black"
                >
                  <SearchIcons />
                </Link>
              }
            />
          </div>
        </div>

        {/* <p className="text-[30px] lg:text-[42px] lg:leading-10 font-bold pb-1 md:pb-5">
          {t("jumbotron")}
        </p> */}
        {/* <p className="text-xs md:text-medium">{`"${t("phrase")}"`}</p> */}
      </div>
      <button
        onClick={prevImage}
        className="absolute left-4 top-1/2 transform -translate-y-1/2 bg-black/50 text-white px-2 py-2 rounded-full hover:bg-black/70 transition"
      >
        <ChevronLeftIcon />
      </button>
      <button
        onClick={nextImage}
        className="absolute right-4 top-1/2 transform -translate-y-1/2 bg-black/50 text-white px-2 py-2 rounded-full hover:bg-black/70 transition"
      >
        <ChevronRightIcon />
      </button>
      <div className="absolute bottom-4 right-60">
        <div className="flex">
          <div className="flex gap-1 lg:gap-3 items-center">
            <Link
              href="https://www.facebook.com/DivHumasPolri?_rdc=1&_rdr"
              target="_blank"
            >
              <div className="bg-white p-1.5 rounded-md">
                <FbIconNav size={16} />
              </div>
            </Link>
            <Link
              href="https://www.instagram.com/divisihumaspolri/"
              target="_blank"
            >
              <div className="bg-white p-0.5 rounded-md">
                <IgIcon size={24} />
              </div>
            </Link>
            <Link
              href="https://www.youtube.com/user/pidhumaspolri"
              target="_blank"
            >
              <div className="bg-white p-0.5 rounded-md">
                <YtIcon size={24} />
              </div>
            </Link>
            <Link href="https://twitter.com/DivHumas_Polri" target="_blank">
              <div className="bg-white p-1 rounded-md">
                <TwIcon size={20} />
              </div>
            </Link>
            <Link href="https://www.tiktok.com/@divhumas_polri" target="_blank">
              <div className="bg-white p-0.5 rounded-md">
                <TtIcon size={24} />
              </div>
            </Link>

            <div className="bg-white rounded-md py-0.5 px-1">
              <ThemeSwitch />
            </div>
            <a
              className="cursor-pointer"
              onClick={() =>
                language === "id" ? setLanguage("en") : setLanguage("id")
              }
            >
              {language === "id" ? <IdnIcon /> : <UKIcon />}
            </a>
          </div>
        </div>
      </div>
    </div>
    // <div
    //   className={`w-full h-[60vh] bg-cover bg-center rounded-lg shadow-lg`}
    //   style={{ backgroundImage: `url('/landing-3.jpg')` }}
    // />
    // <div
    //   className={`w-full h-[60vh] bg-cover bg-center rounded-lg shadow-lg relative`}
    // >
    //   <div
    //     className="absolute inset-0 bg-black bg-opacity-100 bg-cover bg-center object-cover"
    //     style={{ backgroundImage: `url('/landing-3.jpg')` }}
    //   />
    //   <div className="flex flex-row p-4">Your Text Here</div>
    // </div>
  );
}
