"use client";
import Table from "@/components/customs/custom-table";
import DataWrapper from "@/components/customs/DataWrapper";
import { QUERY_KEY } from "@/constant/config/enum";
import { httpRequest } from "@/services";
import consultationServices, {
  ReportResponse,
} from "@/services/consultationServices";
import { useQuery } from "@tanstack/react-query";
import moment from "moment";
// import { usePathname, useRouter, useSearchParams } from "next/navigation";
import React, { useMemo } from "react";

const MainPageStatistical = () => {
  //   const router = useRouter();
  //   const pathname = usePathname();
  //   const searchParams = useSearchParams();

  //   const _page = searchParams.get("_page");

  //   const _pageSize = searchParams.get("_pageSize");
  const reportQuery = useQuery<ReportResponse>({
    queryKey: [QUERY_KEY.table_list_report],

    queryFn: async () => {
      const toDate = moment().format("YYYY-MM-DD");
      const fromDate = moment().subtract(14, "days").format("YYYY-MM-DD");

      const res = await httpRequest<ReportResponse>({
        showMessageFailed: true,
        http: consultationServices.getConsultationsReport({
          FormDate: fromDate,
          ToDate: toDate,
        }),
      });

      return res as ReportResponse;
    },
  });

  const reportData = useMemo(() => {
    return reportQuery.data?.specialtyDetails || [];
  }, [reportQuery.data]);

  //   const page = _page ? Number(_page) : 1;
  //   const pageSize = _pageSize ? Number(_pageSize) : 10;

  //   const updateQuery = (key: string, value?: string | number) => {
  //     const params = new URLSearchParams(searchParams.toString());

  //     if (!value) {
  //       params.delete(key);
  //     } else {
  //       params.set(key, String(value));
  //     }

  //     const queryString = params.toString();

  //     router.push(queryString ? `${pathname}?${queryString}` : pathname);
  //   };

  return (
    <div className="flex flex-col gap-4 rounded-lg bg-white p-6 shadow">
      {/* HEADER */}
      <div className="flex items-center justify-between">
        <h2 className="text-xl font-semibold text-black">
          Thống kê các phiên khám
        </h2>
      </div>
      <DataWrapper
        data={reportData}
        loading={reportQuery.isLoading}
        title="Không có dữ liệu"
        note="Vui lòng thử lại sau"
      >
        <Table
          rowKey={(item) => item.specialtyId}
          data={reportData}
          column={[
            {
              title: "MÃ CHUYÊN KHOA",
              render: (item) => <span>{item.specialtyId}</span>,
            },
            {
              title: "TÊN CHUYÊN KHOA",
              render: (item) => <span>{item.specialtyName}</span>,
            },
            {
              title: "SỐ CA KHÁM",
              render: (item) => <span>{item.totalCases}</span>,
            },
          ]}
        />
      </DataWrapper>
      {/* <Pagination
        total={reportData.length}
        page={page}
        pageSize={pageSize}
        onSetPage={(value) => updateQuery("_page", value)}
        onSetPageSize={(value) => updateQuery("_pageSize", value)}
        dependencies={[_pageSize]}
      /> */}
    </div>
  );
};

export default MainPageStatistical;