"use client";
import { useEffect, useState, type FC } from "react";

import PageHeader from "@/components/PageHeder";
import ActionButton from "@/components/action-button";
import ActivityLogsList from "@/components/activity-logs/activity-logs-list";
import { useQueryClient } from "@tanstack/react-query";
import dynamic from "next/dynamic";
import { HiRefresh } from "react-icons/hi";
import { activityLogFilter } from "@/components/forms/schema/activity-log-filter";
import { useSettings } from "@/utils/settings";
const FilterForm = dynamic(() => import("@/components/common/filter-form"));

const MonitoringContent: FC = () => {
  const roles: any = useSettings("roles");
  const queryClient = useQueryClient();
  const [filterValue, setFilter] = useState<string | null>(null);
  const refresh = () => {
    queryClient.invalidateQueries({ queryKey: ["activities"] });
  };

  return (
    <>
      <PageHeader className="-mb-1">
        <div className="block border-gray-200 bg-white  dark:border-gray-700 dark:bg-gray-800">
          <div className=" w-full items-center justify-between flex">
            <div className="sm:flex">
              <h1 className="text-xl font-semibold text-gray-900 dark:text-white sm:text-2xl">
                Activity Logs
              </h1>
            </div>
            <ActionButton type="any" onClick={() => refresh()}>
              <HiRefresh />
            </ActionButton>
          </div>
        </div>
      </PageHeader>

      <div className="block border-t dark:border-t dark:border-gray-600">
        <FilterForm schema={activityLogFilter} setFilter={setFilter} grids={3} />
      </div>
      <div className="flex flex-col">
        <div className="overflow-x-auto">
          <div className="inline-block min-w-full align-middle">
            <div className="overflow-hidden shadow">
              <ActivityLogsList filterValue={filterValue} />
            </div>
          </div>
        </div>
      </div>
    </>
  );
};

export default MonitoringContent;