"use client";
import Loading from "@/app/loading";
import Breadcrumb from "@/components/Breadcrumbs/Breadcrumb";
import { ShowcaseSection } from "@/components/Layouts/showcase-section";
import IsVisible from "@/components/ui/IsVisible";
import { useGetNotificationDetails } from "@/hooks/queries/useNotificationQueries";
import { BreadcrumbItem } from "@/types/shared";
import { unixToDate } from "@/utils/shared";
import { use } from "react";

interface IProps {
  params: Promise<{ id: string }>;
}

const NotificationDetailsPage = ({ params }: IProps) => {
  const { id } = use(params);
  const { data, isLoading } = useGetNotificationDetails(id);

  const breadcrumbItems: BreadcrumbItem[] = [
    {
      href: "/",
      name: "Dashboard",
    },
    {
      href: "/notification-history",
      name: "Notification history",
    },
    {
      href: `/notification-history/${id}`,
      name: "Notification details",
    },
  ];
  if (isLoading) return <Loading />;
  return (
    <>
      <Breadcrumb items={breadcrumbItems} />
      <ShowcaseSection title={`${data?.data.title}`}>
        <div className="mt-4 grid grid-cols-4 gap-15 pb-4">
          <IsVisible condition={!!data?.data.message}>
            <ShowcaseSection title="Message">
              {data?.data.message}
            </ShowcaseSection>
          </IsVisible>
          <IsVisible condition={!!data?.data.event_type}>
            <ShowcaseSection title="Event Type">
              {data?.data.event_type}
            </ShowcaseSection>
          </IsVisible>
          <IsVisible condition={!!data?.data.link}>
            <ShowcaseSection title="Link">{data?.data.link}</ShowcaseSection>
          </IsVisible>

          <IsVisible condition={!!data?.data.priority}>
            <ShowcaseSection title="Priority">
              {data?.data.priority}
            </ShowcaseSection>
          </IsVisible>

          <IsVisible condition={!!data?.data.type}>
            <ShowcaseSection title="Type">{data?.data.type}</ShowcaseSection>
          </IsVisible>
          <IsVisible condition={!!data?.data.seen_at}>
            <ShowcaseSection title="Seen at">
              {unixToDate({ unix: data?.data.seen_at ?? 0, hasTime: false })}
            </ShowcaseSection>
          </IsVisible>

          <ShowcaseSection title="Is Scheduled">
            {data?.data.is_scheduled ? "Yes" : "No"}
          </ShowcaseSection>
          <ShowcaseSection title="Has seen">
            {data?.data.seen ? "Yes" : "No"}
          </ShowcaseSection>
        </div>
      </ShowcaseSection>
    </>
  );
};

export default NotificationDetailsPage;
