"use client";
import {
  convertDateFormat,
  formatMonthString,
  formatTextToHtmlTag,
} from "@/utils/global";
import {
  CalendarIcon,
  ChevronLeftIcon,
  ChevronRightIcon,
  ClockIcon,
  EyeIcon,
  EyeIconMdi,
  FacebookIcon,
  SquareFacebookIcon,
  SquareLinkedInIcon,
  SquareWhatsappIcon,
  SquareXIcon,
  UserIcon,
} from "../icons";
import { Button } from "@heroui/button";
import { useParams, usePathname } from "next/navigation";
import Link from "next/link";
import { useEffect, useState } from "react";
import { image } from "@heroui/theme";
import Cookies from "js-cookie";
import { saveActivity } from "@/services/activity-log";
import { Accordion, AccordionItem, Image } from "@heroui/react";

const token = Cookies.get("access_token");
const uid = Cookies.get("uie");

export default function DetailNews(props: { data: any; listArticle: any }) {
  const { data, listArticle } = props;
  const [prevArticle, setPrevArticle] = useState("");
  const [nextArticle, setNextArticle] = useState("");
  const [imageNow, setImageNow] = useState(0);
  const pathname = usePathname();
  const params = useParams();
  const id: any = params?.id;
  const shareText = "Humas Polri";

  const handleShare = async (platform: string) => {
    let shareLink = "";
    const urls = "https://new-humas.polri.go.id/" + pathname;

    let req: any = {
      activityTypeId: 3,
      url: "https://new-humas.polri.go.id/" + pathname,
      articleId: Number(id?.split("-")[0]),
    };
    if (uid) {
      req.userId = Number(uid);
    }

    const resActivity = await saveActivity(req, token);

    switch (platform) {
      case "facebook":
        shareLink = `https://www.facebook.com/sharer/sharer.php?u=${encodeURIComponent(
          urls
        )}`;
        break;
      case "x":
        shareLink = `https://x.com/intent/tweet?url=${encodeURIComponent(
          urls
        )}&text=${encodeURIComponent(shareText)}`;
        break;
      case "linkedin":
        shareLink = `https://www.linkedin.com/sharing/share-offsite/?url=${encodeURIComponent(
          urls
        )}`;
        break;
      case "whatsapp":
        shareLink = `https://wa.me/?text=${encodeURIComponent(
          shareText + " " + urls
        )}`;
        break;
      default:
        break;
    }

    const popupWidth = 800;
    const popupHeight = 600;
    const left = window.screenX + (window.innerWidth - popupWidth) / 2;
    const top = window.screenY + (window.innerHeight - popupHeight) / 2;

    window.open(
      shareLink,
      "_blank",
      `width=${popupWidth},height=${popupHeight},top=${top},left=${left},resizable=no,scrollbars=no,toolbar=no,menubar=no,status=no`
    );
  };

  useEffect(() => {
    if (listArticle) {
      const index = listArticle?.findIndex(
        (item: any) => item?.id === data?.id
      );
      if (index - 1 == -1) {
        setPrevArticle("");
      } else {
        const prevString = `${listArticle[index - 1]?.id}-${
          listArticle[index - 1]?.slug
        }`;
        setPrevArticle(prevString);
      }
      if (index + 1 == listArticle?.length) {
        setNextArticle("");
      } else {
        const nextString = `${listArticle[index + 1]?.id}-${
          listArticle[index + 1]?.slug
        }`;
        setNextArticle(nextString);
      }
    }
  }, [data, listArticle]);

  function removeImgTags(htmlString?: { __html: string }) {
    const parser = new DOMParser();
    const doc = parser.parseFromString(String(htmlString?.__html), "text/html");

    const images = doc.querySelectorAll("img");
    images.forEach((img) => img.remove());

    return { __html: doc.body.innerHTML };
  }
  return (
    <div className="flex flex-col gap-2 py-4 lg:w-[65%] lg:mx-auto">
      <p className="font-semibold text-xl lg:text-3xl">{data?.title}</p>
      <div className="flex flex-row items-center py-1 text-xs lg:text-lg gap-2 lg:gap-4">
        <div className="flex flex-row items-center gap-1">
          <UserIcon size={16} className="lg:hidden" />
          <UserIcon size={22} className="hidden lg:block" />
          <p className="uppercase">{data?.createdByName}</p>
        </div>
        <div className="flex flex-row items-center gap-1">
          <CalendarIcon size={16} className="lg:hidden" />
          <CalendarIcon size={24} className="hidden lg:block" />
          <p>{formatMonthString(data?.updatedAt)}</p>
        </div>
        <div className="flex flex-row items-center">
          <ClockIcon size={16} className="lg:hidden" />
          <ClockIcon size={24} className="hidden lg:block" />
          <p>{`${new Date(data?.updatedAt)
            .getHours()
            .toString()
            .padStart(2, "0")}:${new Date(data?.updatedAt)
            .getMinutes()
            .toString()
            .padStart(2, "0")}`}</p>
        </div>
        <p className="flex items-center gap-1">
          <EyeIconMdi size={16} className="lg:hidden" />
          <EyeIconMdi size={16} className="hidden lg:block" />
          {data?.viewCount === null ? 0 : data?.viewCount}
        </p>
      </div>
      <div className="flex justify-center my-2 lg:my-5">
        {data.files[0].file_name.split(".")[1].includes("doc") ||
        data.files[0].file_name.split(".")[1].includes("pdf") ? (
          <Image
            classNames={{
              wrapper: "!w-full !max-w-full",
              img: "!w-full",
            }}
            alt="Main Image"
            src={data.thumbnailUrl}
            className="object-cover w-[100%] rounded-md"
          />
        ) : (
          data?.files?.length > 0 && (
            <Image
              // classNames={{
              //   wrapper: "!w-full !max-w-full",
              //   img: "!w-full",
              // }}
              alt="Main Image"
              src={data?.files[imageNow]?.file_url}
              className="object-cover w-auto h-[360px] md:h-[480px] mx-auto rounded-md"
            />
          )
        )}
      </div>
      {data?.files?.length > 0 &&
        (data.files[0].file_name.split(".")[1].includes("doc") ||
        data.files[0].file_name.split(".")[1].includes("pdf") ? (
          data.files?.map((file: any, index: number) => (
            <Accordion key={file?.id} variant="splitted" className="px-0">
              <AccordionItem
                key={file?.id}
                aria-label={file?.title}
                className="p-2"
                title={
                  <p className="text-black dark:text-white font-semibold text-xs md:text-sm">
                    {file.file_alt}
                    {/* {`File ${index + 1}`} */}
                  </p>
                }
              >
                <div className="bg-[#FFFFFF] rounded-md font-medium text-xs md:text-sm">
                  <div className="flex justify-between items-center border text-black dark:text-white border-gray-300 p-3 rounded-t-md bg-gray-100 dark:bg-stone-900">
                    <div className="w-[35%] md:w-[20%]">Nama File</div>
                    <div className="w-[65%] md:w-[80%] text-center border-l border-gray-300">
                      {file?.file_name}
                    </div>
                  </div>
                  <div className="flex justify-between border items-center border-gray-300 p-3 text-black">
                    <div className="w-[35%] md:w-[20%]">Ukuran File</div>
                    <div className="w-[65%] md:w-[80%] text-center border-l border-gray-300">
                      {Math.round(file?.size / 100) / 10 > 1000 ? (
                        <>{(Math.round(file?.size / 100) / 10000).toFixed(1)}</>
                      ) : (
                        <>{(Math.round(file?.size / 100) / 10).toFixed(1)}</>
                      )}
                      {" kb"}
                    </div>
                  </div>

                  <div className="flex justify-between items-center border rounded-b-md border-gray-300 p-3 text-black">
                    <div className="w-[35%] md:w-[20%]">Tanggal Publish</div>
                    <div className="w-[65%] md:w-[80%] text-center border-l border-gray-300">
                      {formatMonthString(file?.created_at)}
                    </div>
                  </div>
                </div>
                <Link href={file?.file_url} target="_blank">
                  <Button
                    className="w-full bg-[#DD8306] text-sm font-semibold text-white mt-2"
                    radius="sm"
                    // onPress={() => doDownload(file?.fileName, file?.title)}
                  >
                    Buka File
                  </Button>
                </Link>
              </AccordionItem>
            </Accordion>
          ))
        ) : (
          <div className="flex flex-row gap-3 flex-nowrap overflow-x-auto">
            {data?.files?.map((file: any, index: number) => (
              <a
                key={file.id}
                onClick={() => setImageNow(index)}
                className="cursor-pointer"
              >
                <Image
                  alt="NextUI hero Image"
                  src={file?.file_url}
                  className="object-cover w-[75px] lg:w-[150px] h-[50px] lg:h-[100px] rounded-md"
                />
              </a>
            ))}
          </div>
        ))}
      <div
        dangerouslySetInnerHTML={removeImgTags(
          formatTextToHtmlTag(data?.htmlDescription)
        )}
        className="text-sm lg:text-xl lg:leading-8 text-justify space-y-4"
      />

      <div className="bg-gray-50 dark:bg-black text-black dark:text-white rounded-lg justify-center items-center p-4 flex flex-col gap-3">
        <p className="text-lg border-b-3 border-red-600 font-semibold">TAGS</p>
        <div className="flex flex-wrap gap-2">
          {data?.categories?.map((category: any) => (
            <Link
              href={`/news/all?category_id=${category?.id}`}
              key={category?.id}
              className="text-sm "
            >
              <Button className="bg-[#BE0106] text-white px-2 py-2 rounded-md ">
                {category?.title}
              </Button>
            </Link>
          ))}
        </div>
        <div className="flex flex-wrap gap-2">
          {data?.tags?.split(",").map(
            (tag: any) =>
              tag !== "" && (
                <Link href={``} key={tag} className="text-xs">
                  <Button
                    className="border-[#BE0106] px-2 py-2 rounded-md "
                    variant="bordered"
                    size="sm"
                  >
                    {tag}
                  </Button>
                </Link>
              )
          )}
        </div>
      </div>
      <div className="grid grid-cols-2  md:flex lg:justify-between gap-2 lg:gap-10 my-8">
        <Button
          variant="solid"
          radius="none"
          onPress={() => handleShare("facebook")}
          className="lg:w-[80%] bg-[#3b5998] text-white px-4 py-2 flex flex-row"
        >
          <div className="w-1/4 ">
            <SquareFacebookIcon />
          </div>
          <div className=" text-xl ">Facebook</div>
        </Button>
        <Button
          variant="solid"
          radius="none"
          onPress={() => handleShare("x")}
          className="lg:w-[80%] bg-black text-white px-4 py-2 flex flex-row"
        >
          <div className="w-1/4 ">
            <SquareXIcon />
          </div>
          <div className="w-3/4 text-xl ">X</div>
        </Button>
        <Button
          variant="solid"
          radius="none"
          onPress={() => handleShare("linkedin")}
          className="lg:w-[80%] bg-[#0E76A8] text-white px-4 py-2 flex flex-row"
        >
          <div className="w-1/4 ">
            <SquareLinkedInIcon />
          </div>
          <div className="w-3/4 text-xl ">LinkedIn</div>
        </Button>
        <Button
          variant="solid"
          radius="none"
          onPress={() => handleShare("whatsapp")}
          className="lg:w-[80%] bg-[#25D366] text-white px-4 py-2 flex flex-row"
        >
          <div className="w-1/4 ">
            <SquareWhatsappIcon />
          </div>
          <div className="w-3/4 text-xl ">Whatsapp</div>
        </Button>
      </div>
      <div className="grid grid-cols-2 ">
        {prevArticle === "" ? (
          <p className="flex flex-row items-center gap-3">
            <ChevronLeftIcon /> Sebelumnya
          </p>
        ) : (
          <Link
            href={`/news/detail/${prevArticle}`}
            className="flex flex-row items-center gap-3 font-semibold"
          >
            <ChevronLeftIcon /> Sebelumnya
          </Link>
        )}

        {nextArticle === "" ? (
          <p className="flex flex-row justify-end items-center gap-3">
            Selanjutnya <ChevronRightIcon />
          </p>
        ) : (
          <Link
            href={`/news/detail/${nextArticle}`}
            className="flex flex-row justify-end items-center gap-3 font-semibold"
          >
            Selanjutnya <ChevronRightIcon />
          </Link>
        )}
      </div>
    </div>
  );
}