"use client";

import ActionButton from "@/components/action-button";
import FilterForm from "@/components/common/filter-form";
import { communicationLogFilter } from "@/components/forms/schema/communication-log-filter";
import PageHeader from "@/components/PageHeder";
import CommunicationLogsList from "@/components/communication-logs/communication-logs-list";
import { useQueryClient } from "@tanstack/react-query";
import { FC, useState } from "react";
import { HiOutlineRefresh } from "react-icons/hi";
import { QUERY_KEY } from "@/hooks/use-communication-logs";

const CommunicationLogContent: FC = () => {
  const [filterValue, setFilter] = useState("#");
  const queryClient = useQueryClient();
  const refresh = () => {
    queryClient.invalidateQueries({ queryKey: [QUERY_KEY] });
  };

  return (
    <div>
      <PageHeader>
        <div className="flex justify-between !p-0">
          <h2 className="text-xl font-semibold">Communication Logs</h2>
          <ActionButton type="any" onClick={() => refresh()}>
            <HiOutlineRefresh />
          </ActionButton>
        </div>
      </PageHeader>
      <div className="block border-t dark:border-t dark:border-gray-600">
        <FilterForm
          schema={communicationLogFilter}
          setFilter={setFilter}
          grids={5}
        />
      </div>
      <div className="overflow-hidden shadow">
        <CommunicationLogsList filterValue={filterValue} />
      </div>
    </div>
  );
};

export default CommunicationLogContent;