"use client";
import { usePermission } from "@/utils/auth/permission";
import getData from "@/utils/fetch";
import { cellIndex } from "@/utils/lib/helpers";
import { keepPreviousData, useQuery } from "@tanstack/react-query";
import { Spinner } from "flowbite-react";
import { useSession } from "next-auth/react";
import dynamic from "next/dynamic";
import { FC, useEffect, useState } from "react";
import ActionButton from "../action-button";
import DeleteItem from "../common/delete-item";
import CustomPagination from "../common/pagination";
import DataTable from "../dataTable/data-table-fb";
import { useSettings } from "@/utils/settings";
const ActivityLogChanges = dynamic(() => import("./activity-changes"));

type props = {
  filterValue?: string | null;
};
const ActivityLogsList: FC<props> = ({ filterValue }) => {
  const [visibleColumns, setColumnVisibility] = useState({ company: false, reseller: false })
  const roles: any = useSettings("roles");
  const [currentPage, setCurrentPage] = useState<any>(1);
  const [pagination, setPagination] = useState<any>({});
  const onPageChange = (page: number) => setCurrentPage(page);

  let base_url = `/api/v1/activity-logs?page=${currentPage}`;
  let url = filterValue ? `${base_url}&${filterValue}` : base_url;
  const getActivityLog = async () => {
    const {
      data: { data },
      data: { pagination },
    } = await getData(url);
    setPagination(pagination);
    return data;
  };
  const {
    data: activities,
    isLoading,
    isFetching,
    refetch,
  } = useQuery({
    queryKey: ["activities", { currentPage }],
    placeholderData: keepPreviousData,
    queryFn: () => getActivityLog(),
    refetchOnWindowFocus: false,
  });


  useEffect(() => {
    if (!filterValue?.includes("#")) {
      setCurrentPage(1);
      refetch();
    }
  }, [filterValue]);

  useEffect(() => {
    const isSuperAdmin = roles?.includes("Super Admin");
    if (isSuperAdmin) {
      setColumnVisibility({ company: true, reseller: true })
    }

  }, [roles])

  const columns = [
    {
      header: "SL",
      cell: ({ row }: any) => (
        <div className="font-bold">{cellIndex(row.index, pagination)}</div>
      ),
    },
    {
      header: "company",
      accessorKey: "company",
      enableHiding: true,
    },
    {
      header: "reseller",
      accessorKey: "reseller",
      enableHiding: true,
    },
    {
      header: "Subject",
      accessorKey: "subject",
    },
    {
      header: "Action by",
      accessorKey: "description",
      cell: ({ row }: any) => {
        let activities = row.original;
        return <p className="capitalize">{activities.description}</p>;
      },
    },
    {
      header: "date",
      accessorKey: "updated_at",
    },
    {
      header: "Actions",
      id: "testing",
      cell: ({ row }: any) => {
        const activities = row.original;
        const monitor_id: string = String(activities.id);
        const [isOpen, setOpen] = useState(false);
        return (
          <>
            <div className="flex">
              <div>
                <ActionButton type="view" onClick={() => setOpen(true)} />
                {isOpen && (
                  <ActivityLogChanges
                    changes={activities.changes}
                    isOpen={isOpen}
                    setOpen={setOpen}
                    updated_at={activities?.updated_at}
                  />
                )}
              </div>
              {usePermission("activity-logs.delete") && (
                <DeleteItem
                  keys="activities"
                  name="Activities Logs"
                  url={`/api/v1/activity-logs/${monitor_id}`}
                />
              )}
            </div>
          </>
        );
      },
    },
  ];

  return (
    <>
      {(isLoading || isFetching) && (
        <div className="relative">
          <div className="grid fixed left-2/4 top-1/2 z-50">
            <Spinner size="xl" color="purple" />
          </div>
        </div>
      )}
      {activities !== undefined && (
        <div className="user-list pb-20 shadow-md">
          <div className="border-b dark:border-t dark:border-gray-500">
            <DataTable data={activities} columns={columns} hideColumns={visibleColumns} />
          </div>
          <CustomPagination
            pagination={pagination}
            currentPage={currentPage}
            onPageChange={onPageChange}
            keys={`activities`}
          />
        </div>
      )}
    </>
  );
};
export default ActivityLogsList;