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

  const param = ":embed=yes&:toolbar=yes&:iframeSizedToWindow=true";

  useEffect(() => {
    async function initState() {
      const response1 = await generateTicket();
      setTicket1(response1?.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="feedback-center"
          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">
              TICKET PADA FEEDBACK CENTER{" "}
            </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>
      </div>
    </div>
  );
}