mediahub-fe/components/landing-page/search-section-new.tsx

import { useTranslations } from "next-intl";
import { useParams } from "next/navigation";
import React, { useEffect, useState } from "react";
import { Icon } from "@iconify/react/dist/iconify.js";
import {
  Select,
  SelectContent,
  SelectGroup,
  SelectItem,
  SelectTrigger,
  SelectValue,
} from "../ui/select";
import Image from "next/image";
import { getHeroData } from "@/service/landing/landing";
import { htmlToString } from "@/utils/globals";
import { Link, useRouter } from "@/i18n/routing";
import { Button } from "../ui/button";
import ImageBlurry from "../ui/image-blurry";

const ScrollableContent = () => {
  const [contentType, setContentType] = useState("all");
  const [search, setSearch] = useState("");
  const [seeAllValueSatker, setSeeAllValueSatker] = useState(false);
  const [seeAllValuePolda, setSeeAllValuePolda] = useState(false);
  const router = useRouter();
  const params = useParams();
  const locale = params?.locale;
  const t = useTranslations("LandingPage");
  const [contentPolda, setContentPolda] = useState<any>();
  const [contentSatker, setContentSatker] = useState<any>();
  const poldaName = params?.polda_name;
  const satkerName = params?.satker_name;

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

  useEffect(() => {
    async function fetchCategories() {
      const url = "https://netidhub.com/api/csrf";

      try {
        const response = await fetch(url);

        if (!response.ok) {
          throw new Error(`HTTP error! status: ${response.status}`);
        }

        const data = await response.json();
        return data;
      } catch (error) {
        console.error("Fetch error: ", error);
      }
    }

    fetchCategories();
    initFetchPolda();
    initFetchSatker();
  }, []);

  const initFetchPolda = async () => {
    const response = await getHeroData(locale == "en", "polda");
    console.log(response);
    let data = response?.data?.data?.content;

    setContentPolda(data);
  };

  const initFetchSatker = async () => {
    const response = await getHeroData(locale == "en", "satker");
    console.log(response);
    let data = response?.data?.data?.content;

    setContentSatker(data);
  };

  return (
    <>
      <div className="w-full">
        <h1 className="text-[18px] md:text-3xl font-bold text-gray-800 dark:text-white">
          <span className="text-[#c03724] dark:text-white">
            {t("exploration", { defaultValue: "Exploration" })}&nbsp;
            {t("and", { defaultValue: "And" })}
          </span>
          <span className="text-[#c03724] dark:text-white">
            &nbsp;{t("download", { defaultValue: "Download" })}&nbsp;
            {t("coverage", { defaultValue: "Coverage" })}
          </span>
        </h1>
        <div className="w-[10%] h-1 bg-[#bb3523] mt-2"></div>
        <div className="w-full h-1 bg-[#bb3523] mx-auto"></div>
        <p className="text-sm md:text-base text-black dark:text-gray-100 mt-4">
          {t("officialCoverage", { defaultValue: "Official Coverage" })}
        </p>

        <div className="mt-6 flex flex-col md:flex-row justify-center gap-4">
          <div className="flex flex-row items-center w-full rounded-lg gap-2 overflow-hidden">
            <Select value={contentType} onValueChange={setContentType}>
              <SelectTrigger className="w-[180px] h-[55px]">
                <span className="text-black dark:text-white">
                  <svg
                    className="mx-2 dark:"
                    width="25"
                    height="24"
                    viewBox="0 0 25 24"
                    fill="none"
                    xmlns="http://www.w3.org/2000/svg"
                  >
                    <path
                      d="M20 7.5H5C4.6023 7.5004 4.221 7.65856 3.93978 7.93978C3.65856 8.221 3.5004 8.6023 3.5 9V19.5C3.5004 19.8977 3.65856 20.279 3.93978 20.5602C4.221 20.8414 4.6023 20.9996 5 21H20C20.3977 20.9996 20.779 20.8414 21.0602 20.5602C21.3414 20.279 21.4996 19.8977 21.5 19.5V9C21.4996 8.6023 21.3414 8.221 21.0602 7.93978C20.779 7.65856 20.3977 7.5004 20 7.5ZM10.25 17.25V11.25L15.5 14.25L10.25 17.25ZM5 4.5H20V6H5V4.5ZM6.5 1.5H18.5V3H6.5V1.5Z"
                      fill="currentColor"
                    />
                  </svg>
                </span>
                <SelectValue />
              </SelectTrigger>
              <SelectContent>
                <SelectGroup>
                  <SelectItem value="all" className="dark:text-white">
                    {t("allContent", { defaultValue: "All Content" })}
                  </SelectItem>
                  <SelectItem value="image">
                    {t("image", { defaultValue: "Image" })}
                  </SelectItem>
                  <SelectItem value="video">
                    {t("video", { defaultValue: "Video" })}
                  </SelectItem>
                  <SelectItem value="document">
                    {t("text", { defaultValue: "Text" })}
                  </SelectItem>
                  <SelectItem value="audio">
                    {t("audio", { defaultValue: "Audio" })}
                  </SelectItem>
                </SelectGroup>
              </SelectContent>
            </Select>
            <div className="flex items-center flex-1 border border-gray-300 rounded-lg overflow-hidden">
              <span className="material-icons text-black dark:text-white px-4">
                <svg
                  xmlns="http://www.w3.org/2000/svg"
                  width="1em"
                  height="1em"
                  viewBox="0 0 24 24"
                >
                  <path
                    fill="currentColor"
                    d="m19.6 21l-6.3-6.3q-.75.6-1.725.95T9.5 16q-2.725 0-4.612-1.888T3 9.5t1.888-4.612T9.5 3t4.613 1.888T16 9.5q0 1.1-.35 2.075T14.7 13.3l6.3 6.3zM9.5 14q1.875 0 3.188-1.312T14 9.5t-1.312-3.187T9.5 5T6.313 6.313T5 9.5t1.313 3.188T9.5 14"
                  />
                </svg>
              </span>
              <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"
                onChange={(e) => setSearch(e.target.value)}
              />
            </div>
          </div>
          <button
            onClick={() =>
              router.push(
                prefixPath +
                  `/${contentType}/filter?title=${search.toLowerCase()}`
              )
            }
            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>
      <div className="flex flex-col md:flex-row gap-6 py-8">
        {/* Berita Polda */}
        {locale === "in" && (
          <div className="w-full md:w-1/2 px-0 lg:px-4">
            <h2 className="text-lg md:text-xl font-bold text-[#bb3523] mb-2 uppercase">
              {t("regionNews", { defaultValue: "Region News" })}
            </h2>
            <div className="w-[10%] h-1 bg-[#bb3523]"></div>
            <div className="w-full h-1 bg-[#bb3523] mx-auto mb-4"></div>
            <div className="grid gap-4">
              {(seeAllValuePolda
                ? contentPolda
                : contentPolda?.slice(0, 3)
              )?.map((item: any, index: number) => (
                <div
                  key={index}
                  className={`bg-white dark:bg-black dark:border dark:border-gray-500 rounded-lg shadow-md overflow-hidden ${
                    index === 0 ? "" : "flex"
                  }`}
                >
                  <div
                    className={`relative ${
                      index === 0 ? "w-full h-48" : " w-1/2 h-[150px]"
                    }`}
                  >
                    <Link
                      href={
                        Number(item?.fileTypeId) == 1
                          ? `${prefixPath}/image/detail/${item?.slug}`
                          : Number(item?.fileTypeId) == 2
                          ? `${prefixPath}/video/detail/${item?.slug}`
                          : Number(item?.fileTypeId) == 3
                          ? `${prefixPath}/document/detail/${item?.slug}`
                          : `${prefixPath}/audio/detail/${item?.slug}`
                      }
                    >
                      {/* <Image
                        priority={true}
                        src={item?.smallThumbnailLink}
                        alt={item?.title}
                        fill
                        objectFit="cover"
                      /> */}
                      <ImageBlurry
                        priority={true}
                        src={item?.smallThumbnailLink}
                        alt="gambar-utama"
                        style={{
                          objectFit: "contain",
                          width: "100%",
                          height: "100%",
                        }}
                      />
                      <div className="absolute top-2 right-2 bg-[#c03724] rounded-full p-1 shadow">
                        <svg
                          xmlns="http://www.w3.org/2000/svg"
                          width="24"
                          height="24"
                          viewBox="0 0 24 24"
                        >
                          <g fill="none">
                            <path d="m12.593 23.258l-.011.002l-.071.035l-.02.004l-.014-.004l-.071-.035q-.016-.005-.024.005l-.004.01l-.017.428l.005.02l.01.013l.104.074l.015.004l.012-.004l.104-.074l.012-.016l.004-.017l-.017-.427q-.004-.016-.017-.018m.265-.113l-.013.002l-.185.093l-.01.01l-.003.011l.018.43l.005.012l.008.007l.201.093q.019.005.029-.008l.004-.014l-.034-.614q-.005-.018-.02-.022m-.715.002a.02.02 0 0 0-.027.006l-.006.014l-.034.614q.001.018.017.024l.015-.002l.201-.093l.01-.008l.004-.011l.017-.43l-.003-.012l-.01-.01z" />
                            <path
                              fill="white"
                              d="M20 6a2 2 0 0 1 2 2v11.333a2 2 0 0 1-2 2H7a2 2 0 0 1-2-2V8a2 2 0 0 1 2-2zm-8.268 7.944L7.136 18.54l-.066.06l-.07.054v.68h13v-.68l-.07-.053l-.066-.06l-2.24-2.24l-.353.354l.055.055a1 1 0 0 1-1.32 1.497l-.094-.083zM17 3a2 2 0 0 1 1.995 1.85L19 5H5a1 1 0 0 0-.993.883L4 6v12a2 2 0 0 1-1.995-1.85L2 16V6a3 3 0 0 1 2.824-2.995L5 3zm3 5H7v7.848L10.848 12a1.25 1.25 0 0 1 1.768 0l3.241 3.24l.884-.883a1.25 1.25 0 0 1 1.768 0L20 15.848zm-3.5 1.5a1.5 1.5 0 1 1 0 3a1.5 1.5 0 0 1 0-3"
                            />
                          </g>
                        </svg>
                      </div>
                    </Link>
                  </div>
                  <Link
                    href={
                      Number(item?.fileTypeId) == 1
                        ? `${prefixPath}/image/detail/${item?.slug}`
                        : Number(item?.fileTypeId) == 2
                        ? `${prefixPath}/video/detail/${item?.slug}`
                        : Number(item?.fileTypeId) == 3
                        ? `${prefixPath}/document/detail/${item?.slug}`
                        : `${prefixPath}/audio/detail/${item?.slug}`
                    }
                    className={`${
                      index === 0 ? "p-4" : "p-3 w-[50%] cursor-pointer"
                    }`}
                  >
                    <p className="text-sm text-[#bb3523] font-bold mb-1 px-2">
                      {item.categoryName}
                    </p>
                    <h3 className="text-sm font-semibold text-gray-800 dark:text-white px-2">
                      {item.title}
                    </h3>
                    <p className="text-xs text-gray-500 dark:text-white mt-1 truncate px-2">
                      {htmlToString(item.description)}
                    </p>
                  </Link>
                </div>
              ))}
              {contentPolda?.length > 3 && (
                <div className="flex items-center flex-row justify-start mt-6">
                  <Button
                    onClick={() => setSeeAllValuePolda(!seeAllValuePolda)}
                    className="bg-white hover:bg-[#bb3523] text-[#bb3523] hover:text-white border-2 border-[#bb3523]"
                  >
                    {seeAllValuePolda
                      ? t("seeLess", { defaultValue: "See Less" })
                      : t("seeMore", { defaultValue: "See More" })}{" "}
                    <span className="text-[#bb3523] hover:text-white">
                      <svg
                        xmlns="http://www.w3.org/2000/svg"
                        width="24"
                        height="24"
                        viewBox="0 0 24 24"
                      >
                        <path
                          fill="none"
                          stroke="currentColor"
                          strokeLinecap="round"
                          strokeLinejoin="round"
                          strokeWidth="2.5"
                          d="m10 17l5-5m0 0l-5-5"
                        />
                      </svg>
                    </span>
                  </Button>
                </div>
              )}
            </div>
          </div>
        )}

        {/* Berita SATKER */}
        {locale === "in" && (
          <div className="w-full md:w-1/2 px-0 lg:px-4">
            <h2 className="text-lg md:text-xl font-bold mb-2 text-[#bb3523] uppercase">
              {t("divisionNews", { defaultValue: "Division News" })}
            </h2>
            <div className="w-[10%] h-1 bg-[#bb3523]"></div>
            <div className="w-full h-1 bg-[#bb3523] mx-auto mb-4"></div>
            <div className="grid gap-4">
              {(seeAllValueSatker
                ? contentSatker
                : contentSatker?.slice(0, 3)
              )?.map((item: any, index: number) => (
                <div
                  key={index}
                  className={`bg-white dark:bg-black dark:border dark:border-gray-500 rounded-lg shadow-md overflow-hidden ${
                    index === 0 ? "" : "flex"
                  }`}
                >
                  <div
                    className={`relative ${
                      index === 0 ? "w-full h-48" : " w-1/2 h-[150px]"
                    }`}
                  >
                    <Link
                      href={
                        Number(item?.fileTypeId) == 1
                          ? `${prefixPath}/image/detail/${item?.slug}`
                          : Number(item?.fileTypeId) == 2
                          ? `${prefixPath}/video/detail/${item?.slug}`
                          : Number(item?.fileTypeId) == 3
                          ? `${prefixPath}/document/detail/${item?.slug}`
                          : `${prefixPath}/audio/detail/${item?.slug}`
                      }
                    >
                      {/* <Image
                        priority={true}
                        src={item?.smallThumbnailLink}
                        alt={item?.title}
                        fill
                        objectFit="cover"
                      /> */}
                      <ImageBlurry
                        priority={true}
                        src={item?.smallThumbnailLink}
                        alt="gambar-utama"
                        style={{
                          objectFit: "contain",
                          width: "100%",
                          height: "100%",
                        }}
                      />
                      <div className="absolute top-2 right-2 bg-[#c03724] rounded-full p-1 shadow">
                        <svg
                          xmlns="http://www.w3.org/2000/svg"
                          width="24"
                          height="24"
                          viewBox="0 0 24 24"
                        >
                          <g fill="none">
                            <path d="m12.593 23.258l-.011.002l-.071.035l-.02.004l-.014-.004l-.071-.035q-.016-.005-.024.005l-.004.01l-.017.428l.005.02l.01.013l.104.074l.015.004l.012-.004l.104-.074l.012-.016l.004-.017l-.017-.427q-.004-.016-.017-.018m.265-.113l-.013.002l-.185.093l-.01.01l-.003.011l.018.43l.005.012l.008.007l.201.093q.019.005.029-.008l.004-.014l-.034-.614q-.005-.018-.02-.022m-.715.002a.02.02 0 0 0-.027.006l-.006.014l-.034.614q.001.018.017.024l.015-.002l.201-.093l.01-.008l.004-.011l.017-.43l-.003-.012l-.01-.01z" />
                            <path
                              fill="white"
                              d="M20 6a2 2 0 0 1 2 2v11.333a2 2 0 0 1-2 2H7a2 2 0 0 1-2-2V8a2 2 0 0 1 2-2zm-8.268 7.944L7.136 18.54l-.066.06l-.07.054v.68h13v-.68l-.07-.053l-.066-.06l-2.24-2.24l-.353.354l.055.055a1 1 0 0 1-1.32 1.497l-.094-.083zM17 3a2 2 0 0 1 1.995 1.85L19 5H5a1 1 0 0 0-.993.883L4 6v12a2 2 0 0 1-1.995-1.85L2 16V6a3 3 0 0 1 2.824-2.995L5 3zm3 5H7v7.848L10.848 12a1.25 1.25 0 0 1 1.768 0l3.241 3.24l.884-.883a1.25 1.25 0 0 1 1.768 0L20 15.848zm-3.5 1.5a1.5 1.5 0 1 1 0 3a1.5 1.5 0 0 1 0-3"
                            />
                          </g>
                        </svg>
                      </div>
                    </Link>
                  </div>
                  <Link
                    href={
                      Number(item?.fileTypeId) == 1
                        ? `${prefixPath}/image/detail/${item?.slug}`
                        : Number(item?.fileTypeId) == 2
                        ? `${prefixPath}/video/detail/${item?.slug}`
                        : Number(item?.fileTypeId) == 3
                        ? `${prefixPath}/document/detail/${item?.slug}`
                        : `${prefixPath}/audio/detail/${item?.slug}`
                    }
                    className={`${index === 0 ? "p-4" : "p-3 w-[50%]"}`}
                  >
                    <p className="text-sm text-[#bb3523] font-bold mb-1 px-2">
                      {item.categoryName}
                    </p>
                    <h3 className="text-sm font-semibold text-gray-800 dark:text-white px-2">
                      {item.title}
                    </h3>
                    <p className="text-xs text-gray-500 dark:text-white mt-1 truncate px-2">
                      {htmlToString(item.description)}
                    </p>
                  </Link>
                </div>
              ))}
              {/* Tombol See More / See Less */}
              {contentSatker?.length > 3 && (
                <div className="flex items-center flex-row justify-start mt-6">
                  <Button
                    onClick={() => setSeeAllValueSatker(!seeAllValueSatker)}
                    className="bg-white hover:bg-[#bb3523] text-[#bb3523] hover:text-white border-2 border-[#bb3523]"
                  >
                    {seeAllValueSatker
                      ? t("seeLess", { defaultValue: "See Less" })
                      : t("seeMore", { defaultValue: "See More" })}{" "}
                    <span className="text-[#bb3523] hover:text-white">
                      <svg
                        xmlns="http://www.w3.org/2000/svg"
                        width="24"
                        height="24"
                        viewBox="0 0 24 24"
                      >
                        <path
                          fill="none"
                          stroke="currentColor"
                          strokeLinecap="round"
                          strokeLinejoin="round"
                          strokeWidth="2.5"
                          d="m10 17l5-5m0 0l-5-5"
                        />
                      </svg>
                    </span>
                  </Button>
                </div>
              )}
            </div>
          </div>
        )}
      </div>
    </>
  );
};

export default ScrollableContent;