"use client";
import SiteBreadcrumb from "@/components/site-breadcrumb";
import {
  Accordion,
  AccordionContent,
  AccordionItem,
  AccordionTrigger,
} from "@/components/ui/accordion";
import { useEffect, useState } from "react";
import { addDays, format } from "date-fns";
import { Calendar as CalendarIcon } from "lucide-react";
import { DateRange } from "react-day-picker";
import Cookies from "js-cookie";
import { cn, getCookiesDecrypt } from "@/lib/utils";
import { Button } from "@/components/ui/button";
import { Calendar } from "@/components/ui/calendar";
import {
  Popover,
  PopoverContent,
  PopoverTrigger,
} from "@/components/ui/popover";
import { generateTicket } from "@/service/tableau/tableau-service";

const users = [
  { id: 1, name: "POLRI" },
  { id: 2, name: "JURNALIS" },
];

export default function ContentManagement() {
  const [startDate, setStartDate] = useState<any>(new Date());
  const [endDate, setEndDate] = useState<any>(new Date());
  const [hasMounted, setHasMounted] = useState(false);
  // const t = useTranslations("AnalyticsDashboard");
  const levelName = getCookiesDecrypt("ulnae");
  const poldaState = Cookies.get("state");
  const provState = Cookies.get("state-prov");

  const [ticket1, setTicket1] = useState("");
  const [ticket2, setTicket2] = useState("");
  const [ticket3, setTicket3] = useState("");
  const [ticket4, setTicket4] = useState("");
  const [ticket5, setTicket5] = useState("");
  const [ticket6, setTicket6] = useState("");
  const [isInternational, setIsInternational] = useState([false, false, false]);

  const baseUrl = "https://db-mediahub.polri.go.id/";
  const url = "https://db-mediahub.polri.go.id/trusted/";

  const view1 =
    levelName == "MABES POLRI"
      ? isInternational[0]
        ? "views/2023_08_MediaHUB-KtnMgt_Rev100/db-ktn-indo-polri?"
        : "views/2023_08_MediaHUB-KtnMgt_Rev100/db-ktn-indo-polri?"
      : `views/2023_08_MediaHUB-KtnMgt_Rev100/db-ktn-indo-polri?provinsi-polda=${provState}&`;

  const view2 =
    levelName == "MABES POLRI"
      ? isInternational[1]
        ? "views/2023_08_MediaHUB-KtnMgt_Rev100/db-ktn-indo-jurnalis?"
        : "views/2023_08_MediaHUB-KtnMgt_Rev100/db-ktn-indo-jurnalis?"
      : `views/2023_08_MediaHUB-KtnMgt_Rev100/db-ktn-indo-jurnalis?provinsi-polda=${poldaState}&`;

  const view3 =
    levelName == "MABES POLRI"
      ? isInternational[2]
        ? "views/2023_08_MediaHUB-KtnMgt_Rev100/db-ktn-jurnalis-intl?"
        : "views/2023_08_MediaHUB-KtnMgt_Rev100/db-ktn-jurnalis-intl?"
      : `views/2023_08_MediaHUB-KtnMgt_Rev100/db-ktn-jurnalis-intl?provinsi-polda=${poldaState}&`;

  const view4 =
    levelName == "MABES POLRI"
      ? isInternational[3]
        ? "views/2023_08_MediaHUB-KtnMgt_Rev100/db-ktn-indo-satker?"
        : "views/2023_08_MediaHUB-KtnMgt_Rev100/db-ktn-indo-satker?"
      : `views/2023_08_MediaHUB-KtnMgt_Rev100/db-ktn-indo-satker?provinsi-polda=${poldaState}&`;

  const view5 =
    levelName == "MABES POLRI"
      ? isInternational[4]
        ? "views/2023_08_MediaHUB-KtnMgt_Rev100/db-ktn-indo-jnl?"
        : "views/2023_08_MediaHUB-KtnMgt_Rev100/db-ktn-indo-jnl?"
      : `views/2023_08_MediaHUB-KtnMgt_Rev100/db-ktn-indo-jnl?provinsi-polda=${poldaState}&`;

  const view6 =
    levelName == "MABES POLRI"
      ? isInternational[5]
        ? "views/2023_08_MediaHUB-KtnMgt_Rev100/db-ktn-intl?"
        : "views/2023_08_MediaHUB-KtnMgt_Rev100/db-ktn-intl?"
      : `views/2023_08_MediaHUB-KtnMgt_Rev100/db-ktn-intl?provinsi-polda=${poldaState}&`;
  const param = ":embed=yes&:toolbar=yes&:iframeSizedToWindow=true";

  useEffect(() => {
    async function initState() {
      const response1 = await generateTicket();
      setTicket1(response1?.data?.data);

      const response2 = await generateTicket();
      setTicket2(response2?.data?.data);

      const response3 = await generateTicket();
      setTicket3(response3?.data?.data);

      const response4 = await generateTicket();
      setTicket4(response4?.data?.data);

      const response5 = await generateTicket();
      setTicket5(response5?.data?.data);

      const response6 = await generateTicket();
      setTicket6(response6?.data?.data);
    }

    initState();
  }, [isInternational]);

  // Hooks
  useEffect(() => {
    setHasMounted(true);
  }, []);

  // Render
  if (!hasMounted) return null;

  const handleInternational = (index: number, val: boolean) => {
    const updatedIsInternational = [...isInternational];

    updatedIsInternational[index] = val;
    setIsInternational(updatedIsInternational);
  };

  return (
    <div>
      <SiteBreadcrumb />
      <div className="flex flex-col gap-3">
        <Accordion id="polri" type="single" collapsible className="w-full">
          <AccordionItem value="item-1" className="bg-white dark:bg-black w-full">
            <AccordionTrigger className="bg-white dark:bg-black">
              KONTEN YANG DISIMPAN OLEH PENGGUNA POLRI INDONESIA
            </AccordionTrigger>
            <AccordionContent>
              <div className="flex flex-col">
                <div className="my-5">
                  {ticket1 == "" ? (
                    <iframe
                      src={`${baseUrl + view1 + param}`}
                      width="100%"
                      height="750"
                      frameBorder="0"
                    />
                  ) : (
                    <iframe
                      src={`${`${url + ticket1}/${view1}${param}`}`}
                      width="100%"
                      height="750"
                      frameBorder="0"
                    />
                  )}
                </div>
              </div>
            </AccordionContent>
          </AccordionItem>
        </Accordion>
        <Accordion id="2" type="single" collapsible className="w-full">
          <AccordionItem value="item-2" className="bg-white dark:bg-black w-full">
            <AccordionTrigger className="bg-white dark:bg-black">
              PENAMBAHAN JUMLAH PENGGUNA JURNALIS INDONESIA
            </AccordionTrigger>
            <AccordionContent>
              <div className="flex flex-col">
                <div className="my-5">
                  {ticket2 == "" ? (
                    <iframe
                      src={`${baseUrl + view2 + param}`}
                      width="100%"
                      height="750"
                      frameBorder="0"
                    />
                  ) : (
                    <iframe
                      src={`${`${url + ticket2}/${view2}${param}`}`}
                      width="100%"
                      height="750"
                      frameBorder="0"
                    />
                  )}
                </div>
              </div>
            </AccordionContent>
          </AccordionItem>
        </Accordion>
        <Accordion id="3" type="single" collapsible className="w-full">
          <AccordionItem value="item-1" className="bg-white dark:bg-black w-full">
            <AccordionTrigger className="bg-white dark:bg-black">
              KONTEN YANG DISIMPAN OLEH PENGGUNA JURNALIS INTERNASIONAL
            </AccordionTrigger>
            <AccordionContent>
              <div className="flex flex-col">
                <div className="my-5">
                  {ticket3 == "" ? (
                    <iframe
                      src={`${baseUrl + view3 + param}`}
                      width="100%"
                      height="750"
                      frameBorder="0"
                    />
                  ) : (
                    <iframe
                      src={`${`${url + ticket3}/${view3}${param}`}`}
                      width="100%"
                      height="750"
                      frameBorder="0"
                    />
                  )}
                </div>
              </div>
            </AccordionContent>
          </AccordionItem>
        </Accordion>
        <Accordion id="4" type="single" collapsible className="w-full">
          <AccordionItem value="item-1" className="bg-white dark:bg-black w-full">
            <AccordionTrigger className="bg-white dark:bg-black">
              PENAMBAHAN JUMLAH PENGGUNA POLRI INDONESIA
            </AccordionTrigger>
            <AccordionContent>
              <div className="flex flex-col">
                <div className="my-5">
                  {ticket4 == "" ? (
                    <iframe
                      src={`${baseUrl + view4 + param}`}
                      width="100%"
                      height="750"
                      frameBorder="0"
                    />
                  ) : (
                    <iframe
                      src={`${`${url + ticket4}/${view4}${param}`}`}
                      width="100%"
                      height="750"
                      frameBorder="0"
                    />
                  )}
                </div>
              </div>
            </AccordionContent>
          </AccordionItem>
        </Accordion>
        <Accordion id="5" type="single" collapsible className="w-full">
          <AccordionItem value="item-1" className="bg-white dark:bg-black w-full">
            <AccordionTrigger className="bg-white dark:bg-black">
              PENAMBAHAN JUMLAH PENGGUNA JURNALIS INDONESIA
            </AccordionTrigger>
            <AccordionContent>
              <div className="flex flex-col">
                <div className="my-5">
                  {ticket5 == "" ? (
                    <iframe
                      src={`${baseUrl + view5 + param}`}
                      width="100%"
                      height="750"
                      frameBorder="0"
                    />
                  ) : (
                    <iframe
                      src={`${`${url + ticket5}/${view5}${param}`}`}
                      width="100%"
                      height="750"
                      frameBorder="0"
                    />
                  )}
                </div>
              </div>
            </AccordionContent>
          </AccordionItem>
        </Accordion>
        <Accordion id="6" type="single" collapsible className="w-full">
          <AccordionItem value="item-1" className="bg-white dark:bg-black w-full">
            <AccordionTrigger className="bg-white dark:bg-black">
              PENAMBAHAN JUMLAH PENGGUNA JURNALIS INTERNASIONAL
            </AccordionTrigger>
            <AccordionContent>
              <div className="flex flex-col">
                <div className="my-5">
                  {ticket6 == "" ? (
                    <iframe
                      src={`${baseUrl + view6 + param}`}
                      width="100%"
                      height="750"
                      frameBorder="0"
                    />
                  ) : (
                    <iframe
                      src={`${`${url + ticket6}/${view6}${param}`}`}
                      width="100%"
                      height="750"
                      frameBorder="0"
                    />
                  )}
                </div>
              </div>
            </AccordionContent>
          </AccordionItem>
        </Accordion>
      </div>
    </div>
  );
}