"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";

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-rank?"
        : "views/2023_08_MediaHUB-KtnMgt_Rev100/db-ktn-rank?"
      : `views/2023_08_MediaHUB-KtnMgt_Rev100/db-ktn-rank?provinsi-polda=${provState}&`;

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

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

  const view4 =
    levelName == "MABES POLRI"
      ? isInternational[3]
        ? "views/2023_08_MediaHUB-KtnMgt_Rev100/db-ktn-act-jnl?"
        : "views/2023_08_MediaHUB-KtnMgt_Rev100/db-ktn-act-jnl?"
      : `views/2023_08_MediaHUB-KtnMgt_Rev100/db-ktn-act-jnl?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);
    }

    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="schedule-press-conference"
          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">
              PUBLISH JADWAL PRESS CONFERENCE TERBANYAK
            </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="content-press-conference"
          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">
              JUMLAH PRODUKSI KONTEN UNTUK KATEGORI PRESS CONFERENCE
            </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="interaction-press-conference"
          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">
              TINGKAT INTERAKSI KONTEN UNTUK KATEGORI PRESS CONFERENCE
            </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="press-release"
          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">
              AKTIFITAS MEDIA BERKAITAN DENGAN PERS RILIS
            </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>
      </div>
    </div>
  );
}