TEDI-DDP-FE/src/components/page/prescription/MainPrescription/MainPrescription.tsx

import CustomButton from "@/components/customs/custom-button";
import Pagination from "@/components/customs/custom-pagination";
import Search from "@/components/customs/custom-search";
import Table from "@/components/customs/custom-table";
import DataWrapper from "@/components/customs/DataWrapper";
import { PATH } from "@/constant/config";
import { QUERY_KEY } from "@/constant/config/enum";
import { httpRequest } from "@/services";
import prescriptionServices, {
  PrescriptionItem,
  PrescriptionResponse,
} from "@/services/prescriptionServices";
import {
  Tooltip,
  TooltipContent,
  TooltipProvider,
  TooltipTrigger,
} from "@radix-ui/react-tooltip";
import { useQuery } from "@tanstack/react-query";
import { Eye, Pencil, Pill, Trash2 } from "lucide-react";
import Image from "next/image";
import Link from "next/link";
import { usePathname, useRouter, useSearchParams } from "next/navigation";
import React, { useMemo } from "react";

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

  const _page = searchParams.get("_page");
  const _pageSize = searchParams.get("_pageSize");
  const _keyword = searchParams.get("_keyword");

  const prescriptionQuery = useQuery<PrescriptionResponse>({
    queryKey: [
      QUERY_KEY.table_list_patientrescription,
      _page,
      _pageSize,
      _keyword,
    ],

    queryFn: async () => {
      const res = await httpRequest<PrescriptionResponse>({
        showMessageFailed: true,

        http: prescriptionServices.getPrescription({
          Page: Number(_page || 1),
          PageSize: Number(_pageSize || 10),
          Search: _keyword || "",
          SortBy: "id",
          Desc: true,
        }),
      });

      return (
        res || {
          items: [],
          page: 1,
          pageSize: 10,
          total: 0,
          totalPages: 0,
        }
      );
    },
  });

  const prescriptionData = useMemo(() => {
    return prescriptionQuery.data?.items || [];
  }, [prescriptionQuery.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">Đơn thuốc</h2>

        <CustomButton
          variant="midnightBlue"
          fullWidth={false}
          icon={<Pill />}
          href={PATH.CREATE_PRESCRIPTION}
        >
          Tạo mới
        </CustomButton>
      </div>

      {/* SEARCH */}
      <div className="flex items-center justify-between gap-4">
        <div className="w-full md:min-w-[400px]">
          <Search
            keyword={_keyword ?? ""}
            setKeyword={(value) => updateQuery("_keyword", value)}
            placeholder="Tìm theo mã đơn thuốc"
          />
        </div>
      </div>

      <DataWrapper
        data={prescriptionData || []}
        loading={prescriptionQuery.isLoading}
        title="No Data"
        note="Không có đơn thuốc nào"
      >
        <Table
          rowKey={(item: any) => item.id}
          data={prescriptionData || []}
          column={[
            // ================= ID / CODE =================
            {
              title: "MÃ ĐƠN THUỐC",
              render: (item: any) => (
                <TooltipProvider>
                  <Tooltip>
                    <TooltipTrigger asChild>
                      <Link
                        href={`/prescription/${item.id}`}
                        className="text-blue-500 hover:underline"
                      >
                        {item.prescriptionCode}
                      </Link>
                    </TooltipTrigger>

                    <TooltipContent>
                      <p className="p-2 bg-gray-400 border rounded-full">
                        Chi tiết đơn thuốc
                      </p>
                    </TooltipContent>
                  </Tooltip>
                </TooltipProvider>
              ),
            },

            // ================= NOTES =================
            {
              title: "GHI CHÚ",
              render: (item: any) => <span>{item.notes || "-"}</span>,
            },

            // ================= IMAGE =================
            {
              title: "ẢNH ĐƠN THUỐC",
              render: (item: any) =>
                item.prescriptionImg ? (
                  <Image
                    src={`${process.env.NEXT_PUBLIC_IMAGE}${item.prescriptionImg}`}
                    // src={item.prescriptionImg}
                    alt="prescription"
                    width={40}
                    height={40}
                    className="h-10 w-10 rounded object-cover"
                    unoptimized
                  />
                ) : (
                  <span className="text-gray-400">Không có ảnh</span>
                ),
            },

            // ================= ITEMS COUNT =================
            {
              title: "SỐ THUỐC",
              render: (item: any) => <span>{item.items?.length || 0}</span>,
            },

            // ================= ACTION =================
            {
              fixedRight: true,
              title: "ACTION",

              render: (item: any) => (
                <div className="flex flex-col sm:flex-row items-center justify-center gap-2">
                  <CustomButton
                    size="sm"
                    icon={<Eye className="text-blue-400" />}
                    href={`${PATH.PRESCRIPTION}/${item.id}`}
                  />
                </div>
              ),
            },
          ]}
        />
      </DataWrapper>
      <Pagination
        total={prescriptionData?.length}
        page={page}
        pageSize={pageSize}
        onSetPage={(value) => updateQuery("_page", value)}
        onSetPageSize={(value) => updateQuery("_pageSize", value)}
        dependencies={[_pageSize, _keyword]}
      />
    </div>
  );
};

export default MainPrescription;