import { useTranslations } from "next-intl";
import { useParams } from "next/navigation";
import router from "next/router";
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 { title } from "process";
import { htmlToString } from "@/utils/globals";
import { Link, useRouter } from "@/i18n/routing";

const ScrollableContentSatker = () => {
  const [contentType, setContentType] = useState("all");
  const [search, setSearch] = useState("");
  const router = useRouter();
  const params = useParams();
  const locale = params?.locale;
  const t = useTranslations("LandingPage");
  const satkerName: any = params?.satker_name;
  const [content, setContent] = useState<any>();
  const poldaName: any = params?.polda_name;

  let prefixPath = poldaName
    ? `/polda/${poldaName}`
    : satkerName
    ? `/satker/${satkerName}`
    : "";
  useEffect(() => {
    async function fetchCategories() {
      const url = "https://new.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();
    initFetch();
  }, []);

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

    setContent(data);
  };
  return (
    <>
      <div className="">
        <h1 className="text-2xl md:text-3xl font-bold text-gray-800 dark:text-white">
          <span className="text-[#c03724] dark:text-white">
            {t("welcome", { defaultValue: "Welcome" })} {satkerName?.replace("-", " ").toUpperCase()}
          </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("officialSatker", { defaultValue: "Official Satker" })} {satkerName?.replace("-", " ").toUpperCase()}
        </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">
                  <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">{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}`)
            }
            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"
          >
            {t("searchCoverage", { defaultValue: "Search Coverage" })}
            <Icon icon="ri:arrow-right-s-line" fontSize={20} />
          </button>
        </div>
      </div>
    </>
  );
};

export default ScrollableContentSatker;